表組
概要
※リストのデザインについては、適時SCSS（_module.scss）を改変してください。
デザイン
以下はサンプルです。用途を定めてデザインしてください。
TYPE A
[上部に項目を設置] 用途：案件ごとに設定してデザインしてください。
| 見出し | 見出し | 見出し | 見出し | 見出し |
|---|---|---|---|---|
| 内容テキスト | 内容テキスト | 内容テキスト | 内容テキスト | 内容テキスト |
| 内容テキスト | 内容テキスト | 内容テキスト | 内容テキスト | 内容テキスト |
| 内容テキスト | 内容テキスト | 内容テキスト | 内容テキスト | 内容テキスト |
<div class="tableWrap">
<table class="typeA">
<caption>表キャプション</caption>
<thead>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
</tr>
<tr>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
</tr>
</tbody>
</table>
</div>
TYPE B
[上部に項目を設置] 用途：案件ごとに設定してデザインしてください。
| 見出し | 見出し | 見出し | 見出し | 見出し |
|---|---|---|---|---|
| 内容テキスト | 内容テキスト | 内容テキスト | 内容テキスト | 内容テキスト |
| 内容テキスト | 内容テキスト | 内容テキスト | 内容テキスト | 内容テキスト |
| 内容テキスト | 内容テキスト | 内容テキスト | 内容テキスト | 内容テキスト |
<div class="tableWrap">
<table class="typeB">
<thead>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
</tr>
<tr>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
</tr>
</tbody>
</table>
</div>
TYPE C
[サイドに項目を設置] 用途：案件ごとに設定してデザインしてください。
| 見出し | 内容テキスト |
|---|---|
| 見出し | 内容テキスト |
| 見出し | 内容テキスト |
<div class="tableWrap">
<table class="typeC">
<tr>
<th scope="row">見出し</th>
<td>内容テキスト</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>内容テキスト</td>
</tr>
</table>
</div>
TYPE D
[上部に項目、サイドにサブ項目を設置] 用途：案件ごとに設定してデザインしてください。
| 見出し | 見出し | 見出し | 見出し | 見出し |
|---|---|---|---|---|
| 項目 | 内容テキスト | 内容テキスト | 内容テキスト | 内容テキスト |
| 項目 | 内容テキスト | 内容テキスト | 内容テキスト | 内容テキスト |
| 項目 | 内容テキスト | 内容テキスト | 内容テキスト | 内容テキスト |
<div class="tableWrap">
<table class="typeD">
<thead>
<tr>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
<th scope="col">見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">項目</th>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
</tr>
<tr>
<th scope="row">項目</th>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
<td>内容テキスト</td>
</tr>
</tbody>
</table>
</div>
キャプションルール
| 用途 | レベル | 内容 |
|---|---|---|
| 比較表 | 必須 | プラン比較・機能比較・料金比較など |
| データ表 | 推奨 | 売上推移・一覧データ・数値データなど |
改変対象ファイル
- CSS:
- _modules.scss 内に改変対象箇所があります。