【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分割に仕切られた配置ラインがあります。
そのグリッドの数で横幅を指定することになります。
タグで書くとこんな感じです。

<div class="container">
   <div class="row">
      <div class="col-1 border">テスト</div>
      <div class="col-1 border">テスト</div>
      <div class="col-1 border">テスト</div>
      <div class="col-1 border">テスト</div>
      <div class="col-1 border">テスト</div>
      <div class="col-1 border">テスト</div>
      <div class="col-1 border">テスト</div>
      <div class="col-1 border">テスト</div>
      <div class="col-1 border">テスト</div>
      <div class="col-1 border">テスト</div>
      <div class="col-1 border">テスト</div>
      <div class="col-1 border">テスト</div>
   </div>
</div>

と、こんな感じです。

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

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

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8"> 
      <title>タイトル</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">    
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <link rel="stylesheet" href="mystyle.css">
      <meta name="description" content="サイトキャプションを入力">
      <meta name="keywords" content="サイトキーワードを,で区切って入力">
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

      <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
      <![endif]-->
   </head>
   <body>
      <div class="container">
         <div class="row">
            <header class="col bg-primary">
               <h1>ヘッダー</h1>
            </header>
         </div>
         <div class="row bg-dark">
            <div class="col-sm-8">
               <nav class="my-2 bg-warning">
                  <a href="">メニュー１</a>
                  <a href="">メニュー１</a>
                  <a href="">メニュー１</a>
                  <a href="">メニュー１</a>
               </nav>
               <div class="mb-2 bg-danger">
                  <h1>メイン</h1>
                  <p>テキストテキストテキストテキストテキストテキスト</p>
                  <p>テキストテキストテキストテキストテキストテキスト</p>
                  <p>テキストテキストテキストテキストテキストテキスト</p>
               </div>
               <div class="mb-2 bg-danger">
                  <h1>メイン</h1>
                  <p>テキストテキストテキストテキストテキストテキスト</p>
                  <p>テキストテキストテキストテキストテキストテキスト</p>
                  <p>テキストテキストテキストテキストテキストテキスト</p>
               </div>
               <div class="mb-2 bg-danger">
                  <h1>メイン</h1>
                  <p>テキストテキストテキストテキストテキストテキスト</p>
                  <p>テキストテキストテキストテキストテキストテキスト</p>
                  <p>テキストテキストテキストテキストテキストテキスト</p>
               </div>
            </div>
            <div class="col-sm-4 my-2 bg-success">
               <h2>サイドバー</h2>
               <h2>サイドバー</h2>
               <h2>サイドバー</h2>
            </div>
         </div>
         <div class="row">
            <footer class="col bg-secondary text-light">
               フッター
            </footer>
         </div>
      </div>
   </body>
</html>

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

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

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