HTML/CSSとWebデザインを勉強してみる④

※当サイトはアフィリエイト広告を利用しています

実際にこの本で勉強してみたLog

メニューページを作る(グリッドレイアウト)

コンセプトページの作成が完了したので、続いてメニューページを作っていきます。

メニューページは、グリッドレイアウトで作成するようです。

グリッドレイアウトとは?

グリッドレイアウトは複数の要素をタイルを敷詰めていくように配置するレイアウトです。

枠の中で、大きさや範囲を自由に設定して要素を配置できます。

トップページで使用したフレックスボックスレイアウトは要素を整列させるイメージでしょうか。

ぐらみ
ぐらみ

グリッドレイアウトのほうが

自由度が高そうだね

フラミンゴさん
フラミンゴさん

どんなふうに

使い分けるのかな?

HTML&CSSとWebデザインが1冊できちんと身につく本

今回もこちらの本にお世話になります。

サンプルサイトを作りながらHTMLとCSS、Webデザインについて解説してくれる本です。
すべてのコードに解説があるのでとてもわかりやすいです。

HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版]

著:服部雄樹

17.各要素を並べる(HTML)

まずは見出しや各メニューの画像、紹介文などの要素をひとつずつ並べていきます。

いくつかはトップページからコピーしてきました。

18.グリッドレイアウトに整える(CSS)

グリッドレイアウトでメニューを表示させました。

各メニューの右上にメニューの英語表記を90度回転させたものを配置しています。

また、ブラウザの幅を変更すると自動で折り返して表示する列の数を調節してくれるように設定してあります。

ぐらみ
ぐらみ

表示する列を自動で調節してくれるなんて

すごく便利だね!

19.スマホ表示を整える(CSS)

スマホでの表示も整えていきます。

ブラウザの幅に応じて表示する列の数を調節してくれるので、スマホでの表示にも自動で対応できていました。

列を自動で調節してくれる機能がさっそく役に立ちましたね!

余白などを調整するだけでスマホ表示もキレイに整いました。

フラミンゴさん
フラミンゴさん

自動で調節してくれると

修正も少なくてすむね

まとめ:メニューページができた!

グリッドレイアウトを使用したメニューページができました。

グリッドレイアウトなら自由度が高いので、おすすめのメニューを大きく表示するとかもできそうですね。

表現の幅が広がりそうです!

ここまでで学んだこと

  • グリッドレイアウトの設定のやり方
  • 列数の自動調整のやり方
  • テキストを90度回転するやり方
ぐらみ
ぐらみ

グリッドレイアウトなら自由に

配置を決められるね!

フラミンゴさん
フラミンゴさん

おすすめのものを大きく表示したり

色々なレイアウトを作ってみたいな

メニューページの作成が終わったので、次はショップページを作ります。

サンプルサイトを作りながらHTMLとCSS、Webデザインについて解説してくれる本です。
すべてのコードに解説があるのでとてもわかりやすいです。

HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版]

著:服部雄樹

コメント

タイトルとURLをコピーしました