iframeをツールチップに表示する方法
iframeをツールチップに表示する方法を紹介します。このサンプルでは、ボタンへマウスカーソルを合わせるとツールチップが開き、その中にiframeで指定したWebページを表示します。JavaScriptは使用せず、HTMLのiframe要素とCSSの:hoverを組み合わせて表示・非表示を切り替える基本的な構成です。
外部ページやサイト内の別ページなどを、現在のページから移動せずに確認できる表示として利用できます。通常時はiframeを含むツールチップを非表示にしておき、「ページを確認」ボタンへマウスカーソルを合わせたときだけ表示します。リンクを開く前の内容確認や、補足ページを一時的に表示したい場合などに利用できます。
HTMLではタイトル、説明文、ボタンの文章、iframeで表示するURLを変更できます。CSSではツールチップの横幅、高さ、余白、背景色、角丸、ボタンとの間隔、表示切り替え時間などを調整できます。画面幅が狭い場合はツールチップの横幅とiframeの高さを調整するレスポンシブ対応も行っているため、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンへマウスカーソルを合わせるとiframeを表示します。
「ページを確認」へマウスカーソルを合わせると、ツールチップ内にiframeが表示されます。カーソルを外すと自動で非表示になります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>iframeをツールチップに表示する方法</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- iframeツールチップ全体 -->
<div class="iframe-tooltip_wrap">
<!-- タイトル -->
<div class="iframe-tooltip_title">
iframeをツールチップで表示
</div>
<!-- 説明文 -->
<p class="iframe-tooltip_text">
ボタンへマウスカーソルを合わせるとiframeを表示します。
</p>
<!-- ツールチップ表示エリア -->
<div class="iframe-tooltip_area">
<!-- iframeを表示するボタン -->
<button class="iframe-tooltip_button" type="button">
ページを確認
</button>
<!-- ツールチップ -->
<div class="iframe-tooltip_message">
<!-- iframe表示エリア -->
<div class="iframe-tooltip_frame">
<!--
表示するページのURLを指定します。
YOUR_IFRAME_URL を、iframe内へ表示したい
ページのURLへ置き換えてください。
例：
https://example.com/
iframeでの表示を許可していないWebサイトは
表示できない場合があります。
-->
<iframe
src="YOUR_IFRAME_URL"
title="表示ページ">
</iframe>
</div>
</div>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは「ページを確認」ボタン、ツールチップ、外部ページを表示するiframeを配置し、CSSではツールチップの位置や横幅、背景色、表示・非表示、iframeの表示サイズなどを設定します。ボタンへマウスカーソルを合わせるとCSSの:hoverによってツールチップが表示され、その中でiframeのページを確認できます。JavaScriptや外部ライブラリは使用していません。
iframeへ表示するページはサンプル一式には含まれていません。利用者自身で表示したいページのURLを用意し、index.html内のYOUR_IFRAME_URLへ設定して使用します。なお、Webサイト側の設定によってiframeへの埋め込みが制限されているページは表示できない場合があります。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはiframeツールチップ全体を構成するファイルです。「iframeをツールチップで表示」のタイトル、説明文、「ページを確認」ボタン、ツールチップ、iframeを記述しています。iframeのsrc属性にあるYOUR_IFRAME_URLを、利用者自身が表示したいページのURLへ置き換えて使用します。
style.cssはツールチップ全体のデザインと表示動作を設定するファイルです。サンプル全体の横幅や余白、ボタンの色や角丸、ツールチップの横幅や位置、背景色、iframe表示エリアの高さなどを変更できます。:hoverを使用しているため、JavaScriptを使用せずにマウスカーソルを合わせたときの表示・非表示を切り替えます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。次に、iframe内へ表示したいページのURLを用意してください。index.html内には次のプレースホルダーがあります。
src="YOUR_IFRAME_URL"
YOUR_IFRAME_URLを、iframeへの埋め込みが許可されているページのURLへ置き換えます。例えば表示したいページのURLがhttps://example.com/の場合は、src="https://example.com/"のように設定します。
URLを設定したあと、sample/index.htmlをブラウザで開いてください。「ページを確認」ボタンへマウスカーソルを合わせると、ボタンの上側へツールチップが表示され、その中に指定したページがiframeで表示されます。カーソルをツールチップ表示エリアから外すと自動で非表示になります。
カスタマイズできる内容
index.htmlではタイトル、説明文、「ページを確認」のボタンテキスト、iframeのtitle、表示するページのURLを変更できます。別のページへ変更する場合は、YOUR_IFRAME_URLを表示したいページのURLへ置き換えます。
style.cssではサンプル全体の最大横幅、余白、背景色、ボタンのサイズや色、ツールチップの横幅、ボタンとの間隔、背景色、角丸、iframe表示エリアの高さ、表示切り替え時間などを変更できます。
数値調整
style.css
max-width:700px;
サンプル全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
サンプル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
サンプル全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
サンプル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 30px;
説明文の下側余白です。30pxを大きくするとボタンとの間隔が広がり、小さくすると狭くなります。
padding:14px 30px;
「ページを確認」ボタンの内側余白です。14pxは上下、30pxは左右の余白を表します。値を大きくするとボタンが大きくなります。
border-radius:10px;
ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
bottom:calc(100% + 14px);
ボタンとツールチップの間隔です。14pxを大きくするとツールチップがボタンから上方向へ離れ、小さくすると近づきます。
width:520px;
ツールチップの基本横幅です。値を大きくするとiframeの表示領域が横に広がり、小さくすると狭くなります。
max-width:calc(100vw - 48px);
ツールチップが画面幅を超えて広がることを抑える設定です。48pxは画面幅から差し引く合計値です。
padding:14px;
ツールチップ内部の余白です。値を大きくするとiframeとツールチップ外周との間隔が広がります。
border-radius:12px;
ツールチップの角丸です。値を大きくすると丸みが強くなります。
border:7px solid transparent;
ツールチップ下部に表示する三角形の大きさです。7pxを大きくすると三角形が大きくなり、小さくすると小さくなります。
transition:opacity .3s ease, visibility .3s ease;
ツールチップの表示切り替え時間です。.3sは0.3秒を表します。値を大きくするとゆっくり、小さくすると速く切り替わります。
height:320px;
iframe表示エリアの通常時の高さです。値を大きくすると表示領域が高くなり、小さくすると低くなります。
border-radius:8px;
iframe表示部分の角丸です。値を大きくすると丸みが強くなります。
@media (max-width:640px)
スマートフォン向けのスタイルへ切り替える基準となる画面幅です。640px以下になると全体の内側余白、ツールチップの横幅、iframe表示エリアの高さを変更します。
width:calc(100vw - 64px);
画面幅640px以下で使用するツールチップの横幅です。画面幅から64pxを差し引いたサイズで表示します。
height:260px;
画面幅640px以下で使用するiframe表示エリアの高さです。値を変更するとスマートフォン表示時の表示領域の高さが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてサンプル全体が縮小されます。ツールチップにはmax-width:calc(100vw - 48px)を指定しており、画面幅を超えて横方向へ広がることを抑えています。iframeはwidth:100%でツールチップの横幅に合わせて表示されます。
さらに画面幅640px以下では、全体の内側余白を24px 18px、ツールチップの横幅をcalc(100vw - 64px)、iframe表示エリアの高さを260pxへ変更します。これにより、スマートフォン・タブレット・PCの画面幅に合わせてiframeツールチップを表示できます。
コメント