このページの本文へ

Bootstrapでシングルページをコーディング

2014年09月30日 11時00分更新

イシジマミキ/ザ・マーズナレッジ代表

  • この記事をはてなブックマークに追加
本文印刷

 最近よく見かけるシングルページを作るデザイン塾。第3回では、Bootstrapのナビゲーションバーをlessでカスタマイズしました。今回は、「メインイメージ」「アバウト」「使い方」の3つのブロックを作っていきましょう。

01.png
前回までに作成したナビゲーション

メインイメージを作る

 メインイメージ部分は、大きなロゴと短い文章のみの非常にシンプルな構成です。ロゴや文章を「index.html」に指定し、オリジナルのスタイルを「theme.less」に記述してデザインを整えます。

02.png
作成するメインイメージ

 index.htmlは次のように変更します。

■変更前のソースリスト(index.htmlの一部、緑色部分を変更)


      </nav>
      <div class="container">
        <h1>Hello, world!</h1>
      </div>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

■変更後ソースコード(index.htmlの一部、緑色の部分が変更箇所)


      </nav>
      <div class="mainimage">
        <div class="container">
          <img src="images/logo-paprika.png" alt="Probono Paprika" class="img-responsive center-block">
          <p class="catchcopy lead text-center">Share it to be able to your</p>
        </div>
      </div>

      <section class="quote">
        <div class="container">
          <blockquote>各分野の専門家が、職業上持っている知識・スキルや経験を活かして社会貢献するボランティア活動全般。<br>また、それに参加する専門家自身。</blockquote>
        </div>
      </section>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

 変更後のHTMLでは、Bootstrapで定義されているスタイルを適用します。Bootstrapにはレイアウトに使える汎用的なスタイルがあらかじめ用意されており、class名をHTML要素に指定するだけで、要素を真ん中に揃えたり、画像の回り込みを設定したりできます。

◆.img-responsive
 親要素の幅に合わせて画像を伸縮します。

◆.center-block
 要素を真ん中に揃えます。

◆.text-center
 文字を真ん中寄せにします。

◆.lead
 下記の図のような、リード向けの見た目にするスタイルです。

03.png

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く