立体的に表示する3Dツールチップを作る方法
立体的に表示する3Dツールチップを作る方法を紹介します。このサンプルではHTMLとCSSを使用し、ボタンへマウスカーソルを合わせると、ボタンの上側に説明文を入れたツールチップを表示します。通常の平面的な吹き出しではなく、背景のグラデーションや下方向の厚み、影を組み合わせることで、手前へ浮き出したように見える立体的なツールチップにしています。
ツールチップは最初は非表示になっており、ボタンへマウスカーソルを合わせると奥側から手前へ起き上がるように表示されます。表示時には吹き出し本体だけでなく、下側の三角形にも厚みを付けているため、吹き出し全体がひとつの立体的なパーツとして見えるデザインです。カーソルをボタンから外すと自動的に非表示へ戻り、キーボードでボタンへフォーカスした場合にも表示できます。
HTMLではボタンの文字やツールチップ内の説明文を変更できます。CSSでは吹き出しの背景色、厚み、影、角丸、横幅、ボタンとの間隔、奥行き、表示時の移動距離やアニメーション時間などを調整できます。JavaScriptを使用せずCSSだけで表示状態を切り替えており、画面幅が狭い場合にはツールチップの最大横幅や余白も調整されるため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンへマウスカーソルを合わせると、立体的な吹き出しが手前へ現れます。
ボタンへマウスカーソルを合わせると、吹き出しが奥から手前へ現れます。カーソルを外すと自動で非表示になります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>立体的に表示する3Dツールチップ</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ツールチップ全体 -->
<div class="three-dimensional-tooltip_wrap">
<!-- タイトル -->
<div class="three-dimensional-tooltip_title">
立体的に表示する3Dツールチップ
</div>
<!-- 説明文 -->
<p class="three-dimensional-tooltip_text">
ボタンへマウスカーソルを合わせると、立体的な吹き出しが手前へ現れます。
</p>
<!-- ツールチップ表示エリア -->
<div class="three-dimensional-tooltip_area">
<!-- ボタン -->
<button class="three-dimensional-tooltip_button" type="button">
ボタン
</button>
<!-- ツールチップ -->
<div class="three-dimensional-tooltip_message">
ここに説明文を表示します。
</div>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではタイトル、説明文、ボタン、ツールチップに表示する文章を作成し、CSSではボタンのデザイン、ツールチップの位置、色、厚み、影、3D変形、表示アニメーションを設定します。JavaScriptは使用せず、マウスオーバーとフォーカス時の表示切り替えもCSSだけで行います。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはツールチップ全体を構成するファイルです。タイトル、説明文、ボタンの文字、ツールチップ内に表示する説明文を変更できます。ボタンとツールチップは同じ表示エリア内へ配置されており、ボタンへマウスカーソルを合わせたときに上側へツールチップが表示されます。
style.cssはツールチップ全体のデザインと表示動作を設定するファイルです。全体の横幅や余白、ボタンの色や角丸、ツールチップの背景色、横幅、厚み、影、表示位置、奥行き、傾き、拡大率、アニメーション速度などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたボタンへマウスカーソルを合わせると、ボタンの上側へ立体的なツールチップが表示されます。カーソルを外すと自動的に非表示へ戻ります。キーボード操作でボタンへフォーカスした場合もツールチップが表示されます。
カスタマイズできる内容
index.htmlでは「立体的に表示する3Dツールチップ」のタイトル、説明文、「ボタン」の文字、ツールチップ内の「ここに説明文を表示します。」を変更できます。用途に合わせて、操作方法、補足説明、用語説明などの文章へ変更できます。
style.cssでは全体の横幅や背景色、余白、ボタンの色、文字サイズ、角丸を変更できます。ツールチップでは背景のグラデーション、枠線、横幅、内側余白、文字サイズ、角丸、厚み、影、ボタンとの距離を変更できます。また、perspective、translateZ()、rotateX()、scale()を調整すると、奥行きや傾き、表示時の立体感を変更できます。
数値調整
style.css
max-width:700px;
ツールチップ全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:36px 32px 46px;
全体の内側余白です。上36px、左右32px、下46pxをそれぞれ変更すると、内容と外枠との間隔が変わります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
margin:0 0 44px;
説明文とボタンの間隔です。44pxを大きくすると間隔が広がり、小さくすると近くなります。
perspective:700px;
3D変形の遠近感を設定する値です。値を小さくすると奥行きの変化が強く見え、大きくすると遠近感が穏やかになります。
padding:14px 30px;
ボタンの内側余白です。上下14pxを大きくすると高さが増え、左右30pxを大きくすると横幅が広がります。
bottom:calc(100% + 18px);
ボタンとツールチップの間隔です。18pxを大きくするとツールチップがボタンから上方向へ離れ、小さくすると近づきます。
max-width:280px;
ツールチップの最大横幅です。値を大きくすると長い文章を横に広く表示でき、小さくするとコンパクトになります。
padding:12px 18px;
ツールチップ内側の余白です。上下12px、左右18pxを変更すると文字と外枠の間隔が変わります。
border-radius:10px;
ツールチップの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
translateZ(-90px)
非表示時にツールチップを奥側へ移動する距離です。マイナス値を大きくすると、より奥から現れるように見えます。
rotateX(-110deg)
非表示時のX軸方向の傾きです。角度を変更すると、表示前のツールチップの傾き方が変わります。
scale(.72)
非表示時の大きさです。0.72は72%の大きさを表します。値を小さくするとより小さい状態から現れ、1へ近づけると大きさの変化が弱くなります。
box-shadow:0 8px 0 #020617, ...
ツールチップ下側の厚みと影です。8pxを大きくすると厚みが強く見え、小さくすると薄く見えます。
transform .55s ...
3D変形にかかる時間です。0.55秒で変化します。値を大きくするとゆっくり、小さくすると速く表示されます。
opacity .4s ease
透明度が変化する時間です。0.4秒でフェードします。値を大きくするとゆっくり、小さくすると速く切り替わります。
translateZ(35px)
表示時にツールチップを手前へ移動する距離です。値を大きくすると手前へ飛び出した印象が強くなり、小さくすると控えめになります。
width:14px;、height:14px;
ツールチップ下部の吹き出し部分の大きさです。値を大きくすると先端部分が大きくなり、小さくすると小さくなります。
box-shadow:5px 5px 0 #020617;
吹き出し部分の厚みです。5pxを大きくすると立体感が強くなり、小さくすると薄く見えます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせて全体が縮小されます。また、640px以下ではpadding:28px 18px 38px;へ変更して左右の余白を抑え、ツールチップの最大横幅を220pxへ変更しています。さらにwhite-space:normal;へ切り替えて長い文章を折り返せるため、スマートフォン・タブレット・PCで利用できます。
コメント