Pinterest風webページを作ろう（所要時間の目安: 30分-60分）
要件
本書で取り組んだFlexboxと、今までのマークアップ言語シリーズで学習をしたHTMLと、CSSの基本の総復習として、Piterest風のwebページを作りましょう。
以下の完成見本の通りになるよう、取り組んでみましょう。
スターターフォルダを、以下よりダウンロードして取り組んでください。
スターターフォルダ名は、「lesson4-pinterest-starter」です。
以下の項目をヒントに取り組みましょう。
- Flexboxが有効化されやすいHTML要素の構造を意識して、HTMLコードを構成しましょう
- ページ上部のパーツからHTML要素を構成していきましょう
- HTMLの構成が終わったら、CSSでスタイル付与を行いましょう
- floatは使用せず、Flexboxで対応してください
- 「Pinterest-ish」箇所と「Login」箇所の文字色と背景色は
#e60023を使用してください - 「weeknight dinner idea」箇所の文字色は、
#c28b00を使用してください - 「Signup」の背景色は
#efefefを使用してください - フォントはGoogle Fontsを使用しても良いです
- widthを指定する場合は、pxではなく、%を単位として使用してください
- heightを指定する場合は、pxではなく、vhを使用してください
vhの単位
vhとは、表示画面に対しての高さを示す単位です。
異なる横幅や大きさの端末がたくさん出てきたことで、レスポンシブデザインという、画面サイズに合わせて、webサイトの構成をみやすく変化させる技術が必要になりました。
詳しくは、この先のマークアップ言語シリーズの本で取り扱いますが、その際に、ほぼ自動で画面幅のサイズから、指定された高さを算出して表示してくれるのが、vhという単位です。
vは「viewport」、hは「height」です。
viewportとは、「表示範囲」「表示領域」のことです。
何の表示領域かというと、皆さんが見ているパソコン画面の表示画面や、スマホ端末の表示画面、タブレット端末の表示画面のことです。