ヒーローセクション

初段 / 目安 20分

陽葵さんが両手を広げて言います。「サイトを開いた瞬間に、いらっしゃいませって感じにしたいの。大きい写真の上に、お店の名前とボタン！」。開店チラシの1枚目を思い浮かべているようです。

写真はまだ撮っていないので、いまは背景を色のグラデーションで代用します。載せる文字は、店名が「ハレノヒ珈琲」、キャッチコピーが「朝いちばんの一杯を、この街で。」、ボタンの文字が「メニューを見る」です。

完成条件

• class="hero" の要素を作り、その中に店名（h1）・キャッチコピー・ボタンを入れる
• .hero に背景を指定する（background-image のグラデーションでよい）
• .hero に高さを持たせ、中身を縦にも横にも中央へ寄せる
• ボタンは button タグで作り、padding で大きくして押しやすくする

進め方

中央寄せは2つの向きを分けて考えます。「横の中央」と「縦の中央」です。文字を横方向に真ん中へ寄せるだけなら text-align で足りますが、縦方向は箱の高さが決まっていないと寄せようがありません。だから先に高さを与え、そのうえで中身の並べ方を指定します。

中身を並べる箱にすると、justify-content と align-items の2つで縦横の位置が決まります。ただし並べる向きが横のままだと店名とボタンが1行に並んでしまうので、向きを縦に変えるのを忘れないでください。

背景は background-image に linear-gradient を書けば、画像がなくても色の変化を敷けます。

1. class="hero" の要素を作り、店名（h1）・キャッチコピー・ボタンを入れる
2. .hero に背景（linear-gradient でよい）を指定する
3. .hero に高さを与え、中身を縦横とも中央に寄せる
4. ボタンは button タグで作り、padding で大きくする