メインビジュアルを作ろう

写真、キャッチコピー、説明文、ボタンを組み合わせて、With Caféの第一印象を作ります。

このLessonのゴール

• ページの主題を表す見出し、説明文、リンクをHTMLで組み立てられる
• 写真と文章を重ねたメインビジュアルをCSSで配置できる
• object-fitを使って写真の縦横比を保てる

今回作るもの

完成サイトの最上部にある「毎日に、ほっとできる時間を。」のエリアです。

1. HTMLを追加する

ヘッダーの直後へmainを作り、その中へ記述します。

<main id="top">
  <section class="hero">
    <div class="hero-image">
      <img
        src="images/with-cafe-hero.jpg"
        alt="焼きたてのパンとコーヒーが並ぶWith Caféの店内"
      />
    </div>

    <div class="container">
      <div class="hero-copy">
        <p class="hero-label">BAKERY &amp; COFFEE</p>
        <h1>毎日に、<br />ほっとできる時間を。</h1>
        
          焼きたてのパンと、丁寧に淹れたコーヒー。
          街の小さなカフェで、心ほどけるひとときをお過ごしください。
        
        メニューを見る