本文＋サイドバー

タイポ ／ パターン集トップ

読む幅を本文列に限定し、補助情報を脇に置く

プレビュー#

調整する#

コピーする#

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

<div class="with-aside page">
  <article class="with-aside__main">
    <h1>記事タイトル</h1>
    <p>本文は1列に限定し、行長はレイアウトで決めます。65ch のような指定は使いません。</p>
  </article>
  <aside class="with-aside__side" aria-label="関連情報">
    <h2>関連</h2>
    <ul><li><a href="#">余白</a></li><li><a href="#">行長</a></li></ul>
  </aside>
</div>

.with-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside-w, 16rem);
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 48rem) {
  .with-aside {
    grid-template-columns: 1fr;
  }
}
.with-aside__main h1 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
}
.with-aside__side {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.with-aside__side h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
}
.with-aside__side ul {
  margin: 0;
  padding-inline-start: 1.1em;
}
/* 文字の行は19pxで、隣の行とは5pxしか離れていない。
   高さを44pxにし、行のあいだに8pxを足す */
.with-aside__side li + li {
  margin-block-start: var(--space-2);
}
.with-aside__side a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
}

確認する#

• 本文列が minmax(0,1fr) で縮める
• 48rem 以下で1列に落ちる
• サイドバーは補助情報だけ
• サイドバーのリンクが44pxあり、隣とのあいだに8pxある

関連#

• 版面と行長
• グリッド
• 出発点のCSS