サンプルサイトを作成してWebデザインを学ぼう！
引き続きサンプルサイトを作成しながらWebデザインについて勉強していきます。
全体で共通のヘッダーとフッターを
作るところまで終わったね
ここからは
トップページを作るよ
HTML＆CSSとWebデザインが1冊できちんと身につく本
今回もこちらの本にお世話になります。
 | 技術評論社 発売日 : 2022-01-07 |
すべてのコードに解説があるのでとてもわかりやすいです。
HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版]
著：服部雄樹
６．キャッチコピーとリード文を入力する(HTML)
トップページの作成がはじまりました。冒頭はフルスクリーンレイアウトです。
まずはHTMLでキャッチコピーとリード文を入力します。
写真の横にそれっぽい文章が添えられているとすごいオシャレですよね〜
どんなページになるのか楽しみだな〜
７．フルスクリーンレイアウトに整える(CSS)
CSSで表示する写真を指定して、キャッチコピーの見た目を整えました。
めっちゃオシャレ！
すっごくオシャレになったね！
写真とフォントで
イメージが変わるのが
よくわかるね
８．リード文とボタンを整える(CSS)
リード文の配置や行間を整え、コンセプトページへのリンクボタンも設置しました。
リンクボタンはカーソルをあわせると色が変わる仕組みになっています。
ユーザーの動きに対して、サイト側からリアクションがあると思わずクリックしたくなっちゃいますね！
〇〇をしたら〜みたいなのも
設定できるんだね！
他にはどんなことができるのか
気になるね
９．スマホでの表示を整える(CSS)
フルスクリーンレイアウトでのスマホの表示を整えました。
スマホはPCと違って縦画面なので、画像と文章を縦画面になじませます。
これでトップページのフルスクリーンレイアウトの部分が完成しました。
10．各メニューを並べる(HTML)
続いてトップページのメニューを表示する部分を作っていきます。
ここはフレックスボックスレイアウトというデザインにするようです。
まずはHTMLで各要素を並べていきます。
11．メニューのレイアウトを整える(CSS)
順番に縦に並んでいた要素を横に並べなおして、はみ出た部分はスクロールして表示できるようにしました。
商品名や商品の説明、値段の表示も見やすいように整えたらだいぶそれっぽくなってきました！
横にスクロールするやつだ！
さらっとラインナップが
見られるから便利だよね
12．メニューの表示をスマホ用に整える(CSS)
スマホで見ると画像が大きかったり、横にスクロールできることがわかりづらくなっていたので、画像の大きさや余白を調整しました。
これでトップページは完成です。
どんな雰囲気のお店なのか？メニューはなにがあるか？が伝えられるシンプルでわかりやすいページになりましたね！
オシャレでわかりやすいページができたよ！
情報をしぼるのが大切だね
まとめ：トップページができた！
トップページの作成が終わりました。
ここまでで学んだこと
- フルスクリーンレイアウトについて
- カーソルを合わせると色が変わるボタンの作り方
- フレックスボックスレイアウトについて
- 横にはみ出した要素をスクロールで表示する方法
オシャレなトップページになったね！
お店の雰囲気やメニューがわかるし、
ほかのページも見てみたくなるね〜
トップページの作成が終わったので、次はコンセプトページの作成に移ります。
ここまでサクサク進んできましたが、ふと気がつくと本全体の３分の２まできていました！
残り３分の１も楽しんで進めていきたいと思います！
| 技術評論社 発売日 : 2022-01-07 |
すべてのコードに解説があるのでとてもわかりやすいです。
HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版]
著：服部雄樹
コメント