見出し画像

CSSの基本　テーブル編

SynergySolo

イントロダクション

ウェブページでデータを視覚的に整理する際に、テーブルは非常に便利なツールです。しかし、デフォルトのテーブルスタイルはシンプルで、視覚的な魅力に欠けることがあります。そこでCSS（Cascading Style Sheets）を使用して、テーブルの見た目をカスタマイズすることで、情報をわかりやすく、美しく表示することができます。今回の解説では、HTMLで定義された基本的なテーブル構造を元に、CSSを使ってどのようにスタイルを適用し、プロフェッショナルで魅力的なテーブルを作成するかを学びます。テーブルの見出しやセルのスタイル、背景色の設定など、基本的なCSSプロパティを用いた具体的な方法を一緒に見ていきましょう。

今回のテーブルサンプル

今回はこんな感じの動物のぬいぐるみをテーブルで示すものを作ります。

HTML構造の簡単な説明

このHTMLコードでは、テーブルを作成しています。HTMLの基本構造を理解するために、まずこの部分を簡単に説明します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
      rel="stylesheet"
    />
    <title>Table</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>ぬいぐるみ</th>
          <th>テディちゃん</th>
          <th>ワンちゃん</th>
          <th>エレちゃん</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>画像</th>
          <td><img src="teddy.jpg" /></td>
          <td><img src="dog.jpg" /></td>
          <td><img src="elephant.jpg" /></td>
        </tr>
        <tr>
          <th>特徴</th>
          <td>かわいい😍</td>
          <td>かわいい😊</td>
          <td>かわいい😆</td>
        </tr>
        <tr>
          <th>高さ</th>
          <td>90cm</td>
          <td>80cm</td>
          <td>100cm</td>
        </tr>
        <tr>
          <th>重さ</th>
          <td>900g</td>
          <td>800g</td>
          <td>1kg</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

  • <!DOCTYPE html>: HTML5の宣言です。

  • <html lang="en">: 文書の言語を指定します。

  • <head>: メタ情報（文字コードやビューポート設定、外部スタイルシートのリンクなど）が含まれています。

  • <body>: 実際に表示されるコンテンツが入っています。この中にテーブルがあります。

テーブルの各要素 (<table>, <thead>, <tbody>, <tr>, <th>, <td>) は、行や列、見出しセルやデータセルを定義しています。ここでは、ぬいぐるみの名前、画像、特徴、高さ、重さを表示しています。

CSSの構造

リセット

CSSはHTML要素の見た目をコントロールするために使われます。まず、全ての要素に対して基本的なリセットを行います。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

  • *: 全てのHTML要素に適用されます。

  • marginとpaddingを0にすることで、ブラウザのデフォルトスタイルをリセットします。

  • box-sizing: border-boxで、パディングとボーダーを含む幅と高さの計算を容易にします。

次に、全体のフォントや色を設定します。

body {
  font-family: "Inter", sans-serif;
  color: #4d4b4b;
  display: flex;
  justify-content: center;
}

  • font-family: Google Fontsから読み込んだ「Inter」を使用します。

  • color: テキストの色をグレーに設定します。

  • display: flexとjustify-content: centerで、コンテンツを中央に配置します。

テーブルスタイルの詳細

次に、テーブルやその中の要素のスタイルを設定します。

table {
  width: 1200px;
  border: 1px solid #343a40;
  border-collapse: collapse;
  font-size: 18px;
}

  • width: テーブルの幅を1200pxに設定します。

  • borderとborder-collapse: テーブルとセルの境界線を設定し、重なりを防ぎます。

  • font-size: テキストのサイズを18pxに設定します。

th,
td {
  border: 1px solid #343a40;
  padding: 16px 24px;
  text-align: left;
}

  • thとtd: テーブルヘッダーとデータセルに共通のスタイルを適用します。

  • padding: セル内の余白を設定します。

  • text-align: テキストを左揃えにします。

th {
  text-align: center;
}

  • ヘッダーセルのテキストを中央揃えにします。

ヘッダーと行のスタイル

最後に、テーブルのヘッダーや奇数・偶数行のスタイルを設定します。

thead th {
  background-color: #ffd175;
  color: #fff;
  width: 25%;
}

  • ヘッダーセルの背景色とテキスト色を設定します。

  • ヘッダーセルの幅を25%にします。

tbody tr:nth-child(odd) {
  background-color: #fef4cb;
}
tbody tr:nth-child(even) {
  background-color: #fffef3;
}

  • 奇数行と偶数行に異なる背景色を設定し、視認性を向上させます。

このように、CSSを使ってHTMLテーブルの見た目をカスタマイズする方法を学びました。CSSの基本的なプロパティを理解し、柔軟にスタイルを設定できるようになると、より魅力的なウェブページを作成することができます。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！

いいなと思ったら応援しよう！