WebページはHTMLで文書構造、CSSでデザインを指定するため、Webページをデザインする場合、HTMLと併せてCSSの知識が求められます。しかし、CSSを自分で用意することが面倒と感じる方もいるのではないでしょうか。

そのような方にはCSSフレームワークの活用をおすすめします。Twitter社が開発したBootstrap を活用すれば、CSSのレイアウトに迷う心配もありません。今回は、初心者でも簡単にWebデザインができるBootstrapとその使い方をご紹介しましょう。

Bootstrapとは

BootstrapはCSSフレームワークの1つであり、Webデザインの際によく利用されるスタイルがあらかじめ定義されています。初心者の方であっても、Bootstrapに沿ってデザインするだけで、見栄えの良いWebページを作成することが可能です。

HTMLファイルに対象のCSSフレームワークを読み込むと、Webページにスタイルが適用されます。Bootstrapは単一のHTMLでPCやモバイルなどの各端末に合わせて表示を調整する「レスポンシブWebデザイン」にも対応している点も魅力です。

Bootstrapを利用するには

Bootstrapは無償で配布されており、誰でも気軽に利用できます。「http://getbootstrap.com/」にアクセスして[Download Bootstrap]ボタンをクリックし、さらに表示されたページの左にある[Download Bootstrap]をクリックしてください。ダウンロードされたzipファイルを解凍すれば、Bootstrapを利用する準備が整います。

Bootstrapの便利な機能

ここではBootstrapが備えている便利な機能を6つご紹介します。

テーマカラーの変更

Bootstrapにはさまざまなテーマカラーが用意されています。気に入ったテーマカラーのCSSをダウンロードして現状のCSSと差し替えるだけという簡単な操作で、ページの印象を大きく変えることができます。

入力フォームの追加

名前や住所などの入力フォームの追加も簡単です。入力フォームを縦に並べたり横に並べたりする設定も可能です。

ボタンサイズや色の変更

プロパティを変更すれば、簡単にボタンのサイズを変更できます。指でタッチして操作するスマホに対しては、特に見やすく押しやすいデザインとなるような工夫が求められるため、重宝する機能です。また、ボタンの文字色なども変更可能です。

Webページの表示・非表示の設定

画面サイズに合わせてWebページを表示させたり、非表示にしたりすることができます。例えば、PCからのアクセスのときには表示される部分の一部を、モバイルからのアクセスのときには表示させないなどの設定が可能です。

表（テーブル）の背景色や枠線、レスポンシブ化

表に関して1行間隔で背景色を変えたり、枠線を付けたりできる他、表をレスポンシブ対応させることもできます。

グリッドシステム

グリッドシステムとは、画面の幅が異なるデバイスで表示したときに、レイアウトを自動調節する機能です。Bootstrapではモバイルの表示をデフォルトとしているため、PCなどのモバイルよりも大きな画面で表示したときにどのようなスタイルに変更するかを指定します。

まとめ

Webデザインをする際に専門的なCSSの知識をすべて覚えることは大変です。Bootstrapを利用すれば、今回紹介した設定をWebページに手軽に反映させられます。BootstrapをベースにしてWebデザインを行い、必要に応じてカスタマイズしても良いでしょう。

Tweet