Bootstrapでサイト構築の高速化

Bootstrap v4.0 を使ってホームページを作り直しました.コンテンツが大したことないためにメリットを最大限に活かしきれてないのが悲しいですが,これはめちゃいいです.

Bootstrap とは

(私にとって) ウェブサイトを作るときに一番めんどくさいのは CSS を書くことです.

ウェブデザイナーではないのでスタイリッシュなサイトが作れるわけではない.しかし,酷い見た目になるのも困る....

そうして細かい修正に修正を重ねて多少マシになったサイトを公開するわけです.毎回そこに時間を費やすのがもったいないし,もっと機能を増やすとかそういう方向に注力したい!

そこで Bootstrap の出番です.

私の印象を一言で表すと,HTML を書くだけでいいフレームワークって感じです.要素に対してクラスを指定することで,CSS を書かなくても見た目を整えてくれます.

レスポンシブデザイン

なんといっても楽なのは,スマホ・パソコン両方に対応するレスポンシブデザインを導入することです.

以前は全体を中央寄せして,メディアクエリでこの画面サイズの時は余白をこのくらいとって,幅が狭くなったら float をオフにしてサイドバーを下に移動して...なんて気の遠くなるような作業をしていました.

それが,なんの設定をしなくても簡単に実装できるわけです.

各コンテンツの配置

コンテンツを中央寄せしたり,サイドバーを作ったりするのもお手の物です.

まだ HTML も CSS も全然わからないときは,中央寄せは全部 text-align: center; で文字しか寄ってないやんみたいな感じでしたし,サイドバーは <aside> でくくってメインカラムを float: left; でいいのかと思えば後ろのコンテンツもずれて clear: both; すればいいことに気付いたら margin-top が利かず,ん?みたいな.

私だけかもしれませんが,そんなことに悩む必要もありません.

Bootstrap の使い方

導入

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
  integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
  crossorigin="anonymous"
/>
<script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
  crossorigin="anonymous"
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
  integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
  crossorigin="anonymous"
></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"
  integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"
  crossorigin="anonymous"
></script>

超楽です.CSS と JavaScript を読み込むだけで OK

Grid system を利用したレイアウト

幅を等分するようにしてデザインしていきます.最大 12 等分でそれ以上も指定は可能です,改行しますが.

最低限,次の三つを理解すればもう使えます.

container or container-fluid

前者は親要素に,後者は画面の幅にフィットします.

row and col

class="row" を指定した要素内の要素に class="col" を指定すると列が作れます.

<div class="row">
  <div class="col">first</div>
  <div class="col">second</div>
</div>

sm, md, lg, xl

画面の幅に合わせてどのような配置にするかを class="col-sm" みたいな形で指定することができます.

マルチクラスにすれば幅によって自由に配置を変えることができます.

クラス指定でデザイン

いくつか例を挙げます.

  • class="text-center": style="text-align: center;"と同じ
  • class="table table-dark": 黒色を基調とした表が作れる
  • class="img-thumbnail": サムネイル画像になる

など.

コンポーネント

パンくずリスト,カルーセル,ボタン,モーダル,ページネーションなど,様々な機能が盛り込まれています.

Bootstrap を使う上での注意

もちろんデザインは Bootstrap っぽくなるので,自分のこだわりを貫く場合は割と CSS をがっちり書く必要があります.うまく書かないと衝突して逆にめんどくさくなることもあるかもしれません.

また,クラスを指定することで CSS が適用されていくので,デザインを変更する場合は CSS だけでなく HTML も変更することになるでしょう.やり方次第ですが.

最後に

記事を読んで魅力が伝わったかどうかは怪しいですが,ともかく使いやすそうです.初心者なので,もっといいものがあるのかわかりませんが.最近は React とか Vue.js みたいな JavaScript フレームワーク流行ってますしね.

Bootstrap の詳しい使い方については公式ドキュメントがわかりやすいので,そちらを読んでください.