テーブル（表）装飾
アフィリエイトリンク(広告)がありますのでご了承ください。
※ 下記のCSSはそのままコピーしてご利用いただけます。 他テーマでも使用可能です。
Lilac Bloom テーブルデザイン集（全10種）
情報を整理するための表デザインです。用途に合わせてクラスを使い分けてください。
💡 共通のベースCSS
すべての表の土台として、以下のCSSを必ず記述してください。
[title]テーブル共通ベース設定[/title]
table[class^="lb-table"] {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 0.95em;
}
table[class^="lb-table"] th,
table[class^="lb-table"] td {
padding: 12px 15px;
border: 1px solid #e0d5f5;
}
1. スッキリ横縞（ゼブラ）
| 項目 |
詳細 |
| OS |
Windows 11 |
| CPU |
Core i7 |
| メモリ |
16GB |
[title]HTML: ゼブラ[/title]
<table class="lb-table-zebra">
<thead><tr><th>項目</th><th>詳細</th></tr></thead>
<tbody>
<tr><td>OS</td><td>Windows 11</td></tr>
<tr><td>CPU</td><td>Core i7</td></tr>
<tr><td>メモリ</td><td>16GB</td></tr>
</tbody>
</table>
[title]CSS: ゼブラ[/title]
.lb-table-zebra thead {
background: #bd93f9;
color: #fff;
}
.lb-table-zebra tr:nth-child(even) {
background: #f9f5ff;
}
2. 左側に見出し（スペック表用）
| 商品名 |
Lilac Theme Pro |
| 価格 |
¥9,800 |
| ライセンス |
1サイト |
[title]HTML: 左見出し[/title]
<table class="lb-table-left-head">
<tr><th>商品名</th><td>Lilac Theme Pro</td></tr>
<tr><th>価格</th><td>¥9,800</td></tr>
<tr><th>ライセンス</th><td>1サイト</td></tr>
</table>
[title]CSS: 左見出し[/title]
.lb-table-left-head th {
background: #f1e9ff;
color: #6a5acd;
width: 30%;
text-align: left;
}
3. 料金プラン比較（おすすめ強調）
| プラン |
ライト |
プロ |
| サポート |
メール |
24時間 |
| 価格 |
無料 |
¥1,000 |
[title]HTML: 料金プラン[/title]
<table class="lb-table-plan">
<thead><tr><th>プラン</th><th>ライト</th><th class="recommend">プロ</th></tr></thead>
<tbody>
<tr><td>サポート</td><td>メール</td><td>24時間</td></tr>
<tr><td>価格</td><td>無料</td><td>¥1,000</td></tr>
</tbody>
</table>
[title]CSS: 料金プラン[/title]
.lb-table-plan th {
background: #eee;
}
.lb-table-plan th.recommend {
background: #6a5acd;
color: #fff;
position: relative;
}
.lb-table-plan .recommend {
background: #fdfbff;
border: 2px solid #6a5acd;
}
4. 下線のみのモダンデザイン
| 日付 |
予定 |
| 1月1日 |
ブログ開設 |
| 2月1日 |
10記事達成 |
[title]HTML: 下線のみ[/title]
<table class="lb-table-line">
<thead><tr><th>日付</th><th>予定</th></tr></thead>
<tbody>
<tr><td>1月1日</td><td>ブログ開設</td></tr>
<tr><td>2月1日</td><td>10記事達成</td></tr>
</tbody>
</table>
[title]CSS: 下線のみ[/title]
.lb-table-line, .lb-table-line th, .lb-table-line td {
border: none !important;
border-bottom: 1px solid #e0d5f5 !important;
}
.lb-table-line th {
text-align: left;
border-bottom: 2px solid #bd93f9;
}
5. 丸角・背景塗り（リスト風）
[title]HTML: 丸角リスト風[/title]
<table class="lb-table-round">
<tr><td>特典1</td><td>限定マニュアル</td></tr>
<tr><td>特典2</td><td>優先サポート</td></tr>
</table>
[title]CSS: 丸角リスト風[/title]
.lb-table-round {
border: none !important;
}
.lb-table-round td {
border: none;
background: #f8f6fc;
border-radius: 8px;
margin-bottom: 5px;
display: block;
margin-top: 5px;
}
6. 縦線強調・中央寄せ
| 時間 |
内容 |
| 10:00 |
執筆開始 |
| 12:00 |
休憩 |
[title]CSS: 縦線強調[/title]
<table class="lb-table-vertical">
<thead><tr><th>時間</th><th>内容</th></tr></thead>
<tbody>
<tr><td>10:00</td><td>執筆開始</td></tr>
<tr><td>12:00</td><td>休憩</td></tr>
</tbody>
</table>
[title]CSS: 縦線強調[/title]
.lb-table-vertical th {
border-left: 2px solid #bd93f9 !important;
border-right: 2px solid #bd93f9 !important;
}
.lb-table-vertical td {
border-left: 2px solid #bd93f9 !important;
border-right: 2px solid #bd93f9 !important;
text-align: center;
}
7. ドット区切り（かわいい系）
[title]HTML: ドット区切り[/title]
<table class="lb-table-dot">
<tr><th>材料</th><td>ライラックの種</td></tr>
<tr><th>時間</th><td>3ヶ月</td></tr>
</table>
[title]CSS: ドット区切り[/title]
.lb-table-dot, .lb-table-dot th, .lb-table-dot td {
border: none !important;
border-bottom: 1px dotted #bd93f9 !important;
}
.lb-table-dot th {
color: #bd93f9;
text-align: left;
}
8. 行ハイライト（マウス反応）
[title]HTML: ホバー反応[/title]
<table class="lb-table-hover">
<thead><tr><th>No.</th><th>タイトル</th></tr></thead>
<tbody>
<tr><td>1</td><td>記事A</td></tr>
<tr><td>2</td><td>記事B</td></tr>
</tbody>
</table>
[title]CSS: ホバー反応[/title]
.lb-table-hover tbody tr:hover {
background: #f1e9ff;
cursor: pointer;
}
9. 浮き出しカード表
[title]HTML: カード型[/title]
<div class="lb-table-card-wrap">
<table class="lb-table-card">
<tr><th>重要度</th><td>★★★★★</td></tr>
<tr><td>詳細</td><td>この表は目立ちます</td></tr>
</table>
</div>
[title]CSS: カード型[/title]
.lb-table-card-wrap {
padding: 10px; background: #fff;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border-radius: 12px;
}
.lb-table-card, .lb-table-card td, .lb-table-card th {
border: none;
}
10. スマホ対応・横スクロール表
[title]HTML: 横スクロール[/title]
<div class="lb-table-scroll">
<table>
<thead><tr><th>機能</th><th>無料版</th><th>有料版</th><th>法人版</th></tr></thead>
<tbody>
<tr><td>AI代行</td><td>不可</td><td>可</td><td>無制限</td></tr>
<tr><td>容量</td><td>1GB</td><td>100GB</td><td>1TB</td></tr>
</tbody>
</table>
</div>
[title]CSS: 横スクロール[/title]
.lb-table-scroll {
overflow-x: auto; width: 100%;
white-space: nowrap; -webkit-overflow-scrolling: touch;
}
.lb-table-scroll table {
min-width: 500px;
}
.lb-table-scroll thead {
background: #333;
color: #fff;
}
💡 調整のコツ
色は #bd93f9（標準的なライラック）を使用しています。サイトのロゴやメインカラーに合わせて、これらのカラーコードを書き換えるだけで、独自のブランドカラーに統一できます。
