9.1 スクロール
テーブルは構造化されたデータを表示するためによく使用されるけど、小さい画面のデバイスでは表示が難しい場合があるよね。レスポンシブテーブルは、モバイル電話やタブレットなど様々なデバイスでのデータの理解と操作を改善するんだ。いくつかのテクニックで応答性の高いテーブルを作成する方法を見てみよう。
レスポンシブテーブルを作成するシンプルな方法のひとつは、水平スクロールを追加すること。これにより、テーブルの構造を維持しながら、狭い画面でデータを水平にスクロールできるようになるんだ。
例:
CSS
.table-container {
overflow-x: auto;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
HTML
<!DOCTYPE html>
<html lang="en">
<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>
<div class="table-container">
<table>
<thead>
<tr>
<th>カラム 1</th>
<th>カラム 2</th>
<th>カラム 3</th>
<th>カラム 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ 1</td>
<td>データ 2</td>
<td>データ 3</td>
<td>データ 4</td>
</tr>
<!-- 他の行 -->
</tbody>
</table>
</div>
</body>
</html>
コードの説明:
.table-container: テーブルがコンテナの幅を超える場合に水平スクロールを追加するtable: テーブルの幅を100%にして、セルの境界を一体化する
9.2 カラムの隠蔽
この方法は、狭い画面で重要でないカラムを隠し、主要なデータを見やすくすることを提案するんだよ。メディアクエリを使ってこれを行うことができるんだ。
例:
CSS
@media (max-width: 600px) {
.hide {
display: none;
}
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
HTML
<!DOCTYPE html>
<html lang="en">
<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>
<thead>
<tr>
<th>カラム 1</th>
<th>カラム 2</th>
<th class="hide">カラム 3</th>
<th class="hide">カラム 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ 1</td>
<td>データ 2</td>
<td class="hide">データ 3</td>
<td class="hide">データ 4</td>
</tr>
<!-- 他の行 -->
</tbody>
</table>
</body>
</html>
コードの説明:
.hide: 幅600px未満の画面で特定のカラムをメディアクエリを使って隠すtable: テーブルの幅を100%にして、セルの境界を一体化する
9.3 ブロックにスタッキング
ブロックにスタッキングは、テーブルの行をブロックに変え、狭い画面ではそれを上下に並べ表示する方法なんだ。モバイルデバイスでのテーブルの可読性を向上させるよ。
例:
CSS
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
td {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
td::before {
content: attr(data-label);
font-weight: bold;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<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>
<thead>
<tr>
<th>カラム 1</th>
<th>カラム 2</th>
<th>カラム 3</th>
<th>カラム 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="カラム 1">データ 1</td>
<td data-label="カラム 2">データ 2</td>
<td data-label="カラム 3">データ 3</td>
<td data-label="カラム 4">データ 4</td>
</tr>
<!-- 他の行 -->
</tbody>
</table>
</body>
</html>
コードの説明:
- メディアクエリ: 幅600px未満の画面でテーブルをブロック要素に変換する
td::before: データのコンテキストを保持するために各セルの値の前にカラムの名前を追加する疑似要素を生成する
9.4. カードレイアウトへの変換
この方法は、狭い画面で各テーブル行を個別のカードに変換することなんだ。モバイルデバイスでデータの可読性を向上させるんだよ。
例:
CSS
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
tr {
margin-bottom: 10px;
border-bottom: 2px solid #ccc;
padding-bottom: 10px;
}
td {
display: flex;
justify-content: space-between;
padding: 10px 0;
border: none;
}
td::before {
content: attr(data-label);
font-weight: bold;
margin-right: 10px;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<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>
<thead>
<tr>
<th>カラム 1</th>
<th>カラム 2</th>
<th>カラム 3</th>
<th>カラム 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="カラム 1">データ 1</td>
<td data-label="カラム 2">データ 2</td>
<td data-label="カラム 3">データ 3</td>
<td data-label="カラム 4">データ 4</td>
</tr>
<!-- 他の行 -->
</tbody>
</table>
</body>
</html>
コードの説明:
- メディアクエリ: 幅600px未満の画面でテーブルをブロック要素に変え、カードを作成する
td::before: データのコンテキストを保持するため、各セルの値の前にカラムの名前を追加する疑似要素を生成する
9.5 CSS Frameworksの利用
Bootstrapのような多くのCSSフレームワークは、レスポンシブテーブルを作成するための組み込みのソリューションを提供しているんだ。こうしたフレームワークを利用すると、プロセスが簡略化され、準備済みのスタイルやコンポーネントが提供されるんだ。
Bootstrapを使用した例:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrapを使ったレスポンシブテーブル</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-responsive">
<thead>
<tr>
<th>カラム 1</th>
<th>カラム 2</th>
<th>カラム 3</th>
<th>カラム 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ 1</td>
<td>データ 2</td>
<td>データ 3</td>
<td>データ 4</td>
</tr>
<!-- 他の行 -->
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
コードの説明:
table.table-responsive: 幅の狭い画面でテーブルに水平スクロールを追加するBootstrapのクラスcontainer: コンテナを中央に配置し、最大幅を設定するためのBootstrapのクラス
GO TO FULL VERSION