行とセルが2段階で浮き上がる立体テーブルを作る方法
行とセルが2段階で浮き上がる立体テーブルを作る方法を紹介します。このサンプルではHTMLとCSSを使用し、一覧表の各データ行へマウスカーソルを合わせると行全体が浮き上がり、さらに個別のセルへカーソルを合わせると、そのセルだけがもう一段階手前へ浮き上がるテーブルを作成します。通常の平面的な表とは異なり、影やグラデーションを組み合わせることで立体感のある見た目にしています。
テーブルには「名前」「部署」「役職」の3列を用意し、各行をカードのように分離して表示します。通常時から各行の下側へ厚みを感じる影を付け、行へマウスオーバーすると上方向へ移動して1段階目の浮き上がりを表現します。その状態でセルへカーソルを合わせると、対象セルだけがさらに上方向へ移動し、背景色と影も変化するため、現在見ているデータを視覚的に確認しやすくなります。
HTMLでは見出しや各セルの表示内容を変更でき、CSSではテーブル全体の横幅、行同士の間隔、セルの余白、背景色、角丸、影、浮き上がる距離、アニメーション速度などを調整できます。画面幅が狭い場合はテーブル部分を横方向へスクロールでき、640px以下ではセルの余白と文字サイズも小さくなるため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
行へマウスカーソルを合わせると1段階浮き上がり、セルへ合わせるとさらにもう1段階浮き上がります。
| 名前 | 部署 | 役職 |
|---|---|---|
| 山田 太郎 | 営業部 | 主任 |
| 佐藤 花子 | 総務部 | 担当 |
| 鈴木 一郎 | 開発部 | リーダー |
行全体が少し浮き上がったあと、カーソルを合わせたセルだけがさらに手前へ浮き上がります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>行とセルが2段階で浮き上がる立体テーブル</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- テーブル全体 -->
<div class="three-dimensional-table_wrap">
<!-- タイトル -->
<div class="three-dimensional-table_title">
2段階で浮き上がる立体テーブル
</div>
<!-- 説明文 -->
<p class="three-dimensional-table_text">
行へマウスカーソルを合わせると1段階浮き上がり、セルへ合わせるとさらにもう1段階浮き上がります。
</p>
<!-- テーブル表示エリア -->
<div class="three-dimensional-table_area">
<!-- 一覧表 -->
<table class="three-dimensional-table">
<!-- 見出し行 -->
<thead>
<tr>
<th>名前</th>
<th>部署</th>
<th>役職</th>
</tr>
</thead>
<!-- データ行 -->
<tbody>
<tr>
<td>山田 太郎</td>
<td>営業部</td>
<td>主任</td>
</tr>
<tr>
<td>佐藤 花子</td>
<td>総務部</td>
<td>担当</td>
</tr>
<tr>
<td>鈴木 一郎</td>
<td>開発部</td>
<td>リーダー</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは「名前」「部署」「役職」の3列を持つテーブルを作成し、CSSではヘッダーや各データ行の色、影、角丸、行同士の間隔、マウスオーバー時の浮き上がりを設定します。行へマウスカーソルを合わせると行全体が1段階浮き上がり、そのまま個別のセルへ合わせると対象セルだけがさらにもう1段階浮き上がります。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはテーブル全体を構成するファイルです。タイトル、説明文、列見出し、各行の「名前」「部署」「役職」の内容を変更できます。行や列を追加したい場合も、theadやtbody内のtr、th、tdを編集して表示内容を調整できます。
style.cssはテーブル全体のデザインと浮き上がる動きを設定するファイルです。全体の横幅や余白、ヘッダーの色、各行の背景色、行同士の間隔、角丸、影、行とセルが浮き上がる距離、アニメーション速度などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたデータ行へマウスカーソルを合わせると行全体が上方向へ浮き上がります。その状態で各セルへカーソルを合わせると、対象セルだけがさらに上方向へ浮き上がります。
カスタマイズできる内容
index.htmlでは「2段階で浮き上がる立体テーブル」のタイトル、説明文、「名前」「部署」「役職」の列見出し、各セルの表示内容を変更できます。tbody内のtrを追加するとデータ行を増やすことができ、各tr内のtdを編集すると表示する内容を変更できます。
style.cssではテーブル全体の最大横幅、内側余白、背景色、ヘッダーのグラデーション、各行の背景色、セルの文字色、角丸、影を変更できます。また、行とセルに設定しているtranslateY()を変更すると浮き上がる距離を調整でき、transitionを変更すると動きの速さを調整できます。
数値調整
style.css
max-width:760px;
テーブル全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
テーブル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:36px 32px 48px;
テーブル全体の内側余白です。上36px、左右32px、下48pxを変更すると、内容と外枠との間隔が変わります。
border-radius:18px;
テーブル全体を囲む部分の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
min-width:560px;
テーブル本体の最小横幅です。画面幅が560pxより狭い場合は、表示エリア内で横方向へスクロールして確認できます。
border-spacing:0 12px;
各データ行同士の縦方向の間隔です。12pxを大きくすると行同士の間隔が広がり、小さくすると近づきます。
padding:15px 18px;
見出しセルとデータセルの内側余白です。上下15pxを大きくすると行が高くなり、左右18pxを大きくすると文字とセル端の間隔が広がります。
border-bottom:5px solid #1e40af;
ヘッダー下側の厚みです。5pxを大きくするとヘッダーの立体感が強くなり、小さくすると薄く見えます。
drop-shadow(0 5px 0 #cbd5e1)
通常時のデータ行に付ける厚みです。5pxを大きくすると行の厚みが強く見え、小さくすると控えめになります。
transform:translateY(-5px);
行へマウスカーソルを合わせたときに上方向へ移動する距離です。5pxを大きくすると1段階目の浮き上がりが強くなり、小さくすると控えめになります。
drop-shadow(0 10px 0 #bfdbfe)
浮き上がった行の下側に表示する厚みです。10pxを大きくすると行がより高く浮いているように見えます。
transform:translateY(-4px);
セルへマウスカーソルを合わせたときに、浮き上がった行からさらに上方向へ移動する距離です。4pxを大きくすると2段階目の浮き上がりが強くなり、小さくすると控えめになります。
box-shadow:0 4px 0 #93c5fd, ...
浮き上がったセルの下側に付ける厚みと影です。4pxを大きくするとセルの厚みが強く見えます。
transition:transform .2s ease, filter .2s ease;
行が浮き上がる動きにかかる時間です。0.2秒で変化します。値を大きくするとゆっくり、小さくすると速く動きます。
transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
セルの移動、背景色、影が切り替わる時間です。0.2秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:760pxにより、画面幅に合わせてテーブル全体が縮小されます。テーブル本体にはmin-width:560pxを設定し、表示エリアへoverflow-x:auto;を指定しているため、横幅が足りない場合は横方向へスクロールして確認できます。また、640px以下では全体の余白を28px 18px 38pxへ変更し、セルの余白を13px 14px、文字サイズを14pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント