Webサイト制作の練習2日目

8月14日（水）の日記です。

先日の日記でも書いた通り、『HTML5 & CSS3 デザインブック』でのサンプルサイトの作成を早速進めております。

現時点で3章まで終わり、メインのレスポンシブ対応のサンプルWebページを作成する事が出来ました。

1. 各項目用のブロックの作成。
2. レイアウトを決める為に、cssのfloatやclearを用いてブロックの並びを調整。
3. まずは各ブロックのタイトル・文章・写真を用意する。
4. タイトル・文章の大きさや間隔、装飾を設定し、写真の表示方法や並びをさらにブロックで仕分けてfloatで調整。
5. レスポンシブに対応する為、cssのmediaを使ってmax-widthやmin-widthの区分けを行なう。

おおよそこの様な順序で調整を繰り返しながら完成したのが下記画像です。

やっぱり感動ですね。オーソドックスではあるかもしれませんが、巷で見る様なWebサイトの一例を完成させる事が出来ましたので。もちろん、本の通りにコードを書いていっただけなのですが、妙な達成感があって素直に嬉しかったです。

この調子で明日は4章から進めていきます。