フッター(3カラム)

中段 / 目安 25分

「一番下、まだ真っ白なままなの」と陽葵さんがスクロールしながら言いました。「店舗情報と、営業時間と、SNSのリンク。この3つを横に並べたい。上のほうは明るい色にしたから、下は落ち着いた濃い色でお願い!」

フッターは、お客さんが「で、結局どこにあるお店なの」と思ったときに最後に見る場所です。だから置くものは決まっています。住所、電話、営業時間、それにSNS。ここが空白のサイトは、名刺の裏が白紙なのと同じです。

3つを横に並べる方法は2つあります。親に display: flex を書いて子を並べる形と、display: grid と grid-template-columns で列を切る形です。今回のように 3つを均等に並べたい なら grid が素直です。

1fr は「余った幅を1つぶん取る」という意味で、それを3つ並べたので均等な3列になります。repeat(3, 1fr) は 1fr 1fr 1fr と書くのと同じで、列が増えたときに効いてくる書き方です。

色で気をつけることが1つあります。背景を濃くしたら、文字とリンクの色も両方明るくし直してください。リンクだけ既定の青のまま残ると、濃い背景の上で沈んで読めなくなります。背景色を変えるときは文字色とセットで考える、と覚えてください。

完成条件

• footer の中に、店舗情報・営業時間・SNSリンクの3つのブロックを置く
• 3つを横並びの3カラムにする
• footer に濃い背景色を付け、文字色も読める明るさに変える

進め方

白紙から書いてください。手が止まったらヒントを開けます。ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

横に並ばないときは、まず親に display を書いたかを疑ってください。3つのブロックを包む要素が1枚足りていない、というのがよくある原因です。

1. footer の中に、店舗情報・営業時間・SNSリンクの3つのブロックを置く
2. 3つを包む要素に display: grid か display: flex を指定し、gap で間隔を空けた横並びの3カラムにする
3. footer に濃い背景色を付ける
4. 濃い背景に合わせて、文字色とリンクの色も明るくする