記事ヘッダー
記事 ／ パターン集トップ
タグ・日付・読了目安をタイトルの前後にまとめる。日付は datetime つきの time で持つ
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<!-- 記事ページの h1 はここだけが持つ。本文の段組は h2 から始める -->
<header class="article-header">
<ul class="article-header__tags" aria-label="タグ">
<li><a href="/blog/tag/mame" rel="tag">豆の話</a></li>
<li><a href="/blog/tag/irekata" rel="tag">いれかた</a></li>
</ul>
<h1 class="article-header__title">深煎りの豆を、家でおいしくいれる</h1>
<p class="article-header__meta">
<time datetime="2026-08-18">2026年8月18日</time>
<span aria-hidden="true">・</span>
読了目安 4分
</p>
</header>.article-header {
padding-block-end: var(--space-6);
border-block-end: 1px solid var(--color-border);
margin-block-end: var(--space-7);
}
.article-header__tags {
list-style: none;
margin: 0 0 var(--space-3);
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.article-header__tags a {
display: inline-flex;
align-items: center;
min-block-size: 2.75rem; /* タグも押すものなので 44px を下回らせない */
padding-inline: var(--space-3);
border: 1px solid var(--color-border);
border-radius: 999px;
font-size: var(--text-sm);
color: var(--color-accent-text);
text-decoration: none;
}
.article-header__tags a:hover {
border-color: var(--color-accent-text);
}
.article-header__title {
margin: 0 0 var(--space-3);
font-size: clamp(var(--text-xl), 1.2rem + 1.6vw, var(--text-2xl));
line-height: var(--leading-heading);
text-wrap: balance;
}
.article-header__meta {
margin: 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.article-header__meta time {
font-variant-numeric: tabular-nums;
}確認する#
- 日付は time 要素で、datetime が 2026-08-18 の形式になっている
- タグとタイトルの間より、ヘッダーと本文の間を広く取っている
- 読了目安は本文の文字数から出している（飾りの数字を置かない）
- ページの h1 はこのヘッダーだけが持つ（本文の段組に h1 を残さない）
- タイトルが、前後の記事ナビや関連記事に並ぶ別の記事名と重なっていない