記事一覧（日付＋見出し）
カード ／ パターン集トップ
ブログ・お知らせ向け。日付列を固定幅にして見出しを揃える
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<!-- 新しい順に並べる。リンク先は記事ページの実在するURLにする -->
<ul class="article-list">
<li><time datetime="2026-08-28">2026.08.28</time><a href="/blog/mizudashi-shikomi">水出しの仕込みは前の晩に終わらせる</a></li>
<li><time datetime="2026-08-18">2026.08.18</time><a href="/blog/fukairi-ireru">深煎りの豆を、家でおいしくいれる</a></li>
<li><time datetime="2026-08-05">2026.08.05</time><a href="/blog/mame-miwake">深煎りに向く豆の見分けかたと、店で使っている基準</a></li>
</ul>.article-list {
list-style: none;
margin: 0;
padding: 0;
border-block-start: 1px solid var(--color-border);
}
.article-list li {
position: relative; /* 行そのものを当たり判定の枠にする */
display: grid;
grid-template-columns: 6.5rem minmax(0, 1fr);
gap: var(--space-4);
align-items: baseline;
padding-block: var(--space-4);
border-block-end: 1px solid var(--color-border);
}
.article-list time {
font-size: var(--text-sm);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.article-list a {
color: var(--color-text);
text-decoration: none;
line-height: var(--leading-body);
}
/* 文字は 30px しかないが、行は上下の余白を入れて 62px ある。
擬似要素を行いっぱいに広げると、日付を押しても記事へ行ける。
文字も余白も動かさずに、当たり判定だけが 44px を超える */
.article-list a::after {
content: "";
position: absolute;
inset: 0;
}
.article-list a:hover {
color: var(--color-accent-text);
text-decoration: underline;
}確認する#
- 日付列は tabular-nums で桁が揃う
- 見出し列は minmax(0,1fr) で長文を折り返す
- 375px でも日付と見出しが重ならず、行のどこを押しても記事へ行ける
- 日付が新しい順に並び、time の datetime と表示の日付が同じ日を指している
- リンク先が記事ページの実在するURLになっている（
#のまま公開しない）