情報ブロック

概要

見出し・文章・画像を含むレイアウトは、ブログ記事やランディングページなどで頻繁に使用されるパターンです。

文書構造において重要度の高い順に要素を並べると、一般的に「見出し→文章→画像」の順序が最適とされています。これにより、スクリーンリーダーなどの支援技術を使用するユーザーにとっても情報が理解しやすくなります。

このパーツでは、HTMLを論理的な順序で記述しながら、CSS Grid の grid-area を使用して視覚的なレイアウトを自由に制御する方法を紹介します。

プレビュー

HTML

<div class="infoBlock">
  <div class="infoBlock__inner">
    <h2 class="infoBlock__heading">見出しテキスト</h2>
    <div class="infoBlock__text">
      <p>ここに説明文が入ります。複数の段落を含むことができます。</p>
      <p>追加の段落もサポートしています。</p>
    </div>
    <div class="infoBlock__image">
      <img src="/images/demos/dummy-image.webp" alt="抽象的なイメージ" />
    </div>
  </div>
</div>

CSS

※CSS Nestingを使用しています。

.infoBlock {
  container: infoBlock / inline-size;
  inline-size: 100%;
}

.infoBlock__inner {
  --_gap: 1.5rem;

  display: grid;
  gap: var(--_gap);
  grid-template:
    "heading"
    "image"
    "text"/
    1fr;

  @container infoBlock (min-width: 480px) {
    grid-template:
      "heading heading"
      "text image"/
      1fr 40%;
  }
}

.infoBlock__heading {
  grid-area: heading;
  margin-block-end: 0.5em;
}

.infoBlock__text {
  grid-area: text;

  p {
    margin-block-end: 1em;

    &:last-child {
      margin-block-end: 0;
    }
  }
}

.infoBlock__image {
  grid-area: image;

  img {
    inline-size: 100%;
    block-size: auto;
  }
}

特徴

• アクセシブルな構造: 文書構造上の重要度順（見出し→文章→画像）にHTMLを配置し、スクリーンリーダーなどの支援技術に対応
• 柔軟なレイアウト: CSS Grid の grid-area を使用して、HTML順序を変更せずに視覚的配置を自由に制御
• コンテナクエリ対応: 親要素の幅が480px以上で自動的に横並びレイアウトに変化

関連する知識・考え方

• 物理プロパティより論理プロパティを使う