container-lines

コンテナライン

使用する場面

• ページに、コンテンツコンテナの幅を示す控えめな縦ガイドが必要な場合。
• ヒーロー、セクション、または製品ページにまとまりがなく、構造的な緊張感が必要な場合。
• 小さなコーナースクエア、寸法を意識したエッジ、または控えめな技術的フレーミングを取り入れたい場合。

ルール

1. メインコンテンツコンテナの左右の端にラインを引きます。
2. ラインは細く保ちます。1px で、不透明度は低くします。
3. コンテナの角またはセクションの交差部分に小さなスクエアを追加します。
4. セクション間でラインの仕組みを統一し、セクションごとに幅を変えないでください。
5. ラインはコンテンツの背面、ページ背景の前面に配置します。
6. ガイドが UI をブロックしないよう、ポインターイベントを無効にします。

基本トークン

:root {
  --container-max: 1120px;
  --container-pad: clamp(20px, 4vw, 48px);
  --line-color: rgba(24, 24, 27, 0.14);
  --line-strong: rgba(24, 24, 27, 0.28);
  --corner-size: 6px;
}

ページコンテナライン

レイアウトシェルに疑似要素を使用します。

.container-lines {
  position: relative;
  isolation: isolate;
}

.container-lines::before,
.container-lines::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 1px;
  background: var(--line-color);
  pointer-events: none;
}

.container-lines::before {
  left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
}

.container-lines::after {
  right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
}

コーナースクエア

寸法を正確に感じさせたいセクションに、小さなスクエアを4つ追加します。

.corner-squares {
  position: relative;
}

.corner-squares > .corner {
  position: absolute;
  width: var(--corner-size);
  height: var(--corner-size);
  background: var(--line-strong);
  pointer-events: none;
}

.corner.top-left { top: 0; left: 0; transform: translate(-50%, -50%); }
.corner.top-right { top: 0; right: 0; transform: translate(50%, -50%); }
.corner.bottom-left { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.corner.bottom-right { right: 0; bottom: 0; transform: translate(50%, 50%); }

<main class="container-lines">
  <section class="corner-squares">
    <span class="corner top-left"></span>
    <span class="corner top-right"></span>
    <span class="corner bottom-left"></span>
    <span class="corner bottom-right"></span>
    ...
  </section>
</main>

最小限のセクションラッパー

ラインの位置と同じコンテナ幅を使用します。

.content-container {
  width: min(100% - (var(--container-pad) * 2), var(--container-max));
  margin-inline: auto;
}

デザイン上の注意点

• ラインは装飾ではなく、構造を示すものとして使います。ページを控えめに整理する役割を持たせます。
• すべてのネストされたコンポーネントにラインを追加せず、ページまたは主要なセクションのレベルにとどめます。
• 小さなスクエアのサイズは控えめかつ正確にし、通常は 4px から 8px にします。
• ビジュアルシステム全体が技術的または工業的な場合を除き、明るいアクセントカラーは避けます。
• コンテナの最大幅とパディングは、コンテンツとガイドラインで共通にします。

確認項目

• 縦のラインがコンテンツコンテナの端に正確に揃っています。
• コーナースクエアが任意の位置ではなく、実際のコンテナまたはセクションの角に配置されています。
• 明るい背景でも暗い背景でも、ラインが控えめに見えます。
• モバイルでも、ラインとコンテンツの間に十分なパディングがあります。
• ガイドがクリック、ホバー、テキスト選択を妨げません。