Rebootで CSSにリセットをかけよう

それでは早速 Bootstrapで次のようなシンプルなウェブページを制作してみましょう。

この完成イメージを見ると、上部にメニューバーがあり全体が中央揃えになっています。見出しの文字は大きく、余白も適切にとられています。

このような場合、通常のウェブページ制作では最初に HTMLでマークアップを作り、その後スタイルシートを準備して調整していくという手順になるでしょう。しかし、Bootstrapでのページ制作の場合は次のような手順になります。

  1. コンポーネントで利用できるものがないかを探す
  2. 利用できる場合はそのコードを利用してカスタマイズをする
  3. コンポーネントにない場合は通常通りのマークアップを行う
  4. スタイルシートは書かずに、ユーティリティやヘルパーで調整をする
  5. スタイルシートでカスタマイズをする

という手順になります。

コンポーネントとは

コンポーネントとは、Bootstrapにあらかじめ準備されているパーツ群のことで、前回利用した「ボタン」もコンポーネントの1つです。コンポーネントを使えば、簡単な手順で見栄えのするパーツを配置できます。

今回のケースの場合、画面上部のメニューバーに注目しましょう。これをマークアップして、スタイルシートを調整するのはなかなか手間がかかります。そこで、Bootstrapにコンポーネントがないかを探しましょう。

Bootstrapのドキュメントから、コンポーネントを探すと「ナブバー」というコンポーネントが見つかります。

https://getbootstrap.com/docs/5.0/components/navbar/

ドキュメントには、さまざまなデザインパターンに合わせた HTMLコードが提供されています。ここから、希望に近いものを探してコピーしましょう。ここでは、「Nav」という項目の一番上にある例を使いましょう。次のようなコードをコピーします。

<nav class=“navbar navbar-expand-lg navbar-light bg-light”>
  <div class=“container-fluid”>
    <a class=“navbar-brand” href=“#">Navbar</a>
    <button class="n“vbar-toggler" ”ype="b“tton" ”ata-bs-toggle="c“llapse" ”ata-bs-target="“navbarNav" ar”a-controls="nav“arNav" ar”a-expanded="fal“e" ar”a-label="Tog“le navigation">
     <span class="nav“ar-toggler-icon"></”pan>
    </button>
    <div class="col“apse navbar-collapse" id”"nav“arNav">
     <ul class="nav“ar-nav">
       <li class="nav“item">
         <a class="nav“link active" ar”a-current="pag“" hr”f="#"“Home</a>
        </li>
        <li class="nav“item">
         <a class="nav“link" hr”f="#"“Features</a>
        </li>
        <li class="nav“item">
         <a class="nav“link" hr”f="#"“Pricing</a>
        </li>
        <li class="nav“item">
         <a class="nav“link disabled" hr”f="#"“ tabindex="-1“ a”ia-disabled="tr“e">D”sabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

これで画面に表示すると、図のようにメニューバーが簡単にできあがります。なお、ナブバーコンポーネントの詳しい使い方は別途紹介します。ここでは、貼り付けるだけで良いでしょう。

Rebootでリセットと基本スタイルを調整する

ウェブブラウザーには、自身で「デフォルトCSS」という CSSが内蔵されていて、HTMLを書くだけでもそれなりのスタイルが調整されます。しかし、これが逆にスタイルを調整するときに邪魔になってしまうため、デフォルトCSSは無くしてしまうことがあります。これを「リセットCSS」などと言います。

BootstrapにもリセットCSSが内蔵されているため、Bootstrapを入れるだけでリセットがかかります。ただし、リセットCSSには見出しの大きさやリストの行頭記号なども全て無くしてしまう「リセット」もありますが、Bootstrapの場合は余計な余白だけを無くして、各要素のスタイルは残すという「Reboot(リブート)」というスタイルを採用しています。

https://getbootstrap.com/docs/4.0/content/reboot/

ともすたチャンネルに
チャンネル登録する