【CSS最新仕様】gapに線を引く！FlexboxとGridで簡単に罫線を作れる新しいCSSプロパティを徹底解説

Web技術
2026.08.18

Web制作のレイアウト設計において、display: flex や display: grid の gap プロパティは、要素同士の余白を管理するための必須テクニックとして定着しました。

しかし、デザイナーから「カードの間に縦の区切り線を入れたい」「Gridレイアウトの行と列の間に綺麗な罫線を引きたい」と要望されたとき、途端に実装の面倒臭さに頭を抱えた経験はありませんか？

「子要素に border-right を付けて、最後の要素だけ :last-child で消す」「Flexが折り返した瞬間に不要な線が残る」「Gridの背景色とgapを組み合わせて1pxの線を無理やり作る……」。こうしたCSSハックの時代が、いよいよ終わろうとしています。

現在策定が進み、主要ブラウザへの実装が進められているのが、FlexboxやCSS Gridの「gap（隙間）」に直接罫線を引くことができる新しいCSS仕様（row-rule / column-rule / gap-rule）です。

本記事では、なぜこれまでの区切り線実装が辛かったのかという歴史的課題から、新しいCSSルールの使い方、具体的なサンプルコード、実務での代替アプローチまで、3,000字オーバーで徹底解説します！

1. これまで「gapの間に線を引く」のがどれほど辛かったか？

FlexboxやGridが普及してもなお、要素間の「ボーダー（区切り線）」の実装はCSSにおける大きな弱点の一つでした。これまでの代表的な3つの手法と、それぞれの致命的なデメリットを振り返ってみましょう。

① border ＋ :not(:last-child) パターン

最も広く使われてきたのが、子要素の片側にボーダーを付け、最後の要素だけ打ち消す手法です。

/* 昔ながらの区切り線 */
.flex-container {
  display: flex;
}
.flex-item:not(:last-child) {
  border-right: 1px solid #ccc;
  padding-right: 16px;
  margin-right: 16px;
}

【問題点】

  • flex-wrap: wrap で2行以上に折り返された場合、行末の要素にもボーダーが残ってしまい、デザインが崩れる。
  • 縦横両方に線を引きたいGridレイアウトでは、行と列の打ち消し指定（:nth-child などの複雑な計算）が極めて困難になる。

② 擬似要素（::after）で縦線を引くパターン

要素の間に position: absolute で縦棒を配置する手法です。

【問題点】

  • 高さの計算や中央揃えの配置調整（top: 50%; transform: translateY(-50%);）が必要でコード量が増える。
  • コンテンツの増減や折り返しに対応しにくい。

③ 背景色と gap を使ったGridハック

親要素に線の色（背景色）を指定し、gap: 1px を空けて子要素の背景色で塗りつぶすという裏技です。

/* Grid背景色ハック */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: #ccc; /* これが線の色になる */
  border: 1px solid #ccc;
}
.grid-item {
  background-color: #fff; /* 背景色でマス目を白くする */
}

【問題点】

  • 背景が透過（シースルー）のデザインや、背景画像・グラデーションの上では使えない。
  • 点線（dashed）や破線（dotted）の罫線が引けない。

2. 待望の救世主！新しいCSSプロパティ（Rule関連）とは？

これまでマルチカラムレイアウト（column-count）専用だった column-rule プロパティが拡張され、FlexboxやCSS Gridのコンテナに対しても、行間・列間の罫線を引くプロパティが適用できるよう標準化が進められています。

プロパティ名 対象 役割
column-rule 列と列の間（縦の隙間） カラム間の隙間に引く罫線の太さ・種類・色を指定
row-rule 行と行の間（横の隙間） 行と行の隙間に引く罫線の太さ・種類・色を指定
gap-rule 行・列の両方の一括指定 row-rule と column-rule をまとめて指定するショートハンド

指定方法は、普段私たちが使い慣れている border と全く同じ感覚で記述できます。

/* 基本構文のイメージ */
.container {
  display: flex;
  gap: 24px;
  
  /* gapの真ん中に自動で1pxの線が引かれる！ */
  column-rule: 1px solid #e0e0e0;
}

3. 【実践コード】FlexboxとGridで境界線を引くサンプル

新しいCSSルールを使った、スマートでシンプルなレイアウト実装例を見てみましょう。

① Flexboxでの水平ナビゲーション・区切り線

