このページの中身

前後の記事ナビ

記事 ／ パターン集トップ

記事末尾から前後の1件ずつへ送る。タイトルは2行まで、rel で向きを示す

プレビュー#

この枠の中は出発点のCSSの上で動いています。下のコードは、そちらを先に貼ってから足してください。

コピーする#

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

<nav class="post-nav" aria-label="前後の記事">
  <a class="post-nav__link" href="/blog/mame-miwake" rel="prev">
    <span class="post-nav__dir"><span aria-hidden="true">←</span> 前の記事</span>
    <span class="post-nav__title">深煎りに向く豆の見分けかたと、店で使っている基準</span>
  </a>
  <a class="post-nav__link post-nav__link--next" href="/blog/mizudashi-shikomi" rel="next">
    <span class="post-nav__dir">次の記事 <span aria-hidden="true">→</span></span>
    <span class="post-nav__title">水出しの仕込みは前の晩に終わらせる</span>
  </a>
</nav>
.post-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border);
}
.post-nav__link {
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}
.post-nav__link--next {
  text-align: end;
}
.post-nav__dir {
  display: block;
  margin-block-end: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.post-nav__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: var(--leading-body);
}
.post-nav__link:hover .post-nav__title {
  color: var(--color-accent-text);
  text-decoration: underline;
}

確認する#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。