Skip to content

8. リストとテーブルのスタイリング

この章では、HTML で作成されたリストやテーブルのスタイリング方法について学びます。リストとテーブルは、ウェブページの情報を整理して表示するために非常に重要な要素です。CSS を使用して、これらの要素を見栄え良く、使いやすくする方法を学びましょう。

8.1 リストのスタイリング

リストには、順序付きリスト（<ol>タグ）と順序なしリスト（<ul>タグ）があります。CSS を使ってリストアイテムのデザインを改善する方法を学びます。

8.1.1 基本的なリストのスタイリング

以下は、基本的なリストをスタイリングする例です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>リストのスタイリング</title>
    <style>
      ul {
        list-style-type: disc;
        margin: 0;
        padding: 0;
      }
      ol {
        list-style-type: decimal;
        margin: 0;
        padding: 0;
      }
      li {
        margin-bottom: 5px;
        padding: 10px;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h2>順序なしリスト</h2>
    <ul>
      <li>アイテム 1</li>
      <li>アイテム 2</li>
      <li>アイテム 3</li>
    </ul>

    <h2>順序ありリスト</h2>
    <ol>
      <li>項目 1</li>
      <li>項目 2</li>
      <li>項目 3</li>
    </ol>
  </body>
</html>

8.1.2 カスタムリストアイコン

デフォルトのリストアイコンをカスタムアイコンに変更することもできます。以下はその例です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>カスタムリストアイコン</title>
    <style>
      ul.custom {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      ul.custom li {
        background: url("custom-icon.png") no-repeat left center;
        padding: 5px 0 5px 40px;
      }
    </style>
  </head>
  <body>
    <h2>カスタムリストアイコン</h2>
    <ul class="custom">
      <li>カスタムアイテム 1</li>
      <li>カスタムアイテム 2</li>
      <li>カスタムアイテム 3</li>
    </ul>
  </body>
</html>

8.2 テーブルのスタイリング

テーブルは、データを整理して表示するために使用されます。CSS を使ってテーブルを見やすくする方法を学びましょう。

8.2.1 基本的なテーブルのスタイリング

以下は、基本的なテーブルをスタイリングする例です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>テーブルのスタイリング</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th,
      td {
        border: 1px solid #ccc;
        padding: 10px;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
      }
    </style>
  </head>
  <body>
    <h2>基本的なテーブル</h2>
    <table>
      <thead>
        <tr>
          <th>ヘッダー1</th>
          <th>ヘッダー2</th>
          <th>ヘッダー3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ1</td>
          <td>データ2</td>
          <td>データ3</td>
        </tr>
        <tr>
          <td>データ4</td>
          <td>データ5</td>
          <td>データ6</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

8.2.2 交互の行の色付け

テーブルの行ごとに異なる背景色を付けることで、読みやすさを向上させることができます。以下はその例です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>交互行の色付け</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th,
      td {
        border: 1px solid #ccc;
        padding: 10px;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
      }
      tbody tr:nth-child(odd) {
        background-color: #e9e9e9;
      }
    </style>
  </head>
  <body>
    <h2>交互行の色付け</h2>
    <table>
      <thead>
        <tr>
          <th>ヘッダー1</th>
          <th>ヘッダー2</th>
          <th>ヘッダー3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ1</td>
          <td>データ2</td>
          <td>データ3</td>
        </tr>
        <tr>
          <td>データ4</td>
          <td>データ5</td>
          <td>データ6</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

8.3 まとめ

この章では、リストとテーブルのスタイリング方法について学びました。基本的なスタイリング方法から、カスタムアイコンの使用、そしてテーブルの交互行の色付けまで取り上げました。実際にコードを試して、理解を深めてください。次の章では、CSS の他の重要なトピックについて学習を続けます。