関連記事3件

記事 ／ パターン集トップ

読み終えた人へ次の3件を差し出す。サムネなしの文字組で日付を添える

プレビュー#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<aside class="related-list" aria-labelledby="related-list-title">
  <h2 id="related-list-title">関連記事</h2>
  <ul>
    <li>
      <a href="/blog/baisen-fukasa">焙煎の深さで変わる、苦味と酸味のバランス</a>
      <time datetime="2026-07-30">2026年7月30日</time>
    </li>
    <li>
      <a href="/blog/mame-hozon">豆の保存は、光・空気・温度の順に効く</a>
      <time datetime="2026-07-12">2026年7月12日</time>
    </li>
    <li>
      <a href="/blog/yuon-nido">湯温を2度下げると、同じ豆でも甘く出る</a>
      <time datetime="2026-06-28">2026年6月28日</time>
    </li>
  </ul>
</aside>

.related-list {
  margin-block-start: var(--space-8);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.related-list h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
}
.related-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.related-list li {
  position: relative;   /* 行そのものを当たり判定の枠にする */
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}
.related-list li:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}
.related-list li:last-child {
  padding-block-end: 0;
}
.related-list a {
  display: block;
  margin-block-end: var(--space-1);
  color: var(--color-text);
  text-decoration: none;
  line-height: var(--leading-body);
}
/* 見出しの文字は 30px しかないが、日付と余白を入れた行は 44px を超える。
   擬似要素を行いっぱいに広げると、日付を押しても同じ記事へ行ける */
.related-list a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.related-list a:hover {
  color: var(--color-accent-text);
  text-decoration: underline;
}
.related-list time {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

確認する#

• 3件が今の記事と同じ話題でつながっている（新着の使い回しにしない）
• 今読んでいる記事自身が関連に入っていない
• 見出しの id と aria-labelledby がつながっている
• 行のどこを押しても同じ記事へ行き、当たり判定が 44px を超える

関連#

• 情報設計
• 字間と行間
• 出発点のCSS