さぁ!検索しよう!

CSSフレームワーク「Bootstrap」の使い方を解説します。

Webデザイン時は、コーディング作業でかなりの時間を費やしますが、そんなコーディング作業の手助けをしてくれるのが、CSSフレームワークと呼ばれるものです。

CSSフレームワーク

CSSフレームワークとは、初めからクラス名やレイアウト等のスタイルが定義されているファイルを読み込ませ、それに沿ってマークアップすることで、CSSの知識がなくてもWebサイトを作成することができるツールです。

このCSSフレームワークの代表的なものが、今回紹介する「Bootstrap」です。

Bootstrap

Bootstrapの利点は下記の通りです。

  • レスポンシブデザイン
  • 通常、レスポンシブデザインを行なうには、前の記事で紹介したように、メディアクエリーを始め、リキッドレイアウトやフルードイメージ、viewport等といった知識が必要であり、かなりの時間を要してしまいますが、Bootstrapは予め、レスポンシブデザインとなっているため、そのような知識は必要ありません。

  • 様々なコンポーネントが用意されている
  • Webサイトに必要なボタンやナビゲーション等のインターフェースが豊富に揃っているので、一から作成する必要がなく、コードをコピー&ペーストするだけで実現できます。

それでは、使い方を説明します。まず初めに準備をします。

準備

  1. Bootstrapの公式サイトへ行き、Bootstrap本体をダウンロードします。
  2. Getting started ・ Bootstrap

  3. ZIPファイルを解凍すると、下記のようにbootstrap-***-distフォルダ内にフォルダが3つあることが確認できます。
  4. 2014-04-15_151643_mini

  5. bootstrap-***-distフォルダ内にindex.htmlファイルを新規作成します。
  6. post_12_image03

  7. 公式サイトのGetting startedタブをクリックし、下へ進むとBasic template下にコードが載っているので、このコードを先ほど作成したindex.htmlファイルにコピー&ペーストし、上書き保存します。
  8. post12_image04

  9. index.htmlファイルを開くと、下記のような画面になります。
  10. post12_image05

これでBootstrapを使う準備が完了しました。あとは、必要な部品のコードをコピー&ペーストで配置し、Webサイトを完成させます。それでは使い方を説明します。

使い方

使い方は、公式サイトのComponentsタブをクリックすると、Webサイトに必要な様々な部品が載っているので、そのコードをindex.htmlファイルのbody内にコピー&ペーストすれば、簡単に配置できます。
また、色や配置等の変更は、CSSを参考にして行ないます。

例として、ナビゲーションを配置します。

post12_image06

ComponnentsのDefault navbar下のコードを下記のようにindex.htmlファイルのbody内にコピー&ペーストします。

index.html

<!–省略–>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!– Brand and toggle get grouped for better mobile display –>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>

<!– Collect the nav links, forms, and other content for toggling –>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!– /.navbar-collapse –>
</div><!– /.container-fluid –>
</nav>
<!–省略–>

※body内の

<h1>Hello, world!</h1>

は削除します。

上記を上書きしindex.htmlを開くと、下記のようにナビゲーションが配置されていることが確認できます。

post12_image07

続いて、CSSを参考に、ナビゲーションのメニュー名を任意のメニュー名に、色を黒に、そしてナビゲーション自体を中央寄せに変更してみます。
先ほどのコードを下記のように変更してみますた。

index.html

<!–省略–>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid container">
<!– Brand and toggle get grouped for better mobile display –>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">株式会社Ponosanic</a>
</div>

<!– Collect the nav links, forms, and other content for toggling –>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">ホーム</a></li>
<li><a href="#">会社概要</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">事業内容<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">ソフトウェア開発</a></li>
<li><a href="#">Webサイト制作</a></li>
<li><a href="#">人材派遣</a></li>
<li class="divider"></li>
<li><a href="#">家具製造・販売</a></li>
<li class="divider"></li>
<li><a href="#">ITソリューション</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!– /.navbar-collapse –>
</div><!– /.container-fluid –>
</nav>
<!–省略–>

post12_image08

このようにして、他にもボタンやパンくずリスト、ページネーション等といったパーツを配置・変更していき、Webサイトを完成させます。

※英語が苦手な方のための、日本語翻訳版サイトもあるようです。

以上です。