Webページをデザインする場合、HTMLで文書構造、CSSでデザインを指定するため、HTMLと併せてCSSの知識が求められます。
記述方法はシンプルなため、覚えて使うことは難しくありませんが、記述の自由度の高さから、コードの統一性や他の制作への再利用といった内容において問題につながるケースもあります。
今回はこのような場面で効果を発揮する、Bootstrapと呼ばれるCSSフレームワークの機能と使い方についてご紹介します。もくじ
◆CSSフレームワークについて
CSSでは3つの基本要素、「セレクタ」「プロパティ名」「プロパティ値」を組み合わせてスタイルを設定します。
構造が単純で理解しやすい一方、厳密なコーディングルールが存在しないため、チームで制作する場合は混乱が生じる場合もあります。
個人でWebサイトの制作をする場合と異なり、チームで制作する場合は一定のコーディングルールに従い、CSSの記述に統一性を持たせることが必要です。
CSSフレームワークには、よく利用される「Webパーツ」や「機能」などがまとめられているため、制作時の手間を省くことができます。
Web制作時は決められたコーディングルールに従うことで、手軽で統一性のあるコーディングが可能になります。
◆Bootstrapとは
BootstrapはCSSフレームワークの1つです。
Webデザインの際によく利用されるスタイルがあらかじめ定義され、Web初心者の方でも、Bootstrapに沿ってデザインすることで、見栄えの良いWebページを作成することができます。
HTMLファイルに対象のCSSフレームワークを読み込むことで、Webページにスタイルが適用されます。
Bootstrapは単一のHTMLでPCやモバイルなどの各端末に合わせて表示を調整する「レスポンシブWebデザイン」にも対応しています。
Webサイトのトレンドを取り入れた機能が豊富なため、動的要素を追加する際のJavaScript・jQueryの扱いが容易なこともBootstrapの魅力になります。
BootstrapはあくまでもCSSを使いやすくしたツールになります。
CSSフレームワークであるBootstrapを使いこなすには、CSSの基礎が身に付いていることが求められます。
◆Bootstrapの便利な機能
Bootstrapが備えている6つの便利な機能をご紹介します。
・テーマカラーの変更
Bootstrapにはさまざまなテーマカラーが用意されています。
Webページに応じたテーマカラーのCSSをダウンロードして現状のCSSと差し替えるという簡単な操作で、ページの印象を大きく変えることができます。
・入力フォームの追加
名前や住所、メールアドレスなどの入力フォームの追加も簡単にできます。
入力フォームを縦に並べたり横に並べたりするといったレイアウト設定も可能です。
・ボタンサイズや色の変更
プロパティを変更すれば、簡単にボタンのサイズ、文字色などを変更できます。
タッチ操作におけるスマホに対しては、見やすく押しやすいデザインとなるような扱いに工夫が求められるため、重宝する機能といえます。
・Webページの表示・非表示の設定
画面サイズに合わせてWebページを表示させたり、非表示にしたりすることができます。
PCからのアクセス時には表示される部分の一部を、モバイルからのアクセスのときには非表示にするなどの設定が可能です。
・表（テーブル）の背景色や枠線、レスポンシブ化
表に関して1行間隔で背景色を変えたり、枠線を付けることができます。また、表をレスポンシブ対応にすることもできます。
・グリッドシステム
グリッドシステムとは、画面の幅が異なるデバイスで表示したときに、レイアウトを自動調節する機能のことです。
Bootstrapではスマホ、タブレットなどのモバイルの表示をデフォルトとしているため、PCなどのモバイルよりも大きな画面で表示したときにどのようなスタイルに変更するかを指定します。
◆まとめ
CSSの記述方法では、コードの統一性や一貫性が失われてしまうことがありますが、CSSフレームワークであるBootstrapを利用することで、効率よくメンテナンス性の高いWebサイトを制作することができます。
定められたルールに従ってコーディングすることで、動作不良によるチェック作業の手間を省くことも可能なので、制作現場のデザイナーの負担軽減や生産性向上につながるでしょう。