最近よく見かけるシングルページを作るデザイン塾。第3回では、Bootstrapのナビゲーションバーをlessでカスタマイズしました。今回は、「メインイメージ」「アバウト」「使い方」の3つのブロックを作っていきましょう。
前回までに作成したナビゲーション
メインイメージを作る
メインイメージ部分は、大きなロゴと短い文章のみの非常にシンプルな構成です。ロゴや文章を「index.html」に指定し、オリジナルのスタイルを「theme.less」に記述してデザインを整えます。
作成するメインイメージ
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
下記の図のような、リード向けの見た目にするスタイルです。
