Bootstrapでサイト構築の高速化

Web Development # Bootstrap # CSS # HTML

2018-01-04

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": サムネイル画像になる

など．

mktia's note