【基礎】Bootstrapって分かりにくいよねって感じた人のための超入門

相変わらずWeb系の勉強を進めています。皆さんもプログラミングに励んでいることでしょう。

最近はwebサイトを作るときに便利だと言われている、Twitter社が開発したBootstrapの使用しています。しかしながらこのシステム、最初はとっつきにくい・・・。

というわけで今日は、消化の意味もこめてBootstrapの基本を解説していきます。

Bootstrapの魅力

farmhouse-1638676_1280

Bootstrapの魅力は何と言っても「開発スピードが上がる」という事ですが、そもそもの構造を理解していないと使いづらいです。特にHTMLやcssについて理解がないと、先に進むことは難しいでしょう。

今日はそれらの基本が分かっていること前提で話を進めていきます。

 

先程にも言いましたが、Bootstrapの魅力は指定されたコードを使用することで「整ったデザインを素早く制作することができるシステム」です。

コンポーネントと呼ばれる要素を組み合わせ、Webサイトのフレームワークを素早く作り上げることができるのが最大の魅力となっています。この超便利な概念を可能としたのは「グリッドシステム」というものです。

これを採用することでデザインに合わせて、作成したい要素をグリッド単位でデザインすることができます。このグリッドシステムについての詳しい説明はまた後ほどにしていきます。

 

グリッドシステムが秀逸であり、スピード感を持ってwebサイトの制作ができる、これがBootstrapの最大の魅力だと考えています。そんなBoostrapを導入段階からグリッドシステムまで、初心者が覚えるべきことをサクッと解説していきましょう。

 

Bootstrapの導入

bootstrap

それでは実際にBootstrapを導入していきます。公式サイトにダウンロードのリンクが置いてあるのでダウンロードしましょう。

bootstrap1

次のページには3つの選択肢からBootstrapをダウンロードすることができます。とりあえず一番左の部分からダウンロードしておきましょう。

bootstrap2

 

ダウンロードしたフォルダの中身はJavaScriptのソース、jQuery、bootstrap専用のcssが入っています。htmlファイル自体は存在していないので自分で作成する必要があります。またhtmlの雛形も公式サイトに掲載されていているのでサイトからコピーすることができます。

まずはこちらを利用してindex.htmlを作成していきましょう。

bootstrap3

 

ついでにですが、和訳したものを作成してみました。英語が苦手な人でコメント欄などを確認したい人は下のソースを参考にしてみて下さい。またこちらから下記のソースコードをzipに圧縮したファイルのダウンロードも可能です。

ただバージョン変更などででhtmlの雛形が変更される場合があります。上記のファイルを使用する際は、内容確認だけにして公式サイトのものを使用するようにしてください。

個人的に和訳したものですので、発生した問題に関しての責任は追いません。ご注意あれ。

 

 

ダウンロードしたBootstrapのフォルダ内に新規作成したhtmlファイルを作成することでbootstrapの導入は完了となります。あとは実際にWebサイトのコーディング作業を進めていってください。

では先ほどチラッと説明した、グリッドシステムについて解説していきます。

 

グリッドシステムとは?

grid-system

Bootstrapで採用されているのは「グリッドシステム」と呼ばれるスタイルです。これは読んで字の通り、グリッドを元としてサイトをレイアウトしていく考え方です。特にbootstrapではdivにclass=”row”など、決められたクラス名を付与することでグリッドシステムを使用することができます。

一例はこんな感じです。

こうした記述することでbootstrapは簡単にレスポンシブな3カラムのウェブサイトを作ることができます。これらのポイントは「class=”row”」です。このクラスを付与するとbootstrapからダウンロードしたcssの働きによって幅を12個のカラムに割り振ってくれます。

上記の例は、”col-sm-4″と指定しているので、12個に分けたグリッドの4つ分の幅を使用して<div>を形成してくれます。

 

そして第二のポイントは、rowクラスで割り振られた各<div>の合計は12である必要があるということです。上記の例では”col-sm-4″が3つなので、合計して12になります。

最後の数字が使用するグリッドの数を指定しています。これは大事なので覚えておきましょう。また中間にあるsmというのはprefixと呼ばれるものです。これ以外にもxs、md、lg、xlが存在しています。

これが何を示しているかわかりづらいかもしれません。もう少し説明を加えていきます。

もともとbootstrapはレスポンシブ対応のウェブサイトを作る時に重宝されるツールです。つまりページ見にきたデバイスの画面幅によって、レイアウトを変えてくれる便利なシステムとなっています。

 

それらの画面幅によってレイアウトを変えたい時にこのprefixが大活躍してくれます。

簡単に説明すると「prifexはどの画面幅まで、指定したレイアウトを維持するか」を支持することができるのです。指定の画面幅より小さくなった場合は、各カラムが縦に並ぶようになります。また各prefixに対応する画面幅の一覧は下の画像で確認してください。

grid-size

 

グリッドシステムの例

これでグリッドシステムの大まかな説明は終了です。少しカラムの数を変えた場合の例を挙げておきます。bootstrapの書き方の参考にどうぞ。

 

1つのカラム

 

2つのカラム

 

3つのカラム

 

4つのカラム

 

6つのカラム

余談ですが「div class=”container”」は画面内で中央寄せを自動で行ってくれるクラスです。3カラムや4カラムでコンテンツを中央寄せにしてくれるので重宝します。最近のWEBサイトはよりシンプルな方向へデザインが向かっていっていますから。

また他にもたくさんの機能がbootstrapに備わっています。ボタンやjumbotronなど、普段のウェブ制作に欠かせない機能がいっぱいです。

 

これらの要素は少しづつ習得していくべきです。

ただ見る人が見ればbootstrapのデザインだとバレてしまうので、カスタマイズなどを加えつつ使用していくのが良さそうですね。この辺の記事については別の機会に記事にしていきます。

今はBootstrapの基礎知識を学んでいる最中なので、ある程度の知識がついてからカバーしていきたいですね。実に奥が深いのでたくさん学び取れそうです。

 

まとめ

以上、Bootstrapの基礎知識について説明してきました。「ツイッターはとても便利なものを開発してくれたな〜」としみじみと感じています。とくにイメージをササッと現実にしてくれるので重宝しますね。

また、Bootstrapを使用したカスタマイズやwebサイトの制作方法についても書いていきたいと考えています。とくにBootstrapを使用したデザインは奥が深いです。

多くのことを学ばなければならないので、今後もbootstrapについて勉強していきますよ!みなさんも一緒に頑張りましょう。

この記事が気に入ったら
いいね ! しよう

Twitter で
SPONSORED LINK

ABOUTこの記事をかいた人

旅・音楽・プログラミング・ブログを愛するコンテンツ・クリエーター。フィリピンで就業、カナダで語学留学を経験しニュージーランドで大学を卒業。 TECH::CAMPの二十九期生としてRuby / Ruby on Railsを勉強しました。記事の執筆・広告は「お問い合わせ」からお願いします。