Bootstrap
2021年9月5日
みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回は「Bootstrap」について書きます。
Bootstrapとはなんぞや
Bootstrap（ブートストラップ）とは、Twitter社が開発したフレームワーク（枠組み）です。
当サイトで使用しているBootstrapのバージョンは「4.1.3」でした。
2021年6月22日に現行の最新バージョン「5.0.2」がリリースされました。
使い方（バージョン4）
① 公式サイトからダウンロード
② bootstrap.cssを読み込む
<link rel="stylesheet" href="css/bootstrap.css">③ jQueryを読み込む
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>④ bootstrap.jsを読み込む
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>Bootstrapにはいろいろなパーツが用意されています。
カラフルな「ボタン」や、
ケミスト｜福岡の薬局コンサルティング
ケミストは「人と人の、つながりを大切に。」をモットーに、保険薬局コンサルティングを行っています。
私たちはコンサルティング事業、編集・出版事業、ウェブサイト制作事業などを行っています。
ケミストオンラインコミュニティ始動！
このような「カード」というパーツを作ることができます。
メリット
・無料
・クラスがあらかじめ用意されている
・スッキリして見やすいデザイン
・グリッドシステムを用いたレスポンシブデザイン
※グリッドシステムとは画面の横幅を12等分して、そのうちの何個を使うのかによってレイアウトを決定するしくみです。
※レスポンシブデザインとは、画面幅（PC、スマホ、タブレット）によってレイアウトが変わるデザインのことです。
グリッドシステム、レスポンシブデザインについてはまた別記事で詳しく書きます。
デメリット
・そのまま使っただけでは「ありがち」なデザインになってしまう
・英語向けに作られているので、日本語のサイトを作るためには工夫が必要
・バージョンアップのペースが速い（そして以前のバージョンと互換性がない部分が結構ある）
まとめ
・Bootstrapは便利な
・カスタマイズしてオリジナリティを出していこう
バージョン5では「脱jQuery」つまり表示速度が速くなるようです。また「Bootstrap Icons」という絵文字が使えるようになるみたいです。
そのうちバージョンアップしたいなぁ
