iframeをテーブルに表示する方法
iframeをテーブルに表示する方法を紹介します。このサンプルでは、テーブルのセル内にiframeを配置し、Webページと項目名、説明文を1行の表としてまとめて表示します。JavaScriptは使用せず、HTMLとCSSだけで実装できるシンプルな構成です。
サービス紹介ページ、操作画面、サイト内の別ページ、確認用ページなどを、説明と一緒に一覧形式で掲載したい場合に利用できます。iframeと文章を同じ行に配置することで、どのページがどの説明に対応しているのかを確認しやすくなります。
HTMLではテーブルの見出し、項目名、説明文、iframeで表示するURLを変更できます。CSSではテーブルの最大横幅、セルの余白、列幅、iframeの高さや角丸などを調整できます。画面幅が狭い場合はテーブル部分を横方向へスクロールできるため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
テーブルのセル内にWebページをiframeで表示します。
| 項目 | 説明 | ページ |
|---|---|---|
| サンプルページ | 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-table_wrap">
<!-- タイトル -->
<div class="iframe-table_title">
iframeをテーブルに表示
</div>
<!-- 説明文 -->
<p class="iframe-table_text">
テーブルのセル内にWebページをiframeで表示します。
</p>
<!-- 横スクロール用エリア -->
<div class="iframe-table_scroll">
<!-- テーブル -->
<table class="iframe-table_table">
<!-- テーブル見出し -->
<thead>
<tr>
<th>項目</th>
<th>説明</th>
<th>ページ</th>
</tr>
</thead>
<!-- テーブル本文 -->
<tbody>
<tr>
<!-- 項目 -->
<td class="iframe-table_name">
サンプルページ
</td>
<!-- 説明 -->
<td class="iframe-table_description">
iframeをテーブルのセル内に表示したサンプルです。
</td>
<!-- iframe表示セル -->
<td class="iframe-table_frame-cell">
<div class="iframe-table_frame">
<!--
表示するWebページを指定します。
YOUR_PAGE_URL を、表示したいWebページのURLへ
置き換えてください。
例：
https://example.com/
Webサイトによってはiframeによる
外部サイトからの表示が禁止されている場合があります。
-->
<iframe
src="YOUR_PAGE_URL"
title="表示するWebページ">
</iframe>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSSの2ファイルで構成されています。HTMLではテーブルの見出し、項目名、説明文、Webページを表示するiframeを配置し、CSSではテーブルの横幅、セルの余白、各列のサイズ、iframeの表示領域などを設定します。JavaScriptや外部ライブラリは使用していません。
iframeへ表示するWebページはサンプル一式には含まれていません。利用者自身で表示したいページのURLを用意し、index.html内のYOUR_PAGE_URLへ設定して使用します。Webサイトによってはiframeによる外部サイトからの表示が制限されているため、その場合はURLを設定しても表示できません。
テーブルは「項目」「説明」「ページ」の3列で構成されています。iframeは「ページ」セル内に表示され、画面幅が狭くテーブル全体を収められない場合は、テーブル部分を横方向へスクロールして確認できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはiframeを表示するテーブル全体を構成するファイルです。「iframeをテーブルに表示」のタイトル、説明文、「項目」「説明」「ページ」の見出し、サンプルページの項目名と説明文、Webページを表示するiframeを記述しています。表示するページは、iframeのsrc属性にあるYOUR_PAGE_URLを利用者自身で用意したURLへ置き換えて設定します。
style.cssはテーブル全体のデザインを設定するファイルです。サンプル全体の最大横幅や余白、テーブルの最小横幅、セルの余白、見出しの背景色、項目列とiframe列の横幅、iframe表示エリアの高さや角丸などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。index.htmlからstyle.cssを読み込む構成になっているため、2つのファイルは同じsampleフォルダ内へ保存してください。次に、テーブル内へ表示したいWebページのURLを用意します。
index.html内には次のプレースホルダーがあります。
src="YOUR_PAGE_URL"
YOUR_PAGE_URLを、iframe内へ表示したいWebページのURLへ置き換えます。例えば表示したいURLがhttps://example.com/の場合は、src="https://example.com/"のように設定します。設定後にsample/index.htmlをブラウザで開くと、テーブルの「ページ」セル内に指定したWebページが表示されます。
iframeで表示できるかどうかは、表示先Webサイト側の設定にも依存します。外部サイトからのiframe表示を禁止しているページは、このコードだけでは表示できません。その場合は、iframeへの埋め込みが許可されているページを指定してください。
カスタマイズできる内容
index.htmlではタイトル、説明文、テーブルの見出し、「サンプルページ」の項目名、説明セルの文章、iframeのtitle、表示するWebページのURLを変更できます。別のページを表示する場合は、YOUR_PAGE_URLを新しいURLへ置き換えてください。
style.cssではサンプル全体の最大横幅や余白、背景色、テーブルの最小横幅、セルの余白、見出しの色、項目列とページ列の横幅、iframe表示領域の高さや角丸などを変更できます。
数値調整
style.css
max-width:900px;
サンプル全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
サンプル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
サンプル全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
サンプル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなります。
margin:0 0 30px;
説明文の下側余白です。30pxを大きくするとテーブルとの間隔が広がり、小さくすると狭くなります。
min-width:680px;
テーブルの最小横幅です。値を大きくするとテーブルの最低横幅が広くなります。表示領域より大きくなった場合は横スクロールで確認できます。
padding:16px;
見出しセルと通常セルの内側余白です。値を大きくすると、文字やiframeとセルの枠線との間隔が広がります。
width:160px;
「項目」セルの横幅です。値を大きくすると項目列が広くなります。
width:320px;
iframeを表示する「ページ」列の横幅です。値を大きくするとiframeを表示する列が広くなります。
height:220px;
iframe表示エリアの高さです。値を大きくすると表示領域が高くなり、小さくすると低くなります。
border-radius:8px;
iframe表示部分の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
@media (max-width:640px)
スマートフォン向けのスタイルへ切り替える基準となる画面幅です。このサンプルでは640px以下になると、全体の内側余白を変更します。
padding:24px 18px;
画面幅640px以下で使用するサンプル全体の内側余白です。上下24px、左右18pxにして、狭い画面での余白を小さくします。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:900pxによって、サンプル全体が画面幅に合わせて縮小されます。テーブルにはmin-width:680pxを設定し、その外側の.iframe-table_scrollへoverflow-x:autoを指定しているため、画面幅が狭い場合はテーブル部分だけを横方向へスクロールできます。
iframeにはwidth:100%とheight:100%を指定しているため、.iframe-table_frameの横幅と高さに合わせて表示されます。さらに画面幅640px以下では、@media (max-width:640px)によってサンプル全体の内側余白を24px 18pxへ変更するため、スマートフォン・タブレット・PCで利用できます。
コメント