私たちについてを作ろう

店舗の紹介文と3つの特徴を作ります。文章の階層をHTMLで表し、CSS Gridでカードを並べます。

このLessonのゴール

• section、article、見出しを使って店舗紹介を構造化できる
• CSS Gridで3つの特徴カードを横並びにできる
• 文章量が変わっても崩れにくいカードを作れる

1. HTMLを追加する

main内、メインビジュアルの次へ記述します。

<section id="about" class="about">
  <div class="container">
    <p class="eyebrow">About us</p>
    <h2 class="section-title">おいしい時間を、あなたと一緒に。</h2>
    <p class="about-lead">素材の味を大切に、毎朝店内で焼き上げています。</p>

    <div class="value-list">
      <article class="value-card">
        <span>01</span>
        <h3>毎朝、店内で焼き上げ</>
        小麦の香りと食感を楽しめるよう、その日の分を丁寧に焼き上げます。
      
      
        02
        季節の素材を楽しむ
        旬の果物や地域の素材を取り入れ、季節ごとの味をお届けします。
      
      
        03
        一杯ずつ丁寧に
        パンとの相性を考えて選んだ豆を、注文ごとにハンドドリップします。