HTML・CSS初心者にお勧めのBootstrap

2016.04.27

投稿者: narito

HTML・CSSの学習を始める方は沢山いますが、難しく感じる方も多いようです。
HTML5・CSS3や、「モバイルファースト」という考え方が普及し、昔と違い、今風のウェブサイトを作るのは一朝一夕では難しくなりました。
しかし一方で、ウェブサイトの構築をできるだけ簡単に行えるよう、「CSSフレームワーク」と呼ばれるものも出てきました。
初心者の方には、そのCSSフレームワークの中で最も人気があるフレームワークの１つ「Bootstrap」というフレームワークをお勧めします。

そもそもCSSフレームワークとは？
システム開発の世界には「フレームワーク」と呼ばれるものがあります。
フレームワーク（framework）は日本語で「骨組み，枠組み」といった意味になりますが、その意味のとおり、プログラムやシステムの骨組みにあたります。
フレームワークを使用すると骨組みが既に用意されている状態になり、中身の作成に集中することができます。
上の説明は少しピンと来ないかもしれませんが、CSSフレームワークの場合はもう少し単純です。「CSSの書式設定を集めたライブラリー集」と言い換えてしまってもほとんど問題ありません。
実際にコードを書く際は、Bootstrapが用意したCSSの設定を色々組み合わせてWebサイトを構築していくことが基本となります。

簡単にレイアウトを組むことができる
多くのWebサイトでは、2カラム、もしくは3カラムのレイアウトが主流です。
例えば3カラムですと、左から順に「商品カテゴリ一覧の列」「商品の詳細な情報の列」「広告を表示している列」のようなレイアウトです。
HTML・CSSに慣れていれば特に問題はないのですが、初心者の方はこういったレイアウトを上手く作れないことが多いようです。
Bootstrapには「グリッドシステム」と呼ばれる機能があり、これを使うことで簡単に2カラム、3カラムといったレイアウトを作成することが可能です。
以下のコードはグリッドシステムを使った3カラムの例です。

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-3">
      <p>商品カテゴリーの列です</p>
    </div>
    <div class="col-xs-12 col-sm-6">
      <p>商品の詳細情報の列です</p>
    </div>
    <div class="col-xs-12 col-sm-3">
      <p>広告の列です</p>
    </div>.
  </div>
</div>

グリッドシステムでは全体を合計12個の列として考えます。
上のコードでは、カテゴリーが3列分の幅で、詳細情報居は6列分、広告は3列分になります。
更に、商品の詳細情報の列を2等分、3等分…というようなレイアウトも簡単に作成できます。

レスポンシブ対応も簡単
今ではスマートフォンからWebサイトにアクセスする、ということが当たり前になり、スマートフォンでも快適に閲覧できるWebサイトを作成することが必要になりました。
従来のウェブサイトでは、PCユーザにはPC向けページを、モバイルユーザにはモバイル向けページを見せるという方法が一般的でしたが、この方法はPC・モバイルページをそれぞれ作成する必要がありました。
つまり、全部で10ページあるサイトでは、PC向けページが10個、モバイル向けページが10個となってしまいます。
この方法が適している状況もありますが、今は１つのHTMLで複数のデバイスに対応するレスポンシブデザインが主流です。
Bootstrapを使用すると、非常に簡単にレスポンシブなWebサイトが作成できます。
先ほど書いたコードですが、これはスマートフォンで見た場合は3カラムではなく、1カラムとなり、全ての列が画面の横幅に広がります。
col-xs-12 col-sm-3
この指定は、スマートフォンでは12列全部使い、タブレット以降では3列使うという意味だったのです。

CSSの理解が深まる？
「CSSの書式設定を集めたライブラリー集」と前に書きましたが、言い換えるとCSSの優秀な見本・ノウハウが集まっている、と考えることができ、そしてこれらは簡単に見ることが可能です。具体的には、導入したBootstrapのcssフォルダにある「bootstrap.css」ファイルを開くだけです。
例えば、img-responsiveというBootstrapの指定は画像サイズをレスポンシブに変化させることができますが、その中身は以下のようになっています。

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

以外に思うかもしれませんが、これだけです。
Bootstrapを使用していないサイトでも、画像サイズをレスポンシブにするため上記のような指定をすることはよくあります。

注意点
この内容は、2016年4月22日現在の安定版であり主流のBootstrap3(v3.3.6)を元にしています。
以前のBootstrap2や、現在開発中のBootstrap4では書き方や仕様が少し異なっています。
BootstrapについてWebサイトや書籍を見る際は、使用しているバージョンが同じかを確認するようにしましょう。