CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで比較表を作成する方法｜レスポンシブ対応のサンプルコード付きで解説

CSSを使えば、画面幅に合わせて自動的に調整されるレスポンシブ対応の比較表を簡単に作成できます。料金プランやサービス機能の比較など、さまざまな場面で活用できるので、実装方法をマスターしておくと便利です。

ここでは、実際のコード例をもとに、見やすく整った比較表の作り方を詳しく解説します。

比較表のサンプルコード

以下が、CSSでレスポンシブな比較表を作成するための完全なコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        border: 1px solid #ddd;
    }
    th, td {
        text-align: center;
        padding: 16px;
        font-weight: bold;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 18px;
    }
    th:first-child, td:first-child {
        text-align: left;
    }
    tr:nth-child(even) {
        background-color: #f2f2f2
    }
</style>
</head>
<body>
<h1 style="text-align: center;">Comparison Table Example</h1>
<table>
<tr>
<th style="width:50%">Features</th>
<th>Basic</th>
<th>Pro</th>
</tr>
<tr>
<td>Free</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>Customer Support</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>Validity</td>
<td>1 Year</td>
<td>Lifetime</td>
</tr>
<tr>
<td>Warranty</td>
<td>No</td>
<td>5 Years</td>
</tr>
</table>
</body>
</html>

コードのポイント解説

このサンプルコードでは、読みやすい比較表を作るために以下のCSSテクニックを使用しています。

1. border-collapse: collapse で境界線をすっきり表示

border-collapse: collapse; を指定すると、隣接するセル同士の罫線が1本にまとまり、表全体がすっきりとした印象になります。

2. nth-child(even) でストライプ模様を追加

tr:nth-child(even) を使うことで、偶数行に薄いグレー（#f2f2f2）の背景色が適用されます。これにより行が交互に色分けされ、横方向に視線を動かしやすくなります。

3. 最初の列だけ左寄せにする

th:first-child, td:first-child のセレクタで、先頭列（項目名の列）のみ左揃えにしています。項目名は左寄せ、比較対象の値は中央揃えにすることで、情報が整理されて読みやすくなります。

4. レスポンシブ対応

<meta name="viewport"> の設定と width: 100% の指定により、スマートフォンなどの小さな画面でも表が画面幅にフィットして表示されます。

表示結果

上記のコードをブラウザで開くと、次のような比較表が表示されます。

CSSで比較表を作成する方法｜レスポンシブ対応のサンプルコード付きで解説

このように、基本的なCSSのプロパティを組み合わせるだけで、デザイン性と可読性を兼ね備えた比較表を作成できます。色味やパディング（余白）の数値を調整すれば、自分のサイトのデザインに合わせたカスタマイズも自由自在です。ぜひ参考にしてみてください。

  1. CSSでレスポンシブ対応の価格表を作成する方法【サンプルコード付き】

    CSSを使えば、画面サイズに応じてレイアウトが自動的に切り替わるレスポンシブ対応の価格表（料金テーブル）を簡単に作成できます。本記事では、メディアクエリとfloatレイアウトを組み合わせた実装方法を、実際に動作するサンプルコードとともに分かりやすく解説します。レスポンシブ価格表のサンプルコード以下は、無料プランと上位プランの2つの価格表を並べて表示し、画面幅が狭くなると自動的に縦積みレイアウトへ切り替わる完全なHTML・CSSコードです。<!DOCTYPE html> <html> <head> <meta name="viewport&qu

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>