[入門編]ウェブサイトをリニューアルしてみよう～Bootstrapのインストール方法と準備編～
うちのウェブサイトのスマホ対策が甘いので、この機会にBootstrapを使ってリニューアルをしてみようと思います。
Bootstrapを使用してhtmlを作りぃのWordpressに変換してみる流れです。あとはモバイルファーストで作っていきます。
ですので、htmlやcssが全く分からない方には厳しいかもしれません。Bootstrapを使ってみたいけどな～Wordpressで変換してみたいな～って方にはおススメです。
Bootstrapとはなんぞや！
BootstrapはCSSフレームワークのひとつ。twitter社で作られました。
CSSフレームワークとはなんぞや！
あらかじめcssが決まっていて、特定のclass名を指定するだけで簡単にウェブサイトに彩りを加えられる便利なやつです。
モバイルファーストとはなんぞや！
従来のウェブサイトはPC版を作ってからスマホ・タブレットに対応させてきましたが、モバイルファーストはスマホ版作ってからPC・タブレットに対応させていくという考え方です。メリットとしては近年スマホからのアクセスが急増しているので、それに対応しやすいこと。SEO対策にもなりますしね。
では早速作っていきましょう。
準備１．Bootstrapをダウンロードしてみよう
まずはBootstrapをダウンロードするために公式ページに行きましょう。2016年10月時点でBootstrap4があるみたいですが、まだ正式リリースされていないので今回はBootstrap3を使用します。中央下部にある『Download Bootstrap』をクリック。
するとこちらのページに飛びますので『Dawnload Bootstrap』をクリック。上の紫色になっている箇所ですね。
クリックするとダウンロードが開始されます。zipファイルを落としたら解凍してみましょう。以下の３つのファイルが表示されるはずです。
css
fonts
js
これらがBootstrapの全ファイルです。cssフレームワークなんでこんなもんですね。これにてダウンロードは完了しました。
さて次は設定です～。
準備２．index.htmlを作ろう
Bootstrapのダウンロードが終わったら、次はindex.htmlを作成します。基本的な構文はBootstrapの公式に載っていますので、それをそのままコピペで使うことにします。
メニューにある『Getting started』をクリックしてください。
さっきのダウンロードページに来ましたね。そのままスクロールして『Basic template』ってところまで行きます。
このソースをコピーしてテキストエディタにペーストします。右上の赤枠内を押すと簡単コピー。
下がテキストエディタにペーストした状態。ただ少し変更を加えます。
日本語を使用するので<html lang=”en”>となっているところを<html lang=”ja”>に変更します。
<html lang="en">
↓
<html lang="ja">
これで準備完了です。あとはindex.htmlと名前を付けて保存しましょう。
では次からは早速作っていきたいと思います～。ではでは～。
Follow me!
