iframeをドロワーメニューで表示する方法
iframeをドロワーメニューで表示する方法を紹介します。iframeを利用すると、別ページや外部コンテンツを現在のページ内へ埋め込んで表示できます。本記事では、HTML・CSS・JavaScriptだけを使い、ボタンをクリックすると画面左側からドロワーメニューが開き、その中にiframeのコンテンツを表示する仕組みを実装します。
サンプルコードでは、「コンテンツを表示」ボタンをクリックすると背景オーバーレイとドロワーメニューが表示され、ドロワー内でiframeの内容を確認できます。「閉じる」ボタンまたはドロワーメニュー外側の背景をクリックすると閉じられます。iframeのsrc属性を変更することで、表示するページを差し替えられる構成です。
お問い合わせ画面の補足情報、利用規約、ヘルプページ、店舗案内、管理画面の詳細情報などを、現在のページから移動せずに確認させたい場合に利用できます。HTMLではiframeのURLやタイトル、説明文を変更でき、CSSではドロワーメニューの幅、余白、背景色、影、表示アニメーションなどを調整できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
コードをコピーして使おう！
<!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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでドロワーメニューとiframeの表示領域を作成し、CSSでドロワーメニューのレイアウトやアニメーション、iframeの表示サイズを設定しています。JavaScriptでは、ボタン操作と背景クリックによるドロワーメニューの開閉処理を行います。
iframeはindex.html内で読み込むURLを変更するだけで、表示するページを自由に差し替えられます。自サイト内のページだけでなく、iframe表示を許可している外部ページも表示できます。ただし、表示先のWebサイトによってはセキュリティ設定によりiframeで表示できない場合があります。
各ファイルをsampleフォルダへ配置し、iframeのURLを設定したあとにindex.htmlをブラウザで開くだけで利用できます。サーバーサイドの処理や外部ライブラリは不要で、HTML・CSS・JavaScriptのみで動作します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html
ドロワーメニュー本体、開くボタン、閉じるボタン、iframeを配置します。iframeのsrc属性を変更すると表示するページを変更できます。title属性も表示内容に合わせて変更できます。
style.css
ドロワーメニューの幅、背景色、余白、影、アニメーション、iframeの表示サイズなどデザイン全体を管理します。
script.js
ドロワーメニューを開くボタン、閉じるボタン、背景クリックによる開閉処理を記述します。
設置方法・使い方
① sampleフォルダを作成します。
② sampleフォルダ内へindex.html・style.css・script.jsを配置します。
③ index.html内のiframeにあるsrc属性へ表示したいページのURLを設定します。
④ iframeで表示したいWebサイトがiframe表示を許可していることを確認します。
⑤ sample/index.htmlをブラウザで開きます。
⑥ 「iframeを表示」ボタンをクリックすると、ドロワーメニュー内へ指定したページが表示されます。
⑦ 「閉じる」ボタンまたは背景部分をクリックするとドロワーメニューが閉じます。
カスタマイズできる内容
・index.htmlのiframeにあるsrc属性を変更すると、表示するページを変更できます。
・index.htmlでは、タイトル、説明文、ボタンの文字、iframeのtitle属性を変更できます。
・style.cssでは、ドロワーメニューの幅、高さ、背景色、余白、角丸、影、iframeの高さや枠線などを変更できます。
・script.jsでは、ドロワーメニューの開閉方法や閉じる条件を変更できます。
数値調整
・style.cssの「width:420px;」を変更するとドロワーメニューの横幅が変わります。
・style.cssの「height:420px;」を変更するとiframe表示エリアの高さが変わります。
・style.cssの「animation:iframe-drawer-menu_slide .35s ease forwards;」にある「.35」は表示アニメーションの時間です。値を大きくするとゆっくり、小さくすると速く表示されます。
・style.cssの「background:rgba(0,0,0,.5);」にある「.5」は背景の透明度です。値を大きくすると暗く、小さくすると明るくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでドロワーメニューに「max-width:90%;」、iframeに「width:100%;」を指定しているため、画面幅に合わせて表示サイズが自動調整されます。また、メディアクエリで余白やiframeの高さを調整しているため、スマートフォン・タブレット・PCでも利用できます。
コメント