パーツの間隔の調整




先ずは パーツの間隔の縦方向の調整をしました。
次に横方向ですが、余白を入れると、横並びのレイアウトが崩れてしまいます。標準ではwidthで指定した横幅(BOX3の場合は70%)にpadding-rightで指定した余白サイズが含まれないためです。
そこで、box-sizingを「border-box」と指定し、横幅に余白サイズを含めて処理する様に指定する。古いFirefox、iOS4.x、Android 2.3.xにも対応する場合は、-moz-box-sizingと-webkit-box-sizingの指定も追加します。

以上の結果が、最初の画像になります。

これもそれほど難しくはありませんでした。
繰り返しの部分もありますので、そこはコピペで対応できます。一部を見直せばいい場合もありますし。

☆ メインのナビゲーションメニューのデザインブックを選ぶと経過中のページが見られます。
レスポンシブWebデザインがよくわかります。
スマホやファブレットのたて表示ではそれが如実に現れます。つまり、ボックスが全部たてに並んだ状態で表示されます。
素晴らしいですね~(*´∇`*)