◎ Webデザイン後編/練習問題(上)

ケーキハウス進化系( RWD編① )

レスポンシブ練習問題(お題)

clearfixで行った「ケーキハウスの進化系」を練習します。
▶ 前回の練習をみる

仕上がりを見る


合計4種類のケーキを紹介します。


今回は、クリアフィックス(overflow)効果を試してもらうため、二重にマークアップしてあります。黄色のボックス(contents)部分に注目してください。floatを採用した場合、sectionとasideを包囲しているcontentsは、高さを失いレイアウトの崩れを引き起こす原因になります。


headerの中に、ロゴマークを配置します。ロゴは、後ほどSVGなどを使って、自由にデザインしてみましょう。
その下にナビゲーションを配置します。

HTMLを定義

CSSを定義

トグルボタンの参考

:checked 疑似クラスを使って、ユーザーがメニューアイコンをクリックしたときだけ、スマホメニューを表示。
https://developer.mozilla.org/ja/docs/Web/CSS/:checked