【CSS】レッスン3-08：リストとテーブルのスタイルを変更しよう

一つ前の章ではリックボタンの設置方法について学習しました。

今回はリストやテーブルのスタイルを変更する方法について見ていきましょう。

Lesson3-1：ボックス配置の基礎を理解しよう
Lesson3-2：ボックスサイズを変更しよう
Lesson3-3：ボックスを自在に配置しよう
Lesson3-4：画像を自在に配置しよう
Lesson3-5：画像のスタイルを変更しよう
Lesson3-6：背景画像を設定しよう
Lesson3-7：リンクボタンを設置しよう
Lesson3-8：リストとテーブルのスタイルを変更しよう ◁今回はココ
Lesson3-9：CSS変数を理解しよう

Webページを作成する際、情報を見やすく整理するために欠かせないのが「リスト」と「テーブル」です。

リストは箇条書きで項目を整理するのに便利であり、テーブルはデータや情報を行と列で整理して表示するのに役立ちます。しかしこれらの要素は初期状態（デフォルト）ではシンプルすぎて、Webサイト全体のデザインと調和しないこともあります。

そこで重要になるのが、CSSを活用してリストやテーブルの見た目をカスタマイズする方法です。

本記事ではリストとテーブルのデフォルトスタイルをリセットし、デザイン性の高い表示に変更する方法を詳しく解説します。

初心者の方でも理解しやすいように、基本から順を追って説明していきますので、一緒に学んでいきましょう！

<<前のページ HTML/CSSの記事一覧 次のページ>>

リストのスタイル変更

HTMLのリストには主に順序付きリスト、順序なしリスト、定義リストの3つの種類があります。

それぞれのリスト自体の細かい内容はLesson1-4で学習しました。ブラウザによって多少の違いはありますが、デフォルトではこれらのリストに余白やマーカーが自動的に付与されています。

このままでも使用できますが、デザインに合わせて自由にカスタマイズすることが可能です。

デフォルトスタイルのリセット

多くのWebサイトではリストのデフォルトスタイルをリセットしてから独自のデザインを適用します。

リセットすることで余計なマージンやパディング、マーカーを取り除き、すっきりとした見た目にできます。

以下のCSSを読み込むことで、デフォルトスタイルをリセットできます。

ul, ol {
  list-style: none; /* マーカー（●や番号）を削除 */
  padding: 0;       /* 内側の余白を削除 */
  margin: 0;        /* 外側の余白を削除 */
}

これで、デザインのベースが整いました。

3種類のリストを作成して、そのデフォルトスタイルをリセットし変化を確認してみましょう。

カスタムマーカーの追加

デフォルトのマーカーを削除した後は、独自のアイコンやマーカーを追加することができます。

  • ::before 疑似要素を使い、カスタムマーカーを追加。
  • content プロパティで任意の記号や文字をマーカーにできる。

シンプルな星形のカスタムマーカーを設定する例を見てみましょう。 以下のCSSコードを読み込んだHTMLコードを作成し、ブラウザ表示してみましょう。

.custom-list li::before {
  content: "★";       /* 星マークを追加 */
  color: orange;       /* マーカーの色をオレンジに変更 */
  margin-right: 8px;   /* テキストとの間に余白を追加 */
}
<ul class="custom-list">
  <li>特徴1</li>
  <li>特徴2</li>
  <li>特徴3</li>
</ul>

もし正しく表示されなかった場合は、デフォルトスタイルのリセットが正しくされているか確認しましょう。

また、「★」以外にもいろいろな文字を指定できますので試してみましょう。

以下のCSSコードを使用すれば、文字ではなく任意のアイコン画像をマーカーとして使用できます。

実際に試してみましょう。

.icon-list li::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url('icon.png'); /* 任意のアイコン画像 */
  background-size: cover;
  margin-right: 8px;
}

ネストリストのデザイン

入れ子になったリスト（ネストリスト）のデザインは、以下のようなコードで設定できます。

ul ul {
  padding-left: 20px; /* ネストしたリストのインデントを調整 */
  list-style-type: circle; /* ネストリストのマーカーを丸に変更 */
}

これにより階層ごとに異なるスタイルを適用できます。情報の階層構造を視覚的にわかりやすくするための重要なポイントです。

