【入門編】CSSのborder-collapseモデル – HTML実践ガイド

「テーブルの線が二重になっちゃう…！」を解決。CSSのborder-collapseでスッキリ整えるコツ

Webサイトを作っていると、避けては通れないのが「テーブル（表）」の作成です。
カレンダーや料金表、あるいはデータの比較リストなど、テーブルは情報を整理するのに欠かせない存在ですよね。

でも、いざHTMLで`

`タグを書いて、CSSで境界線（border）を引いてみると……。
「あれ？なんで線が二重になってるの？」と、頭を抱えた経験はありませんか？

実はこれ、CSSの「ある魔法のプロパティ」を知っているだけで、驚くほどスッキリ解消できるんです。今日は、テーブルの境界線をコントロールする`border-collapse`について、一緒に紐解いていきましょう！

—

まず、ブラウザのデフォルトの動きを想像してみてください。
HTMLのテーブルは、いわば「小さな四角い箱（セル）をたくさん並べたもの」です。

CSSで「セルに境界線を引いてね」と指示すると、ブラウザは律儀に「それぞれの箱に、一つずつ枠線を引く」という仕事をします。結果として、隣り合うセル同士の線が重なり合って、太い二重線のように見えてしまうんですね。

これは、バラバラの箱をただ並べているだけの状態だと考えてください。隙間があるから、それぞれの境界線がくっきりと主張してくるわけです。

—

この「二重線」を解消するために使うのが、`border-collapse`というプロパティです。
このプロパティには、大きく分けて2つの設定値があります。

「隣り合うセルの境界線を、一本の線にまとめてくれ！」という設定です。
現代のWebデザインで、スッキリとした表を作りたいときは、ほぼこれを使います。これを使うと、まるで最初から一本の線で区切られた方眼紙のような見た目になります。

これは「それぞれのセルをバラバラの箱として扱うよ」という設定です。
もし、セル同士にわざと隙間（余白）を作って、デザインとして「浮いているような表」を作りたい場合はこちらを使います。

—

まずは、一番よく使う「スッキリとした表」の書き方を見てみましょう。

table {
/ これで境界線が一本にまとまります！ /
border-collapse: collapse;

/ 表全体の幅を指定 /
width: 100%;
}

th, td {
/ セル一つ一つに線を引きます /
border: 1px solid #333;

/ セルの中の文字が窮屈にならないように余白を入れます /
padding: 10px;
}

たったこれだけで、あの見栄えの悪かった二重線が消え、プロっぽく整ったテーブルに変身します。

—

もし、`border-collapse: separate;`（初期値）の状態のまま、セルの隙間を調整したい場合は、`border-spacing`というプロパティを使います。

これは「箱と箱の間の距離」を指定するものです。

table {
/ 分離した状態（デフォルト）に戻す /
border-collapse: separate;

/ セル同士の隙間を20px空ける /
border-spacing: 20px;
}

これを指定すると、テーブルの中に独特の「余白」が生まれます。
「格子状のデザインではなく、カードが並んでいるようなおしゃれな表を作りたい！」というときには、この手法がとても役立ちますよ。

—

ここで、初心者の頃にありがちな「あれ？」というポイントを一つだけ。

「`border-collapse: collapse;` を使うと、`border-spacing` が効かなくなる！」

これは仕様なので、焦らなくて大丈夫です。

この「二者択一」の関係を覚えておくだけで、レイアウトが崩れたときに「あ、設定が競合してるんだな」とすぐに気づけるようになりますよ。

—

HTMLのテーブルは、最初はとっつきにくいかもしれませんが、「小さな箱を並べている」というイメージさえ持てれば、CSSでの装飾もずっと簡単になります。

1. `border-collapse: collapse;` を使えば、線は一本にまとまる。
2. `border-spacing` は、`separate`の時だけ使える「隙間調整ボタン」。

まずはこの2つだけを覚えて、ご自身のサイトで試してみてください。
もし最初はうまくいかなくても大丈夫。一つずつ設定をオン・オフしながら、ブラウザの表示が変わるのを楽しむのが、上達への一番の近道です！

次はどんな表を作ってみましょうか？ぜひ、あなたのWeb制作の引き出しに加えてみてくださいね！

タイトルとURLをコピーしました