使い方部分を作る
第2ページの「使い方」を作成しましょう。これまでに使ってきたスタイルを同じように使います。HTMLファイルとtheme.lessに追加するソースコードを示しておきます。追加するHTMLソースコードは、アバウト部分のHTMLソースコードの直後に続けます。
作成する使い方部分
theme.lessで使っているclass「.square(200px)」は、正方形にしたいときに使うmixinです。この前に解説したメディアクエリーも使っています。
■追加するHTMLソースコード（index.htmlの一部）
<section id="howtouse" class="howtouse">
<div class="worker">
<div class="target">
<div class="oval">
<span>プロボノ<br>したい人</span>
</div>
<p>フォームから必要な情報を入力しておくだけ。あとはページを見てくれた人から声がかかるのを気長に待つのみです。</p>
</div>
</div>
<div class="client">
<div class="target">
<div class="oval">
<span>プロボノ<br>されたい人</span>
</div>
<p>このページに表示されている人の中から興味のある人へメールやFacebookなどで連絡するだけ。</p>
</div>
</div>
</section>
■追加するlessソースコード（theme.lessの一部）
.howtouse{
.worker,.client{
width: 50%;
float: left;
padding: 20px;
color: #5E8061;
font-size: 15px;
}
.worker{
background: #B8E986;
}
.client{
background: #F8E71C;
}
.target{
min-height: 400px;
margin-top: 40px;
.center-block();
@media screen and (min-width: @screen-sm-min) {
width: 50%;
}
.oval{
position: relative;
.square;(150px)
margin-bottom: 20px;
border: 8px solid #FFFFFF;
-webkit-border-radius: 100%;
border-radius: 100%;
@media screen and (min-width: @screen-sm-min) {
.square(200px);
.center-block();
}
span{
width: 6em;
margin-top: 45px;
.center-block();
font-weight: bold;
line-height: 1.4;
text-align: center;
}
}
}
}
index.htmlとtheme.lessへの追記が終わったら、theme.lessをコンパイルして、ブラウザーをリロードすると図のように表示されます。
使い方部分が追加されたサイト
※ ※ ※
以上で、メインビジュアル、アバウト、使い方部分ができました。次回は、いよいよシングルページの完成です。
スタイルをつくるときは小さいサイズから？
Bootstrapのメディアクエリーの使い方を見ていると、スマートフォンサイズを先に定義しておき、ウィンドウサイズが大きくなったときのスタイルをメディアクエリーで定義しています。モバイルファースト的な思想がベースになっているのでしょう。
小さなウィンドウほどシンプルなレイアウトにすることが多いので、最初から小さなデバイスを想定してスタイルを作っていくと、スタイルの修正は比較的少なくて済みます。
逆に、大きなウィンドウ向けのスタイルから小さなスタイルを作っていくと、スタイルの記述が長くなったり、ダイナミックに配置した画像や背景のサイズ調整に手間取ったりしてけっこう苦労することが多いのです。
こういった修正の手間を考えると、やはりデザインデータの時点で作り込みすぎない方がやりやすいですね。
