BootstrapのベースのCSSを使ってさまざまな要素を実装してみよう！基本要素とナビゲーションのスタイル

先日の記事「Bootstrapのグリッドシステムの基本な使い方（翻訳版）」で、Bootstrapのファイルのダウンロードからファイルのセットアップ、グリッドシステムの基本的な使い方まで紹介しました。
次のステップとして、ベースのCSSを使ってさまざまな要素を実装してみましょう。

Base CSS and Navigation Systems in Bootstrap

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

• BootstrapのベースのCSS
• 見出し（hx）を実装する
• 「small」を使って実装
• 引用（blockquote）を実装する
• 連絡先情報（address）を実装する
• コード（code）を実装する
• 整列のclassを実装する
• 強調のclassを実装する
• フォーム（form）を実装する
• テーブル（table）を実装する
• 画像（img）を実装する
• ナビゲーションバーを実装する

BootstrapのベースのCSS

ここで使用するのはBootstrapのベースのCSSで、見出し、パラグラフ、フォーム、テーブルなど、Webページでよく使用するエレメントの実装方法を紹介します。

Bootstrapのファイル構成

使用するファイルは「bootstrap.css」または、そのファイルをミニファイした「bootstrap.min.css」です。

Bootstrapで見出し（hx）を実装する

標準的なHTMLと同様に、Bootstrapでも見出しの各レベルに応じて異なるサイズのものが用意されています。サイズは、下記の通りです。

• 見出し レベル1 <h1>

  38px (デフォルトのフォントサイズ: 14px*2.70)

• 見出し レベル2 <h2>

  32px (デフォルトのフォントサイズ: 14px*2.25)

• 見出し レベル3 <h3>

  24px (デフォルトのフォントサイズ: 14px*1.70)

• 見出し レベル4 <h4>

  18px (デフォルトのフォントサイズ: 14px*1.25)

• 見出し レベル5 <h5>

  14px (デフォルトのフォントサイズ: 14pxと同じ)

• 見出し レベル6 <h6>

  12px (デフォルトのフォントサイズ: 14px*0.85)

HTML

<h1>This is H1</h1>
<h2>This is H2</h2>
<h3>This is H3</h3>
<h4>This is H4</h4>
<h5>This is H5</h5>
<h6>This is H6</h6>

下記のように表示されます。

Bootstrapで「small」を使って実装

small要素は「small print」と呼ばれ、主に法的な但し書きなどのために使用されます。

HTML

<div class="row">
  <div class="col-lg-4 callout">
    <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
    <h2>Mobile First</h2>
    <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim. </small> </p>
  </div><!-- col-lg-4 -->
  <div class="col-lg-4 callout">
    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
    <h2>Pixel Perfect</h2>
    <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim. </small></p>
  </div><!-- col-lg-4 -->   
  <div class="col-lg-4 callout">
    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
    <h2>Editable</h2>
    <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim. </small> </p>
  </div><!-- col-lg-4 -->   
</div><!-- row -->

上記のコードはp要素にsmall要素を使ったコードで、デフォルトで12pxのサイズを継承します。

small要素は見出しに使用することもできます。

• 見出し レベル1 <h1>の中にsmall

  38pxだったフォントサイズが、24pxに

• 見出し レベル2 <h2>の中にsmall

  32pxだったフォントサイズが、18pxに

• 見出し レベル3 <h3>の中にsmall

  24pxだったフォントサイズが、14pxに

• 見出し レベル4 <h4>の中にsmall

  18pxだったフォントサイズが、デフォルトのフォントサイズ: 14pxに

Bootstrapで引用（blockquote）を実装する

引用は通常、外部の情報提供者から引用したテキストを強調して表示します。Bootstrapのデフォルトではテキストの左側に5pxのボーダーが表示されます。

HTML

<blockquote>
<p>
Great minds discuss ideas; average minds discuss events; small minds discuss people.
</p>
<small>Eleanor Roosevelt <cite title="Source
Title">Ideas, Minds and Average</cite></small>
</blockquote>

下記のように表示されます。

Bootstrapで連絡先情報（address）を実装する

連絡先情報はHTMLのaddress要素で実装します。Bootstrapではシンプルなデザインで表示されます。

HTML

<address id="contact">
    <h3>Reach to Us</h3>
    <p><span class="glyphicon glyphicon-home"></span> #123 St. Kansas City, MO<br/>
    <span class="glyphicon glyphicon-phone"></span> +34 1234 5678 <br/>
    <span class="glyphicon glyphicon-folder-open"></span>  <a href="#">  name@email.com</a> <br/>
    </p>
