WordPressのテーマ作りにBootStrapを導入しよう

公開日:2020 2/15

デザインできないエンジニアの味方！Bootstrap！

BootStrapを使うかどうかはお好みに任せますが、とりあえずCSSフレームワークの恩恵を感じてみましょう。

如何に普通のCSSを書くのがバカらしくなるかを体感出来てしまうので堕落してしまう可能性があります(笑)

意外と私みたいに結局全部自分でやったほうがいいわ！

ってなってしまうかもしれないので物は試しです。

それではWordpress自作テーマ講座第20回目を始めましょう。

BootStrapをCDNで読み込んでみよう
今までのCSSは使わずBootStrapを体験してみよう
BootStrapだけでレイアウトしてみよう
Wordpress自作テーマ講座第20回まとめ

BootStrapをCDNで読み込んでみよう

本来はファイルを落としてきて読み込みますが、CDNという仕組みを使ってファイルをダウンロードせずに使うことが出来ます。

他人のファイルを自分のサイトに読み込むなんて言語道断！ってのは間違っていませんが、 CDNというのは負荷分散の仕組みがあるので同じアドレスでも参照する先が違う(こっちには見えない)ので気にせず使えます。

しかも同じCDNを使っている人が居れば既に自分のところにキャッシュされているのでその分の読み込み負荷が無くなりサイトの表示速度があがります。

いいことづくめですね。

特別な理由が無い限りは基本的にCDNを利用できるものは利用しておいた方が良いでしょう。

調子に乗って色んなCDNを読み込みまくるのは自分のサイト表示速度をさげるだけなのでやめましょう。

それではBootStrap公式のテンプレートを使用してみます。

Bootstrap公式テンプレート

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <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">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
  </body>
</html>

とりあえず前のHTMLは残しておいて、別のHTMLファイルを作って上記をコピペしてみてください。

保存し終わったらブラウザで読み込んでみましょう。

はい、ただ「Hello, World！」と書かれているだけですね。

まだBootStrapの機能は使ってませんが、読み込めて入るはずです。

今までのCSSは使わずBootStrapを体験してみよう

同じように今度は作ってきたCSSは使わずにHTMLにクラスを指定していきます。

まずはこのHelloWorldを中央に寄せてみましょう。

    <h1 class="text-center">Hello, world!</h1>

これで中央に寄りました。

しかしこれならcssの「text-align:center;」と大して変わりませんね。

それでは続けてBootStrapが用意してくれているCSSを使ってみましょう。

h1に以下のHTMLを埋め込んでみましょう。

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">カードタイトル</h5>
    <p class="card-text">ココに本文が入ります。ここにサンプル本文が入ります。</p>
    <a href="#" class="btn btn-primary">続きを読む</a>
  </div>
</div>

なんとHTMLを書くだけでカードデザインが出来上がりました！

このCSSを作るにはボーダーとボーダーの角を丸くすることと、空白とlineheightと……とにかくCSSをいっぱい盛り込まないと表現できません。

これらはすでにBootStrapが定義してくれているので、クラスさえ当てはめてしまえば、まるでプロが作ったかのようにスタイリングしてくれます。

BootStrapだけでレイアウトしてみよう

殆どのCSSフレームワークにはグリッドという仕組みを用意してくれています。

主にFlexboxを利用したものが多いですね。

中にはCSSのgridを使ったものもあるみたいですが、まだまだFlexBoxが主流です。

それではBootStrapのグリッドレイアウトを試してみましょう。

先ほど作ったカードを横並びにしてみます。

<div class="container">
  <div class="row">
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">カードタイトル</h5>
          <p class="card-text">ココに本文が入ります。ここにサンプル本文が入ります。</p>
          <a href="#" class="btn btn-primary">続きを読む</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">カードタイトル</h5>
          <p class="card-text">ココに本文が入ります。ここにサンプル本文が入ります。</p>
          <a href="#" class="btn btn-primary">続きを読む</a>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">カードタイトル</h5>
          <p class="card-text">ココに本文が入ります。ここにサンプル本文が入ります。</p>
          <a href="#" class="btn btn-primary">続きを読む</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">カードタイトル</h5>
          <p class="card-text">ココに本文が入ります。ここにサンプル本文が入ります。</p>
          <a href="#" class="btn btn-primary">続きを読む</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">カードタイトル</h5>
          <p class="card-text">ココに本文が入ります。ここにサンプル本文が入ります。</p>
          <a href="#" class="btn btn-primary">続きを読む</a>
        </div>
      </div>
    </div>
  </div>
</div>

ちょっと不格好ですが、ちゃんと横並びにしてくれています。

Wordpress自作テーマ講座第20回まとめ

思いのほかCSSフレームワークを使うのが面倒くさいことがわかりました(笑)

私はHTMLとCSSをガリガリと書きまくっていた人種なので、今更これを覚えるのなら自分で組んで永久にそれをメンテナンスしていた方が効率がいいなと感じます。

今回はBootStrapを紹介しましたが、次回から私が作ったCSSに戻しましょう。

ぶっちゃけてしまうと私自身がBootStrapを理解しないと説明し辛いという理由です。

更にぶっちゃけてしまうとBootstrapは有名すぎてどこでも解説してるところがあるので今更取り立てて解説することもないかなと思いました。

解説するなら微妙にマイナーなCSSフレームワークをやりたいですね。

ですが、デザイナーじゃなければBootStrapを覚えておくと色々便利です。

私はどっちかというとMaterial-UIの方が好きです。

気になる方はググってみてください。

それでは。