【練習】レイアウトLesson3

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

素材ダウンロード

ダウンロード圧縮ファイル

使用フォント

WEBアイコン

詳細

  • ロゴパーツのサイズは画像、ロゴタイプも含めwidth 200px height 80px、タイプはgoogleフォントを利用。
  • ロゴ画像サイズはwidth 100px height auto。
  • ヘッダーとメインイメージ、フッターの横幅は左右100%、News・Shop部分は左右最大768px。
  • ヘッダーナビゲーションの横幅は左右が最大1000px。
  • メイン(メロンパン)画像はmax-widthが768px。
  • ナビゲーションは現在のページを表現するために、クラスcurrentを作成し、ホームへ適用。currentにafterの疑似クラスを用意しposition:absoluteで罫線を表示されるようにする。

SPデザイン

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

768px以下詳細

  • ロゴパーツのサイズ(画像、ロゴタイプの枠)をheight 50pxに変更。
  • ロゴ画像サイズはwidth 80pxに変更。
  • メイン(メロンパン)画像をwidth 80%に変更。

Yuki Nakata

中田デザイン事務所 代表。
WEBデザイナー(フリー)/ WEB講師(非常勤)/ 海外販売(法人)他

お仕事のご相談はお問い合わせフォームへお願いします。