</address>

下記のように表示されます。

Bootstrapでコード（code）を実装する

コード要素は通常、HTMLや他の言語などのコンピュータのコードに使用します。Bootstrapでcode要素を使用する時は、pre要素と一緒に記述します。コードはエスケープして記述する必要があります（例: 「<」は「&lt;」、「>」は「&gt;」）。

HTML

<code>The &lt;code&gt; element</code>
  

		

		
			

			

			

			
  &lt;p class="text-left"&gt;We have a text align left here.&lt;/p&gt;
  &lt;strong>We have a bold text here.&lt;/strong&gt;
  &lt;p class="text-right"&gt;We have a text align right here.&lt;/p&gt;
			

				

					

				

					
1
2
3
				
						
  &lt;p class="text-left"&gt;We have a text align left here.&lt;/p&gt;
  &lt;strong>We have a bold text here.&lt;/strong&gt;
  &lt;p class="text-right"&gt;We have a text align right here.&lt;/p&gt;
					
				
			
		

下記のように表示されます。

Bootstrapで整列のclassを実装する

Bootstrapではテキストを整列させるために3つのclassが用意されています。

• text-left

  テキストを左に揃える

• text-right

  テキストを右に揃える

• text-center

  テキストを中央に揃える

• text-justify

  テキストを均等揃えに揃える

Bootstrapで強調のclassを実装する

Bootstrapではテキストを強調させるために6つのclassが用意されています。

• text-muted

  テキストのカラーを明るいグレーに変更

• text-primary

  テキストのカラーをスカイブルーに変更

• text-success

  テキストのカラーをグリーンに変更

• text-info

  テキストのカラーをブルーに変更

• text-warning

  テキストのカラーをオレンジに変更

• text-danger

  テキストのカラーをレッドに変更

HTML

<p class="text-muted"> This is muted </p>
<p class="text-primary"> This is primary </p>
<p class="text-success"> This is success </p>
<p class="text-info"> This is info </p>
<p class="text-warning"> This is warning </p>
<p class="text-danger"> This is danger </p>

下記のように表示されます。

Bootstrapでフォーム（form）を実装する

Bootstrapではフォームは、標準（normal）とインライン（inline）と水平（horizontal）の3つのスタイルが用意されています。

標準（normal）スタイルのフォーム

標準スタイルのフォームではform要素にclassを特に使用する必要はありません。

HTML

<form>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email" placeholder="Your Email..">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Your Password..">
  </div>
  <div class="form-group">
    <label for="file-upload">Browse File</label>
    <input type="file" id="file-upload">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> This is a checkbox
    </label>
  </div>
  <button type="submit" class="btn btn-success">Log-in!</button>
</form>

下記のように表示されます。
「.form-group」で囲まれた要素は適度なスペースでまとめられて表示されます。

インライン（inline）スタイルのフォーム

フォームのスタイルをインラインにするには、form要素に「.form-inline」を使用します。

HTML

<form class="form-inline">
  <div class="form-group">
    <label for="name">Your Name</label>
    <input type="text" class="form-control" id="name" placeholder="Your Name..">
  </div>
  <div class="form-group">
    <label for="email">Your Email</label>
    <input type="email" class="form-control" id="email" placeholder="Your Email..">
  </div>
  <button type="submit" class="btn btn-primary">Submit!</button>
</form>

下記のように表示されます。

水平（horizontal）スタイルのフォーム

フォームのスタイルを水平にするには、form要素に「.form-horizontal」を使用します。

HTML

<form class="form-horizontal">
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="name" placeholder="Your Name..">
    </div>
  </div>
  <div class="form-group">
    <label for="email" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Your Email..">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Check me!
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-success">Sign Me In!</button>
    </div>
  </div>
</form>

下記のように表示されます。
グリッドのclassを加えることで、ラベルを揃えています。

また、span要素を使いアイコンのclassを加えることで、アイコンを簡単に利用できます。

HTML

<div class="form-group has-success has-feedback">
  <label class="control-label" for="Success">Field with Success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputSuccess1" aria-describedby="inputSuccessStatus1">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccessStatus1" class="sr-only">(success)</span>
</div>

下記のように表示されます。

Bootstrapでテーブル（table）を実装する

Bootstrapではテーブルに5つのスタイルが用意されています。

