コンセプトページを作る(シングルカラムレイアウト)
トップページの作成が完了したので、続いてコンセプトページを作っていきます。
コンセプトページは、シングルカラムレイアウトで作成するようです。
ぐらみ
ページの横のほうになにもない
レイアウトのことだね！
フラミンゴさん
広告とかで気が散らないから
いいよね
HTML＆CSSとWebデザインが1冊できちんと身につく本
今回もこちらの本にお世話になります。
 | 技術評論社 発売日 : 2022-01-07 |
サンプルサイトを作りながらHTMLとCSS、Webデザインについて解説してくれる本です。
すべてのコードに解説があるのでとてもわかりやすいです。
すべてのコードに解説があるのでとてもわかりやすいです。
HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版]
著：服部雄樹
13．YouTube動画を埋め込む(HTML)
コンセプトページにはGIF動画とYouTube動画を載せます。
YouTubeから埋め込み用のコードをコピーしてきて貼り付けると動画を表示することが出来ました！
ぐらみ
勝手に動く動画だと思ってたんだけど
GIF動画っていうものだったんだね〜
14．イメージ画像の上にタイトルを表示する(CSS)
タイトルの背景にイメージ画像を挿入して、白文字にしました。
その他の画像も大きさを整えて、文章の横にレイアウトしました。
文章も見やすいように行間をあけます。
15．動画エリアの大きさを変える(CSS)
ページの全体に合わせて、動画エリアの大きさを変更します。
16．横から縦に並べ直す(CSS)
文章と画像が横に並んでいるので、スマホでの表示に合わせて縦にレイアウトしなおします。
動画エリアもそれに合わせて小さくしました。
まとめ：コンセプトページができた！
YouTubeやGIFの動画を掲載したコンセプトページができました。
動画だと座席の様子やカフェの雰囲気なども感じてもらうことができますね！
ここまでで学んだこと
- YouTube動画の掲載のやり方
- GIF動画の掲載のやり方
ぐらみ
動画だと伝えたいことがギュッと
まとめられるね！
フラミンゴさん
情報量が多いと読むだけで
疲れちゃうから動画があると
変化があっていいね
コンセプトページの作成が終わったので、次はメニューページを作ります。
おいしそうなメニューページは見てるだけで楽しいのでわくわくです！
| 技術評論社 発売日 : 2022-01-07 |
サンプルサイトを作りながらHTMLとCSS、Webデザインについて解説してくれる本です。
すべてのコードに解説があるのでとてもわかりやすいです。
すべてのコードに解説があるのでとてもわかりやすいです。
HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版]
著：服部雄樹
コメント