テーブルを半透明にするCSSジェネレーター
背景が透けて見える、スタイリッシュな半透明（透過）テーブルのCSSを生成します。文字色、背景色、透過度を自在に調整して、デザインにマッチするテーブルコードを作成できます。
プレビュー
<table class="transparent-table">
<thead>
<tr>
<th>項目</th>
<th>詳細</th>
<th>数値</th>
</tr>
</thead>
<tbody>
<tr>
<td>データA</td>
<td>説明文が入ります</td>
<td>1,200</td>
</tr>
<tr>
<td>データB</td>
<td>説明文が入ります</td>
<td>2,500</td>
</tr>
<tr>
<td>データC</td>
<td>説明文が入ります</td>
<td>3,800</td>
</tr>
</tbody>
</table>.transparent-table {
width: 100%;
border-collapse: collapse;
color: {{text_color}};
background-color: {{rgba_bg}};
border: 1px solid rgba(255, 255, 255, 0.2);
}
.transparent-table th,
.transparent-table td {
padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
text-align: left;
}
.transparent-table th {
background-color: rgba(255, 255, 255, 0.1);
font-weight: bold;
}機能、使い方
- 背景が透けて見える、モダンな半透明テーブルのCSSを生成します。
- 透過度を調整することで、背後の画像やグラデーションを活かしたデザインが可能です。
- 文字色と背景色の組み合わせをリアルタイムにプレビュー確認できます。
border-collapse: collapseを指定することで、セル間の隙間をなくしスタイリッシュに見せています。
アドバイス
背景が暗い画像の場合は背景色を黒系（rgba(0,0,0,0.5)など）に、明るい背景の場合は白系（rgba(255,255,255,0.5)など）に設定すると、文字の視認性が向上します。
さらに高級感を出したい場合は、backdrop-filter: blur(10px);を追加することで、背景をぼかす「グラスモーフィズム」効果を得ることもできます。