• Basic

  水平な区切りだけでシンプルなレイアウトのテーブルで、table要素に「.table」を加えます。

• Striped rows

  水平にストライプ柄のレイアウトのテーブルで、table要素に「.table-striped」を加えます。

• Bordered table

  それぞれのサイドにボーダーを表示する典型的なテーブルで、table要素に「.table-bordered」を加えます。

• Hover rows

  Basicなスタイルでセルのホバー時に列をハイライトするテーブルで、table要素に「.table-hover」を加えます。

• Condensed table

  セルのスペースとパディングをコンパクトにしたテーブルで、table要素に「.table-condensed」を加えます。

HTML

<table class="table table-striped">
  <thead>
    <tr>
      <th>Web Developer's Name</th>
      <th>Phone</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rick Meyer</td>
      <td>(123) 456-7890 x10</td>
      <td>rickmeyer@email.com</td>
    </tr>
    <tr>
      <td>James Patir</td>
      <td>(123) 456-7890 x11</td>
      <td>james@email.com</td>
    </tr>
    <tr>
      <td>Roderick Lovegood</td>
      <td>(123) 456-7890 x12</td>
      <td>roderick@email.com</td>
    </tr>
  </tbody>
</table>

下記のように表示されます。
「.table-striped」を使ったストライプ柄のテーブルで、背景カラーを変更する時はLESSの「@table-bg」や「@table-bg-accent」の値を変更します。

Bootstrapで画像（img）を実装する

Bootstrapではimg要素に3つのスタイルが用意されています。

• img-rounded

  画像を角丸でスタイルします。

• img-circle

  画像をサークルでスタイルします。

• img-thumbnail

  画像にパディングとボーダーを加えてスタイルします。

レスポンシブ用として「.img-responsive」が用意されており、これをIE8-10でも使えるようにするにはimg要素に「width: 100% \9;」を加えます。

HTML

<div class="container">
  <div class="col-lg-12">
    <div class="col-md-3">
     <img src="img/image3.jpg" alt="" class="img-rounded img-responsive">
    </div>
    <div class="col-md-3">
     <img src="img/image2.jpg" alt="" class="img-circle img-responsive">
    </div>
    <div class="col-md-3">
      <img src="img/image4.jpg" alt="" class="img-thumbnail img-responsive"> 
    </div>
  </div>
</div>

左から、角丸、サークル、サムネイルの順です。

Bootstrapでナビゲーションバーを実装する

ナビゲーションバーはBootstrapのレスポンシブ用のコンポーネントの一つで、ナビゲーションヘッダやコンテナの役割をします。小さいスクリーンでは独立したバーで表示されます。

このナビゲーションバーにはメニューだけでなく、フォームや検索ボックスやドロップダウンメニューを加えることができます。

HTML

<div id="navbar-main">
<!-- Fixed navbar -->
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <img src="img/logo.png" class="logo"/>
      </button>
      <a class="navbar-brand hidden-xs hidden-sm" href="#home"> <img src="img/logo.png" class="logo"/></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
      <li><a href="#home">Home</a></li>
      <li> <a href="#home">Menu</a></li>
      <li> <a href="#base">Base CSS</a></li>
      <li> <a href="#forms"> Forms & Tables</a></li>
      <li> <a href="#gallery"> Gallery</a></li>
      <li> <a href="#code"> Code</a></li>
      <li> <a href="#contact"> Address</a></li>
    </div><!--/.nav-collapse -->
    <form class="navbar-form navbar-right search" role="search">
      <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    </div>
  </div>
</div>

Bootstrapではアクセシビリティを確保するためにナビゲーションを定義する必要があります。「.navbar」に続いて「.navbar-inverse」「.navbar-fixed-top」を使用します。「.navbar-inverse」を加えるのは、メニューにブラックの背景とホワイトのテキストを加え、「.navbar-fixed-top」をページをスクロールした際に固定位置に表示させます。

次にdiv要素に「.navbar-header」を与え、その中のa要素に「.navbar-brand」を与えました。

ナビゲーションをレスポンシブ対応にするために、「.navbar-collapse」と「.collapse」を設定します。「.navbar-toggle」は「data-toggle」と「data-target」の2つのデータ要素を可能にします。メニューに使用するリンクを加えるためにリストを使い、「.nav」と「.navbar-nav」を与えます。

最後のステップとして、「.navbar-form」で検索フォームを加え、右側にシンプルな検索バーを加えました。