BootstrapでレスポンシブなWebサイト制作

第3回 Bootstrapの基本スタイルを覚えよう

この記事を読むのに必要な時間:およそ 10.5 分

Bootstrapには基本のスタイルやボタン・フォームなどの基本的なスタイルが用意されています。今回は,これらの中からよく使うものや便利なものを紹介します。

ヘディング要素

違うレベルの見出しのデザインを適用する

Bootstrapでは,h1~h6要素(以下,ヘディング要素と呼ぶ)へのスタイル付けがされています。

特筆すべき点としては,h1~h6要素それぞれのデザイン用にh1,h2,…,h6のclassが生成されることです。これにより,例えば,文章構造的にh3要素を使用することろで,デザイン的にh5要素と同じにしたいという場合,h3要素のclassにh5を指定することで見た目の表示を変えることができます。

<h3 class="h5">h3  Bootstrap heading.</h3>

ヘディング要素にサブタイトル等をつける

ヘディング要素内にsmall要素,またはsmallというclassを指定した要素を入れることで,この要素は色が薄く一回り小さいサイズになります。サブタイトルのデザインとして重宝します。

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

画像

テキスト

abbr要素のスタイル

略語を説明するためのabbr要素は,下線の点線がつき,この要素上でカーソルが変化します。initialismというclassをつけることで一回り小さくしスマートに表示することも可能です。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

ボックスレベル要素

ボックス内のテキストの左右寄せ等を行う

display:blockとなっている特定の要素内でテキストを左右寄せ・中央揃え・両端揃えする際に用いるclassがあります(両端揃えについては日本語で正しく動作するブラウザは限られてます)⁠

class 意味
text-left 左寄せ
text-center 中央揃え
text-right 右寄せ
text-justify 両端揃え

引用

引用のスタイル

一般的な引用blockquote要素には次のスタイルが適用されます。引用元の情報はfooter要素でラップするようにします。

<blockquote>
  <ul>
     <li>第一条 ロボットは人間に危害を加え…</li>
     <li>第二条 ロボットは人間にあたえられ…</li>
     <li>第三条 ロボットは,前掲第一条および…</li>
  </ul>
  <footer>アイザック・アシモフ著 <cite title="「ロボット工学ハンドブック」第56版 『われはロボット』">2058年の「ロボット工学ハンドブック」第56版 『われはロボット』</cite>より</footer>
</blockquote>

画像

さらに,blockquote要素にblockquote-reverseというclassをつけることにより,引用を右寄せにできます。

<blockquote class="blockquote-reverse">
  <p>なるべく動かすな,止まっている絵を動いているように見せろ。手を抜け,ミスを修正するな。<br>
  同じ絵を何百回も使え。手抜きがバレそうになったらタマには凝れ。</p>
  <footer> 出典<cite title="手塚治虫の名言2">手塚治虫の名言2</cite>より</footer>
</blockquote>

画像

リスト

リストを横並びにする

通常リスト要素を横並びにするにはfloat: leftやdisplay: inline-blockを利用しますが,Bootstrapには便利なlist-inlineという便利なclassがあります。このclassをul要素に指定することでリスト要素が横に並びます。

<ul class="list-inline"></ul>

テーブル

テーブルの使い方

table要素には,特別なスタイルの指定はかかりません(注1)。Bootstrapデザインのテーブルを使うためにはtable要素にtableというclassを指定します。

<table class="table"></table>

画像

注1
すべてのtable要素に自動的にスタイルがつかないのは,カレンダーやピッカーなど他のプラグイン・デザイン要素などを使用時に重複したスタイルを打ち消す必要があるのはスマートでは無いという理由からです。ただし,LESSカスタマイズや公式サイトのカスタマイズダウンロードを適用したテーブルのデザインは,背景が指定されている場合があります。

行をストライプにする

行数が多いテーブルは見づらい時があります。その場合には,table要素にtable-stripedというclassを追加することで見やすくできます。ただし,このスタイルはCSS3の「:nth-child」を使用しているのでIE8では正常に機能しません。

<table class="table table-striped"></table>

画像

枠線を表示する

Bootstrapのテーブルのデザインは基本的に横線のみがデザインされますが,枠線を表示したいこともあるでしょう。その場合にはtable要素にtable-borderedというclassを追加することで,枠線のあるテーブルを作ることができます。

<table class="table table-bordered"></table>

画像

特定の行にカーソルがある時の背景色を変更する

table要素にtable-hoverclassというclassを追加することで,tbody要素の特定の行にマウスカーソルがある時にその行の背景色を変えることができます。インターフェース作成時に役立つでしょう。

<table class="table table-hover"></table>

画像

著者プロフィール

齋藤みつる(さいとうみつる)

高校時代には漫研とロボ研に没頭しつつ,ポートフォリオ・履歴書を様々なデザイン・SI会社に送り,採用されてから高校を中退してデザイナー・SE活動をはじめる。2011年からフリーランスとして活動を始め,2年前にナビスインタナショナル株式会社と専属フリーランス契約を結び,Web事業部の責任者となっている。

URL:http://www.navice.co.jp/

コメント

コメントの記入