🌟✨design-s's diary📔📖

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

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

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

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

ボックスの背景や掛け線のスタイルを利用して、バーの形にデザインしたり、バーの太さの調整をしたり、バーに合わせてリンクの色を、カーソルを重ねた時のリンクの背景色をグレー(#eeeeee)から水色(#75dbe7)に変更。
更にボックス間に区切り線を入れる。

CSSだけ 弄っただけですので、易しめですね〜〜
段々 見栄えが良くなりますね。

タイトルの本によって ある種 現代的なブログ風のホームページを作っていく。
自分用にカスタマイズしたものにするが、どれだけアレンジできるか未知数である。
この本によって ブログ・ニュース系のサイトとビジネス風のサイトのトップ＋コンテンツページを作る紹介であるが、私は 前者のものを作っていきます。
現在 5ボックスのレイアウトしたものに 一部コンテンツを入れた所である。
調整はこのあと行う。
コンテンツページを完成させた後 トップページを作って行く。
今回は レイアウトの仕方を学んだ。
見易いですブログ風のページになっていると思う。
気をてらったページを作ることもあるまい。
見易いのが何よりだからだ。
これは レスポンシブwebデザインの設定を行っている。いろいろなデバイスに対応するデザインだ。
これも現代風だろう。