【Bootstrapを理解しよう】【WordPress】テーマの自作を目指して　その２

こんにちは朱夏です。

前回、Wordpressのテーマ作成のため、ベースとなるテンプレートHTMLを作成する中で出てきたBootstrapの理解を深めていこうと思います。

前回は、「CSSで指定していないのに、何で<div>が横並びになってるんだ」とか「どこにも使われてないのにclassが指定されているタグは何なんだろう」とか、めちゃくちゃ悩まされました。

しかし、知ってしまえば、これほど便利なものがあるのかと驚きました。

何ができるかというと・・・

• レスポンシブサイトの作成が楽になる
• CSSの量を大幅に減らせる
• ボタンやアイコンなど素材が豊富

他にも、簡単な動きを付けたり、レスポンシブに対応したナビゲーションバー（メニュー）があったりと、CSSであれこれしなくても実装できる優れものの様です。

呼び出し方法はJavaScriptと同じで、ダウンロードして、ディレクトリ内に配置して呼び出す方法と、URLを指定してインターネットから呼び出す方法があります。
今回私は、URLから呼び出す方法を使います。

というわけで、今回はBootstrapの勉強を兼ねて、テンプレートHTMLを修正してみましょう。

レイアウトの編集

Bootstrapで強力なのはこれだと思います。
簡単に、おきたい場所に置けて、レスポンシブ対応も可能。
これがCSSの記述なしに実現する訳ですから。

書き方は、Bootstrapで指定されたclassを指定するだけです。
指定するクラスは、”container”、”row”、”col”です。

“container”の中に”row”を入れ、その中に”col”を入れて使います。
入れ子というやつですね。

Bootstrapでは、グリッドと呼ばれる、縦12分割に仕切られた配置ラインがあります。
そのグリッドの数で横幅を指定することになります。
タグで書くとこんな感じです。

と、こんな感じです。

containerという本棚の中にrowで棚を作ってcolという本を並べていくイメージですかね。
本棚は12冊分の幅があり、分厚い本は2冊分だとか3冊分と指定することで配置できます。
実際に記載するときはcol-*で1～12を指定すればOKです。
横1行の合計は12までになります。
12以上になった場合は、あふれた分が次の行になります。

これを使って前回のテンプレートHTMLを修正してみました。

完成したのがこちらです。
CSSへの記載は必要なくなりました。

結局、body内はほぼ全部書き直しになってしまいましたが、シンプルに自分が解りやすいものができました。

というわけで今回はここまでです。