ヘッダーのメニューやパンくずリストなど、アイテム間にだけ縦線を引きたい場合のコードです。

<!-- HTML -->
<ul class="nav-list">
  <li>ホーム</li>
  <li>サービス概要</li>
  <li>導入事例</li>
  <li>お問い合わせ</li>
</ul>

.nav-list {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;

  /* 列のgapの真ん中にグレーの縦線を引く */
  column-rule: 1px solid #ccc;
}

ここが凄い：
最後の要素の右側には自動的に線が引かれません。:last-child の記述やマイナスマージンは一切不要です。

② CSS Gridでのカードグリッド・十字罫線（格子デザイン）

料金表や特徴一覧など、縦横に均等に並んだ要素の隙間に綺麗な十字の罫線を入れる例です。

<!-- HTML -->
<div class="feature-grid">
  <div class="card">機能 01</div>
  <div class="card">機能 02</div>
  <div class="card">機能 03</div>
  <div class="card">機能 04</div>
</div>
/* CSS */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;

  /* 行と列の間それぞれに罫線を引く */
  row-rule: 1px solid #ddd;
  column-rule: 1px solid #ddd;

  /* 一括指定（gap-rule）が使える場合はこれ1行でもOK */
  /* gap-rule: 1px solid #ddd; */
}

ここが凄い：
外枠（コンテナの一番外側）には線がつかず、要素同士が隣り合う「内側の隙間」だけに過不足なく線が描画されます。

4. 新仕様がもたらす圧倒的なメリット

この新しいプロパティがWeb制作の現場に普及することで、コーディングの体験は劇的に向上します。

  • 折り返し（flex-wrap）に完全対応：Flexboxが画面幅に応じて2行・3行に折り返された場合でも、行末や不要な隙間に線が残ることなく、ブラウザが自動で隙間だけに線を再描画してくれます。
  • HTML構造のク文化・クリーン化：区切り線を描くためだけの無駄な <span class="divider"></span> や擬似要素を撲滅でき、セマンティクスが美しく保たれます。
  • デザイン変更への即応性：線の色や太さ、実線・点線の変更が親要素のCSS 1行を変えるだけで完結します。
  • アクセシビリティの向上：不要な装飾用DOM要素が消えるため、スクリーンリーダーの読み上げにも余計なノイズを与えません。

5. 今すぐ現場で使えるモダンな代替アプローチ

新しいCSSルールプロパティの全ブラウザ完全サポートまでの移行期間において、現在最も破綻しにくい代替コード（フォールバック）をストックしておきましょう。

推奨代替案：gap ＋ 擬似クラス（:not(:last-child)）のモダン記法

現代のブラウザでは :has() や :not() のセレクタが問題なく動作するため、以下のように記述するのが最もトラブルの少ない書き方です。

/* 1行で並ぶFlexboxの安全なフォールバック */
.flex-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 子要素間の境界線（右側に線を引き、最後の要素だけ除外） */
.flex-group > *:not(:last-child) {
  border-right: 1px solid #e0e0e0;
  padding-right: 16px; /* gapと合わせて余白バランスを取る */
}

6. まとめ

「gapの間に線を引く」という長年フロントエンドエンジニアを悩ませてきた課題は、新しいCSS仕様（row-rule / column-rule / gap-rule）によって最もエレガントな形で解決されようとしています。

  1. これまでの border 打ち消しや背景色ハックは、折り返しや透過デザインに弱い欠点があった。
  2. 新しい仕様では、親のコンテナに column-rule や row-rule を書くだけで隙間に自動描画される。
  3. 外枠や不要な箇所に線が出ず、折り返してもレイアウトが崩れない。

CSSの進化は日進月歩です。最新仕様の動向をキャッチアップしながら、よりシンプルで保守性の高いクリーンなコードを設計していきましょう！

関連記事
👉 【完全保存版】WordPressサーバー移行の全手順！現役エンジニアが失敗しない手順と注意点を徹底解説

OFFICETAKECでは、最新のCSS・フロントエンド標準を取り入れた高品質なWebサイト制作・コーディング・表示崩れのないレスポンシブ設計を行っております。Web制作やリファクタリングのご相談もお気軽にお問い合わせください。

👉 Webサイト制作・開発のご相談はこちら（お問い合わせフォームへ）

(Visited 2 times, 1 visits today)
タイトルとURLをコピーしました