iframeをドロワーメニューに表示する方法
iframeをドロワーメニューに表示する方法を紹介します。このサンプルでは、ボタンをクリックすると画面左側からドロワーメニューが表示され、その中にiframeを使って指定したWebページを表示します。通常のページ内へiframeを直接配置するのではなく、必要なときだけドロワーメニューを開いて内容を確認できる構成です。
サイト内の別ページや案内ページなどを、現在のページから移動せずに確認させたい場面で利用できます。「iframeを表示」ボタンをクリックするとドロワーメニューが開き、「閉じる」ボタンまたはドロワーメニュー外側の背景をクリックすると閉じられます。JavaScriptではドロワーメニューの表示・非表示を切り替え、CSSでは左側から表示するアニメーションや背景を暗くする表示を設定しています。
iframeへ表示するページはHTMLのsrc属性から変更でき、タイトルや説明文、ボタンの文章も用途に合わせて編集できます。CSSではドロワーメニューの横幅、余白、背景色、ボタンの色、iframe表示エリアの高さ、角丸、影、アニメーション時間などを調整できます。また、ドロワーメニューには最大横幅を設定し、640px以下では余白を調整しているため、スマートフォン・タブレット・PCで利用できる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>
<!-- デモ全体 -->
<div class="iframe-drawer-menu_wrap">
<!-- タイトル -->
<h1 class="iframe-drawer-menu_title">
iframeをドロワーメニューで表示
</h1>
<!-- 説明文 -->
<p class="iframe-drawer-menu_text">
ボタンをクリックすると、ドロワーメニュー内にiframeを表示できます。
</p>
<!-- ドロワーメニューを開くボタン -->
<button
class="iframe-drawer-menu_open"
type="button"
data-drawer-open>
iframeを表示
</button>
</div>
<!-- ドロワーメニュー表示時の背景 -->
<div
class="iframe-drawer-menu_overlay"
data-drawer-overlay>
<!-- ドロワーメニュー本体 -->
<div
class="iframe-drawer-menu_drawer"
role="dialog"
aria-modal="true"
aria-labelledby="iframe-drawer-menu-title">
<!-- ドロワーメニューのタイトル -->
<div
class="iframe-drawer-menu_drawer-title"
id="iframe-drawer-menu-title">
iframe表示エリア
</div>
<!-- ドロワーメニューの説明文 -->
<p class="iframe-drawer-menu_drawer-text">
ドロワーメニュー内でiframeを確認できます。
</p>
<!-- iframe表示エリア -->
<div class="iframe-drawer-menu_frame">
<!--
iframe
src属性へ表示したいページのURLを指定する。
表示先のWebサイトによっては、
iframe内への表示が禁止されている場合がある。
-->
<iframe
src=""
title="iframe sample"
loading="lazy">
</iframe>
</div>
<!-- ドロワーメニューを閉じるボタン -->
<button
class="iframe-drawer-menu_close"
type="button"
data-drawer-close>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは「iframeを表示」ボタン、ドロワーメニュー、iframe表示エリアを作成し、CSSではドロワーメニューの横幅や余白、背景、iframeの表示サイズ、左側から表示するアニメーションなどを設定します。JavaScriptではボタンのクリックに合わせてドロワーメニューの表示・非表示を切り替えます。
iframe内へ表示するWebページは利用者自身で用意し、index.htmlのiframeにあるsrc属性へ表示したいページのURLを設定します。配布コードではsrc=""の状態になっているため、使用前にURLの設定が必要です。なお、表示先のWebサイト側でiframeへの埋め込みが禁止されている場合は、この方法では表示できません。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはページとドロワーメニューのHTML構造を作るファイルです。「iframeをドロワーメニューで表示」のタイトル、説明文、「iframeを表示」ボタン、ドロワーメニュー内のタイトルと説明文、iframe、「閉じる」ボタンが含まれています。iframe内へ表示するページのURLも、このファイルのsrc属性で設定します。
style.cssはページとドロワーメニューのデザインを設定するファイルです。全体の横幅や余白、ボタンの色、背景の暗さ、ドロワーメニューの横幅、iframe表示エリアの高さ、枠線、角丸、影、左側から表示するアニメーションなどを変更できます。
script.jsはドロワーメニューの開閉を制御するファイルです。「iframeを表示」ボタンをクリックするとis-activeクラスを追加してドロワーメニューを表示します。「閉じる」ボタン、またはドロワーメニュー外側の背景をクリックするとis-activeクラスを削除して閉じます。
設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを同じ階層で配置します。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、3ファイルの名前や配置を変更せずに保存してください。
次に、index.htmlのiframeにあるsrc=""へ、ドロワーメニュー内で表示したいWebページのURLを設定します。例えば表示したいページのURLがhttps://example.com/の場合は、src="https://example.com/"のように設定します。URLはiframe内へ表示したいページをブラウザで開き、アドレスバーに表示されているURLを確認して設定してください。
URLを設定したあと、sample/index.htmlをブラウザで開きます。「iframeを表示」ボタンをクリックすると画面左側からドロワーメニューが表示され、設定したページをiframe内で確認できます。「閉じる」ボタンまたはドロワーメニュー外側の暗くなった背景をクリックすると閉じます。URLを正しく設定しても表示されない場合は、表示先のWebサイトがiframeへの埋め込みを許可していない可能性があります。
カスタマイズできる内容
index.htmlではページタイトル、「iframeをドロワーメニューで表示」のタイトル、説明文、「iframeを表示」ボタンの文章、ドロワーメニュー内のタイトルと説明文、「閉じる」ボタンの文章を変更できます。iframeのsrc属性を変更すると、ドロワーメニュー内へ表示するWebページを変更できます。
style.cssでは全体の横幅や余白、背景色、ボタンの色、ドロワーメニューの横幅、背景の暗さ、iframe表示エリアの高さ、枠線、角丸、影、アニメーション時間などを変更できます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxが上下、20pxが左右の余白を表します。値を大きくすると画面端との間隔が広がります。
max-width:700px;
デモ全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
デモ全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
デモ全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
デモ全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくするとボタンとの間隔が広がり、小さくすると狭くなります。
padding:12px 24px;
「iframeを表示」ボタンの内側余白です。12pxが上下、24pxが左右の余白を表します。値を大きくするとボタンが大きくなります。
border-radius:8px;
ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:16px;
「iframeを表示」ボタンの文字サイズです。値を大きくすると文字が大きくなります。
z-index:9999;
ドロワーメニュー表示時の背景を重ねる順番です。値が大きいほど前面へ配置されます。
background:rgba(0,0,0,.5);
ドロワーメニュー表示中の背景の暗さです。.5を大きくすると背景が濃くなり、小さくすると薄くなります。
width:420px;
ドロワーメニュー本体の横幅です。値を大きくすると横に広がり、小さくすると狭くなります。
max-width:90%;
ドロワーメニュー本体の最大横幅です。画面が狭い場合に画面幅を超えないように調整します。
padding:28px;
ドロワーメニュー本体の内側余白です。値を大きくすると内容と端の間隔が広がり、小さくすると狭くなります。
box-shadow:10px 0 40px rgba(0,0,0,.2);
ドロワーメニュー右側の影です。10pxは横方向の位置、40pxはぼかしの大きさを表します。値を変更すると影の位置や広がりが変わります。
height:420px;
iframe表示エリアの高さです。値を大きくすると表示領域が高くなり、小さくすると低くなります。
margin-bottom:24px;
iframe表示エリアと「閉じる」ボタンの間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。
border-radius:12px;
iframeの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
animation:iframe-drawer-menu_slide .35s ease forwards;
ドロワーメニューが左側から表示されるアニメーション時間です。.35sは0.35秒を表します。値を大きくするとゆっくり、小さくすると速く表示されます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではドロワーメニュー本体にwidth:420px;とmax-width:90%;を設定しているため、画面が狭い場合は画面幅に合わせて横幅が調整されます。iframeもwidth:100%とheight:100%によって、iframe表示エリアのサイズに合わせて表示されます。
また、画面幅640px以下ではデモ全体をpadding:24px 18px;、ドロワーメニュー本体をpadding:24px 20px;へ変更し、iframe表示エリアの高さを360pxへ調整します。これにより、スマートフォン・タブレット・PCで利用できます。
コメント