HTMLとCSSを学んだ後におすすめ!レイアウトのクロッキー練習(実例付)

空いた時間にサクッとHTMLとCSSのスキルアップが図れる、
レイアウトクロッキーの方法について記事にしました。

こんな方におすすめです

  • HTMLとCSSの書き方、使い方は理解した。
  • 1からサイト制作をするにはスキル不足。
  • 学んだことを実践したい。

今の時期はひたすらアウトプットする時期

自分の中に仕入れた知識を、出し入れが自由なスキルとするため、
今の段階はひたすらアウトプットが必要です。

有効な方法としては色々ありますが、
まずは「レイアウトのクロッキー」「サイト模写」が良いと思います。

※サイト模写については『【フロントエンド】Webサイト模写のススメ』に詳しく述べています。

レイアウト作成

レイアウトとはサイトの大まかな枠組みのことです。
1カラム、2カラム、3カラムサイトというような言い方をします。

1カラム

ヘッダー + メインコンテンツ + フッター

2カラム

ヘッダー + メインコンテンツ(メイン + サイド) + フッター

3カラム

ヘッダー + メインコンテンツ(サイド + メイン + サイド) + フッター

練習方法

スケッチでいうクロッキー(短時間でスケッチすること)に相当する。
ここで細かい作り込みは不要。
大まかなサイトの枠組みのみコーディングしていく。
画像とかテキスト情報は同じにする必要はないので、あえてheightで高さを出したり、
レイアウトの区分が分かるように背景色を付ける。

ここでは例としてYahoo!JAPANのトップページのクロッキーをしてみましょう。

Yahoo!JAPANのトップページは3カラムの構成なので、途中ですがクロッキーするとこんな感じになる。
所要時間15分くらい。

以下は参考までにコードです。

HTMLファイル(index.html)

CSSファイル(style.css)