Basics/Keyword:BootstrapBootstrapは、見栄えがよく、レスポンシブで、モバイルファーストなWebコンテンツを作成するためのフレームワークだ。});連載目次Bootstrapは、レスポンシブでモバイルファーストなWebコンテンツを作成するためのフレームワークだ。見栄えのよいレスポンシブなWebコンテンツの作成を容易にするために、数多くのスタイル/コンポーネント/JavaScriptプラグインが用意されているが、最も特徴的なものはそのグリッドシステムだ。4の開発も進められている。Bootstrapの特徴Bootstrapの特徴としては次のようなことが挙げられる。異なる画面特性を持つデバイスで最適な表示を簡単に実現できる「モバイルファースト」なグリッドシステム多くのプラットフォーム/Webブラウザをサポート例えば、Bootstrapを利用すると、各種の要素に対してクラスを指定することで、Bootstrapによって事前に定義されているスタイルを適用し、見栄えのよいUI要素を簡単に作成できる。Bootstrapが提供するコンポーネント(ほんの一部)例えば、上のボタンを表示するには、次のようなHTMLコードを記述するだけでよい。基本的にはclass属性にどんなボタンかを指定するだけだ。最後のボタンではBootstrapで使用可能なグリフ(絵文字)を使用している。aria-hidden="true"></span></button>class属性を指定するだけでモダンなボタンを表示可能また、Bootstrapは「モバイルファースト」であることを念頭に設計が行われている。ビューポートやCSSのメディアクエリなどを活用して、さまざまなデバイスのさまざまな画面特性に応じて、Webコンテンツを適切な形でレイアウト/表示できるようになっている。グリッドシステムBootstrapのグリッドシステムもそうした「モバイルファースト」な機構の1つだ。簡単にいってしまえば、このシステムでは画面の1行が12分割される。個々のカラムが、12分割された領域を何個使って、Webコンテンツを表示するかを指定するようになっている。1行に含まれるカラムの数は自由だが(最大で12)、それが占有するカラム幅の合計が最大で12単位となるように調整する必要がある(はみ出した場合は、別の行の構成要素とされる)。簡単な例を以下に示す。上は1行が12個のカラムに等分され、その次は8個分と4個分に分けて使用されている。最後の行はそれぞれのカラムが全体の6個分、2個分、2個分、2個分のような分け方をしている。これを行うコードを以下に示す(実際には枠線を表示するようにスタイルファイルを記述しているが、これについては省略する)。startedページで示されているテンプレートコードに手を加えたものだ。<head>要素でビューポート設定などを行っている行はコメントを見ると分かるように、<head>要素内で他の要素よりも先に記述しなければならない。HTMLの末尾ではJavaScriptファイルを読み込んでいるが、これもテンプレートコードのままである(以下のコードサンプルではこれらは省略する)。src="js/bootstrap.min.js"></script></script></body></html>上の画面を表示するHTMLBootstrapではそのコンテンツはコンテナ(class属性が「container」または「container-fluid」の要素)に含める必要がある(上のリストの(1))。グリッドの行(class属性が「row」の要素)ももちろんコンテナの内部に記述する必要がある((2))。行の直接の子要素としてカラム(class属性が「col〜」の要素)を記述していく((3))。ここではclass属性に「col-md-〜」を指定しているが、これは「表示デバイスの画面がミディアムサイズの場合のカラムのサイズ」を表している(最後の数字が12分割された領域の何個分を使用するかを表す)。実際、BootstrapではWebブラウザ/デバイスのビューポートの横幅を基に画面サイズを以下の4種類に分けている。画面サイズごとに個々のカラムのサイズを指定できるようになっている(表中のプレフィクスを使用)。よって、カラムのclass属性は「<画面サイズに応じたプレフィクス>-<カラムサイズ>」のようになる(例:col-md-6、col-xs-12など)。画面サイズclass属性に指定するプレフィクス横幅が767px以下(エクストラスモールサイズ)col-xs-横幅が768〜991px(スモールサイズ)col-sm-横幅が992〜1199px(ミディアムサイズ)col-md-横幅が1200px以上(ラージサイズ)col-lg-Bootstrapではビューポートのサイズごとに画面表示を切り替えられるBootstrapでは、これらのカラム指定を利用して、大画面のディスプレイでは大量のコンテンツを横方向に並べて表示するが、小画面のデバイスではそれらを縦に並べて表示するといった切り替えを実現している。カラム指定は画面サイズに応じて複数指定可能だ。上のHTMLコードをWebブラウザに表示して、その幅を小さくしてみると以下のようになる。画面の横幅が991px以下になると、全てのカラムが縦に並んでしまうこれはビューポートがスモールサイズ/エクストラスモールサイズの場合に、個々のカラムが何個分の領域を使用するかを指定していないためだ。上のコードをもっとシンプルなものに変更して、3つのカラムで構成される行を1つだけにし、カラム指定を複数記述したものを以下に示す。red">#3</div></div></div>ミディアムサイズ/スモールサイズ/エクストラスモールサイズでのカラム指定を追加これをChromeで表示したものを以下に示す。デベロッパーツールも表示しているが、ここで見てほしいのは上部にある画面サイズと右下にある[Styles]タブだ。ここには背景色が白のカラムのスタイル情報が表示されている。上と同様にミディアムサイズから見ていこう。画面サイズは1020pxとなっていて、右下の[Style]タブを見るとメディアクエリにより、これはcol-md-4なカラムであり、そのサイズが「33.33333333%」(4/12)になっているのが分かる。次はスモールサイズ(768〜991px)の場合だ。スモールサイズの場合ここでは画面サイズは836pxとなっていて、上と同様に[Style]タブを見ると、これがcol-sm-6なカラムであり、そのサイズが「50%」(6/12)となっていることが分かる。最後にエクストラスモールサイズの場合を見てみよう。エクストラスモールサイズの場合これまでと同様に、これはcol-xs-12なカラムであり、そのサイズが今度は「100%」になっていることが分かる(メディアクエリでのスタイル指定のように見えないが、上の2つの画像と同じファイル「grid-framework.less」の同じ行でスタイル指定が行われている)。文字だけのカラムではつまらないので、最後に上で見たBootstrapが提供するコンポーネントの使用例をカラムに埋め込んだ例を示す(画像のみ)。Bootstrapのコンポーネントの使用例をカラム表示したものこのように、BootstrapのグリッドシステムはレスポンシブなWebコンテンツを作成する上で非常に強力なツールだ。Bootstrapは見栄えのよいレスポンシブなWebコンテンツの作成を容易にするために、さまざまなコンポーネントや強力なグリッドシステムを提供している。レスポンシブなWebコンテンツを一から作成するのは労力のいる作業となるが、Bootstrapをはじめとする各種のCSSフレームワークはこれを強力に支援してくれるはずだ。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。