HTMLのテーブルの文字サイズを自動調整する方法

HTML CSS

HTMLのテーブルの文字サイズを自動調整する方法

HTMLのテーブルの文字サイズを自動調整する方法について説明します。
以下では、HTMLとCSSを別ファイルに分けて、クラス名とID名に「test-」というプレフィックスを使用した例を示します。

HTMLファイル（index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>テーブルの文字サイズ自動調整</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <table class="test-table">
    <thead>
      <tr>
        <th class="test-header">見出し1</th>
        <th class="test-header">見出し2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="test-cell">データ1</td>
        <td class="test-cell">データ2</td>
      </tr>
      <tr>
        <td class="test-cell">データ3</td>
        <td class="test-cell">データ4</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

CSSファイル（styles.css）

body {
  font-family: Arial, sans-serif;
}

.test-table {
  width: 100%;
  border-collapse: collapse;
}

.test-header, .test-cell {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.test-table {
  table-layout: auto;
}

.test-header {
  font-size: 1.2em;
}

.test-cell {
  font-size: 1em;
}

/* 自動調整のための設定 */
.test-table {
  font-size: calc(1em + 0.5vw);
}

解説

1. HTMLファイル:

  • table要素にはクラスtest-tableが付与されており、テーブルのスタイルを適用しています。
  • th要素とtd要素にはそれぞれクラスtest-headerとtest-cellが付与されています。

これにより、各セルのスタイルを個別に設定できます。

2. CSSファイル:

  • tableのwidthプロパティを100%に設定してテーブルが親要素の幅に合わせるようにしています。
  • border-collapseプロパティをcollapseにして、テーブルの境界線が重ならないようにしています。
  • font-sizeプロパティをcalc(1em + 0.5vw)に設定しています。

これにより、画面サイズに応じて文字サイズが自動的に調整されます。
1emは基本のフォントサイズ、0.5vwは画面の幅に対する割合で、両方を組み合わせて動的にサイズを変更します。

この方法により、テーブルの文字サイズが画面サイズに応じて適切に自動調整されます。