【練習】レイアウトLesson4 - 中田デザイン事務所

下記画像のようなレイアウトを完成してください。

素材ダウンロード

トップは全画面表示にし、

下部「スクロール↓」をクリックすると、

メインコンテンツへ画面遷移します。これは「スクロール↓」にaタグで遷移先をid指定する事で作成してください。

PC表示で、メニューサムネイルに天地左右20pxの空き（隣り合う部分は合計で40pxになります）を設定してください。

また、メニューサムネイルはそれぞれのスレッド数が予想できないシステムというつもりで制作してもらいたいため、数が多い場合は左よりで表示されるように作成してください。

以下は、SPデザインのサンプルです。768px以下で下記デザインになるようにしてください。

768px以下で、メニューサムネイルは天地左右10px（隣り合う部分は合計で20pxになります）の空きを設定してください。

640px以下で、メニューサムネイルは2段組みへ変更してください。