Webサイト制作の練習3日目
8月15日（木）の日記です。
『HTML5 & CSS3 デザインブック』でのサンプルサイトの作成を一通り終えました。
まだこの時点ではリンク先もありませんし、データベースとの連携等も無い、単純なWebサイトのトップページです。
ですが、非常に勉強になりました。特に、ブロック分けに関する内容はかなり役立てると実感したものです。
前回の日記でも書きましたが、
- 各項目用のブロックの作成。
- レイアウトを決める為に、cssのfloatやclearを用いてブロックの並びを調整。
- まずは各ブロックのタイトル・文章・写真を用意する。
- タイトル・文章の大きさや間隔、装飾を設定し、写真の表示方法や並びをさらにブロックで仕分けてfloatで調整。
- レスポンシブに対応する為、cssのmediaを使ってmax-widthやmin-widthの区分けを行なう。
この順序が本書では徹底されていたのも理解出来ます。
やはりまずはヘッダー・メイン記事・フッターをきっちりと設け、次に「どういうレイアウトにするのか？」「どうすれば見やすいサイトになるのか？」、これをしっかりと練る事でスムーズにサイトが作れるのだなと思います。...あくまで個人の感想ですが。
下記に制作したページの画像を載せておきます。基本とはいえ、見栄え良く作るというのは思っているより大変ですが、こうして完成すると「良かったな」と思えますね。この気持ちを忘れずに、日々精進していきたいと思います。