テーブルのスタイル変更

HTMLのテーブルは、データや情報を行（row）と列（column）で整理して表示するために使用されます。

基本的なテーブルの構造はLesson1-5で学習しました。

このままでも使用できますが、デザインに合わせて自由にカスタマイズすることが可能です。

デフォルトのテーブルスタイルについて

HTMLでシンプルなテーブルを作成すると、次のようなコードになります。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>出身地</th>
  </tr>
  <tr>
    <td>山田 太郎</td>
    <td>25</td>
    <td>東京</td>
  </tr>
  <tr>
    <td>鈴木 花子</td>
    <td>30</td>
    <td>大阪</td>
  </tr>
</table>
  • 枠線が表示されない。
  • セル同士の間に余白がある。
  • テキストは左寄せになっていることが多い。

これを自由にカスタマイズしていきましょう。

テーブルのカスタマイズ方法

1. 枠線の追加（border と border-collapse）

テーブルに枠線を追加するにはborder プロパティを使用します。

またborder-collapse を指定することで枠線の重なりを防ぎ、すっきりしたデザインにできます。

以下のCSSコードを上記のHTMLコードに読み込ませてブラウザ表示してみましょう。

table {
  border-collapse: collapse; /* 枠線を一つにまとめる */
  width: 100%;               /* テーブルの幅を親要素に合わせる */
}

th, td {
  border: 1px solid #000;    /* セルに黒い枠線を追加 */
  padding: 8px;              /* セル内の余白を追加して見やすく */
  text-align: center;        /* テキストを中央揃え */
}
  • border-collapse: collapse;：枠線を結合して、二重線にならないようにします。
  • border: 1px solid #000;：1ピクセルの実線で黒い枠線を表示。
  • padding: 8px;：セル内に余白を追加し、見た目を整えます。

2. 余白と間隔の調整（padding と border-spacing）

デフォルトではセル間に余白がある場合があります。border-spacing でセル間の間隔を調整しましょう。

table {
  border-collapse: separate;  /* セル間の余白を有効にする */
  border-spacing: 10px;       /* セル間に10pxの間隔を設定 */
}
  • border-collapse: separate;：セル同士の間に余白を持たせるデザインに。
  • border-spacing: 10px;：セル間に具体的な間隔を指定します。

3. 背景色の設定（background-color）

テーブルに背景色を追加するとデータの区切りが明確になります。特にヘッダー部分や行ごとに色分けすると視認性が向上します。

th {
  background-color: #f2f2f2;  /* ヘッダー行に薄いグレーの背景色 */
  color: #333;                /* 文字色を濃いグレーに */
}

tr:nth-child(even) {
  background-color: #f9f9f9;  /* 偶数行に薄い背景色でストライプ効果 */
}
  • nth-child(even)：偶数行だけにスタイルを適用することで、ストライプ状のデザインに。
  • background-color：視認性向上やデザインの強調に便利です。

4. テキストの配置（text-align と vertical-align）

テーブル内のテキストはtext-align で水平位置、vertical-align で垂直位置を調整できます。

th, td {
  text-align: left;         /* テキストを左揃え */
  vertical-align: middle;   /* テキストを上下中央揃え */
}
  • text-align: left;：データの種類によって左揃え、中央揃え、右揃えを使い分けます。
  • vertical-align: middle;：複数行のテキストがある場合も中央揃えが可能です。

カスタマイズ例：スタイリッシュなテーブル

以下のコードをブラウザ表示してみましょう。

<table class="custom-table">
  <tr>
    <th>商品名</th>
    <th>価格</th>
    <th>在庫状況</th>
  </tr>
  <tr>
    <td>ノートパソコン</td>
    <td>120,000円</td>
    <td>在庫あり</td>
  </tr>
  <tr>
    <td>スマートフォン</td>
    <td>80,000円</td>
    <td>残りわずか</td>
  </tr>
</table>
.custom-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* テーブルに影を追加 */
}

.custom-table th {
  background-color: #4CAF50; /* ヘッダーの背景色を緑に */
  color: white;              /* ヘッダーの文字色を白に */
  padding: 10px;
}

