メニューページを作る(グリッドレイアウト)
コンセプトページの作成が完了したので、続いてメニューページを作っていきます。
メニューページは、グリッドレイアウトで作成するようです。
グリッドレイアウトとは?
グリッドレイアウトは複数の要素をタイルを敷詰めていくように配置するレイアウトです。
枠の中で、大きさや範囲を自由に設定して要素を配置できます。
トップページで使用したフレックスボックスレイアウトは要素を整列させるイメージでしょうか。
グリッドレイアウトのほうが
自由度が高そうだね
どんなふうに
使い分けるのかな?
HTML&CSSとWebデザインが1冊できちんと身につく本
今回もこちらの本にお世話になります。
すべてのコードに解説があるのでとてもわかりやすいです。
HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版]
著:服部雄樹
17.各要素を並べる(HTML)
まずは見出しや各メニューの画像、紹介文などの要素をひとつずつ並べていきます。
いくつかはトップページからコピーしてきました。
18.グリッドレイアウトに整える(CSS)
グリッドレイアウトでメニューを表示させました。
各メニューの右上にメニューの英語表記を90度回転させたものを配置しています。
また、ブラウザの幅を変更すると自動で折り返して表示する列の数を調節してくれるように設定してあります。
表示する列を自動で調節してくれるなんて
すごく便利だね!
19.スマホ表示を整える(CSS)
スマホでの表示も整えていきます。
ブラウザの幅に応じて表示する列の数を調節してくれるので、スマホでの表示にも自動で対応できていました。
列を自動で調節してくれる機能がさっそく役に立ちましたね!
余白などを調整するだけでスマホ表示もキレイに整いました。
自動で調節してくれると
修正も少なくてすむね
まとめ:メニューページができた!
グリッドレイアウトを使用したメニューページができました。
グリッドレイアウトなら自由度が高いので、おすすめのメニューを大きく表示するとかもできそうですね。
表現の幅が広がりそうです!
ここまでで学んだこと
- グリッドレイアウトの設定のやり方
- 列数の自動調整のやり方
- テキストを90度回転するやり方
グリッドレイアウトなら自由に
配置を決められるね!
おすすめのものを大きく表示したり
色々なレイアウトを作ってみたいな
メニューページの作成が終わったので、次はショップページを作ります。
すべてのコードに解説があるのでとてもわかりやすいです。
HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版]
著:服部雄樹
コメント