背景
bootstrapを実務で使うことになったので勉強しようと思い、よく利用しているサービス内で検索したのですが、Bootstrapの講座はハンズオン形式だったため、
- なぜこのタグを使うんだろう？
- どういう仕組みなんだろう？
と思うことが多かったです。なので、一度しっかり基礎に立ち帰り、一つずつ基礎から着実に力を入れようと思い、勉強を始めました。
Bootstrapの特徴
レスポンシブデザインに対応
フルードグリッド、フルードイメージ、メディアクエリなどの技術で構成されている。
フルードグリッド（可変グリッド）とは？
グリッドシステムとリキッドデザインを組み合わせた手法。
◽️グリッドシステムとは？
グリッドシステムとは、ページのレイアウトを均等な列（カラム）や行（ロー）に分割し、要素を配置する方法。
出典: ChatGPT（2025年2月11日）
Bootstrapでは、レイアウトを1行あたり12列まで分割することができる。
◽️リキッドシステムとは？
リキッドシステムとは、コンテンツが画面サイズに応じて流動的（リキッド）に伸縮するレイアウト のこと。
固定幅ではなく、比率（％）で指定する ことで、どの画面サイズでもコンテンツが自動的に調整される。
出典: ChatGPT（2025年2月11日）
つまり、フルードグリッドはページのレイアウトを行や列でデザインし、画面サイズに合わせてレイアウトを自在に伸縮することができるレイアウトのこと。
フルードイメージとは？
画面サイズに応じて画像を拡大縮小すること。
フルードグリッドと組み合わせてグリッドのサイズに応じて画像サイズを変更する。
メディアクエリとは？
デバイスの種類や解像度やデバイスの向きなどの条件をあらかじめ指定しておくことでデザインを切り替える。
上記のフルードグリッドを組み合わせるとPCで見た時は4列で構成されているが、スマホだと8列で構成されるというような使い方が可能。
デザインされたコンポーネント
入力フォームやボタンのデザインを予めBootstrapで用意されているため、対応したクラスをHTMLに追加するだけで簡単にデザイン性のあるWebサイトやWebアプリを作ることができる。カタログで使いたいボタンデザインを探し、そのボタンを作るために使用するクラス名を要素に追加するイメージ。
Bootstrapの公式サイトにはさまざまなコンポーネントの使い方が記載されているので、困った時は公式ドキュメントを確認する。今回はボタンを例に出したので、ボタンのリンクを貼っておきます。
Bootstrap Iconsというアイコン集がある
Webアプリ開発をしていると検索ボタンに虫眼鏡マークをつけたりとアイコンを使いたいと感じる場面は多い。
Bootstrapを使えばそのようなアイコンをサイト内で検索するだけで簡単に実装することができる。
今日はここまで
今日学んだことは以上です。
あまりイメージがついていないところもありますが、なんとなく概要が掴めた気がします。
今までグリッドデザインというキモのところをあまり理解せずに使っていたのが混乱の原因だったんだというのがわかってきました。
次は実際に導入してみる方法と簡単にデザインを作ってみようと思います。
参考書籍
本記事の内容は以下の書籍を参考にして学習したものをまとめたものです。
説明がわかりやすく、図解もしているのでかなりわかりやすいのでおすすめです。