.custom-table td {
  border: 1px solid #ddd;    /* セルの境界線を薄いグレーに */
  padding: 8px;
  text-align: center;
}

.custom-table tr:nth-child(even) {
  background-color: #f9f9f9; /* 偶数行に薄い背景色でストライプ効果 */
}

.custom-table tr:hover {
  background-color: #f1f1f1; /* ホバー時に背景色を変更 */
}
  • box-shadow で立体感のあるデザインに。
  • nth-child(even) と hover を組み合わせ、見た目の変化とインタラクティブ性を向上。
  • カラーバランスを整えることで、データが一目で見やすくなります。

シンプルなテーブルのHTMLコードがあります。以下の条件を満たすようにカスタマイズしましょう。

１．枠線を追加し、セル同士の境界線がはっきりと見えるようにすること
２．ヘッダー部分（<th>）だけに背景色をつけること
３．行ごとに交互に色をつける、「ストライプ模様」をつけること

<table>
  <tr>
    <th>科目</th>
    <th>点数</th>
    <th>評価</th>
  </tr>
  <tr>
    <td>数学</td>
    <td>85</td>
    <td>A</td>
  </tr>
  <tr>
    <td>英語</td>
    <td>78</td>
    <td>B</td>
  </tr>
  <tr>
    <td>理科</td>
    <td>92</td>
    <td>A+</td>
  </tr>
</table>

まとめ

このレッスンでは、リストとテーブルのスタイルをCSSでカスタマイズする方法について学びました。

  • リストのカスタマイズ：マーカーの種類や配置、インデントの調整が可能
  • テーブルのカスタマイズ：枠線、余白、背景色、ホバー効果で視認性アップ
  • デザインの工夫：CSSでシンプルな要素をおしゃれに変身させるスキルが身についた

ここまで学習を進めてきた皆さん、本当にお疲れさまでした！

CSSを活用することで、同じHTMLの構造でも見た目を大きく変化させることができる楽しさを感じていただけたでしょうか？

デザインの工夫次第でページ全体の印象も大きく変わります。ぜひ今回学んだテクニックを活用して、自分だけのオリジナルデザインに挑戦してみてください！

練習問題3-8：簡単なメニュー表をデザインしよう！

以下のHTMLコードは、レストランのメニューを表示するシンプルなページであり、リストとテーブルが含まれています。

このコードにCSSを追加して、見やすくスタイリッシュなデザインにカスタマイズしてみましょう。

<h2>🍽️ 本日のおすすめメニュー</h2>

<ul>
  <li>パスタ</li>
  <li>ピザ</li>
  <li>サラダ</li>
</ul>

<table>
  <tr>
    <th>メニュー</th>
    <th>価格</th>
    <th>おすすめ度</th>
  </tr>
  <tr>
    <td>マルゲリータピザ</td>
    <td>1,200円</td>
    <td>★★★☆☆</td>
  </tr>
  <tr>
    <td>シーザーサラダ</td>
    <td>800円</td>
    <td>★★★★☆</td>
  </tr>
  <tr>
    <td>カルボナーラ</td>
    <td>1,100円</td>
    <td>★★★★★</td>
  </tr>
</table>
  1. リストのカスタマイズ
    • リストのデフォルトのマーカー（黒い丸）を消して、**オリジナルのアイコン（例: “✔” や “★”）**を表示してみましょう。
    • リスト項目に**余白（インデント）**を追加して、見やすく整えましょう。
  2. テーブルのカスタマイズ
    • テーブルに枠線を追加して、セルの境界をはっきりと表示しましょう。
    • ヘッダー行に背景色（例: 薄いグレー）を設定して、項目名が目立つようにしましょう。
    • 偶数行にだけ薄い背景色を追加して、見やすいストライプ模様にしてみましょう。
    • テーブル全体にホバー効果を追加し、マウスを乗せたときに行の背景色が変わるようにしましょう。

初めてのWebサイトを作ろう3-8

このサイトの Lesson1-1（HTML学習の入り口） か Lesson2-1（CSS学習の入り口） からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ」

この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

現在準備中です。暫くお待ちください。

<<前のページ HTML/CSSの記事一覧 次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。






    HTML/CSSのテキスト＆問題集トップへ戻る
    トップページへ戻る