iframe付きカードを作る方法
iframe付きカードを作る方法を紹介します。このサンプルでは、HTMLのiframe要素をカード上部へ配置し、Webページをカード内に埋め込んで表示します。その下にはタイトルと説明文を配置し、埋め込みコンテンツと関連する情報をひとつのカードとしてまとめて表示できる構成にします。
外部ページや自分で用意したWebページなど、iframeで表示できるコンテンツをカード形式で紹介したい場合に利用できます。埋め込み先のURLはHTMLのiframeにあるsrc属性から変更できるため、表示したいページに合わせて差し替えられます。iframe部分はカードの横幅いっぱいに表示し、一定の高さを確保することで内容を確認しやすくしています。
HTMLではiframeのURL、カードタイトル、説明文を変更できます。CSSではカードの横幅、iframeの高さ、余白、背景色、枠線、角丸、文字サイズなどを調整できます。iframeには横幅100%を指定しているため、カード幅に合わせて表示され、シンプルな埋め込みカードとして利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
カード内にWebページを埋め込み、タイトルと説明文をまとめて表示するサンプルです。
このデモでは、カード上部にiframeでWebページを表示し、その下にタイトルと説明文を配置したレイアウトを確認できます。
コードをコピーして使おう！
<!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-card_wrap">
<!-- iframe付きカード -->
<article class="iframe-card_card">
<!-- iframe表示エリア -->
<div class="iframe-card_frame">
<!--
src属性へ表示したいWebページのURLを指定します。
iframeでの表示を許可しているページを指定してください。
-->
<iframe
src="https://example.com/"
title="iframeコンテンツ">
</iframe>
</div>
<!-- カード本文 -->
<div class="iframe-card_body">
<!-- タイトル -->
<div class="iframe-card_title">
iframeでWebページを表示
</div>
<!-- 説明文 -->
<p class="iframe-card_text">
カード内にWebページを埋め込み、タイトルと説明文をまとめて表示するサンプルです。
</p>
</div>
</article>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSSの2ファイルで構成されています。HTMLではiframeを使ってWebページをカード内へ表示し、その下にタイトルと説明文を配置します。CSSではカード全体の横幅、iframeの表示サイズ、余白、枠線、角丸、文字サイズなどを設定します。JavaScriptは使用しません。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはiframe付きカードの内容を構成するファイルです。iframeへ表示するWebページのURL、カードのタイトル、説明文を変更できます。表示するWebページは、iframeのsrc属性へURLを指定します。
style.cssはiframe付きカードのデザインを設定するファイルです。カードの最大横幅、iframeの高さ、外側・内側の余白、背景色、枠線、角丸、タイトルの文字サイズや説明文の行間などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを同じ階層で配置します。そのあとsample/index.htmlをブラウザで開くと、iframe付きカードが表示されます。
iframeへ表示するWebページを変更する場合は、index.htmlにあるiframeのsrc属性を変更してください。例えばhttps://example.com/を表示する場合は、次のように指定します。
<iframe src="https://example.com/" title="iframeコンテンツ"></iframe>
iframeには任意のWebページを必ず表示できるわけではありません。表示先のWebサイト側でiframeによる埋め込みが禁止されている場合は表示できないため、iframeでの表示を許可しているページのURLを指定してください。
カスタマイズできる内容
index.htmlでは、iframeのsrc属性を変更して表示するWebページを変更できます。また、「iframeでWebページを表示」のタイトルと、その下に表示する説明文も用途に合わせて変更できます。
style.cssでは、カードの最大横幅、iframeの高さ、ページやカード本文の余白、背景色、枠線、角丸、タイトルの文字サイズ、説明文の文字色や行間を変更できます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。
max-width:380px;
カードの最大横幅です。値を大きくするとカードが横に広がり、小さくするとコンパクトになります。
border-radius:12px;
カードの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
height:260px;
iframe表示エリアの高さです。値を大きくするとWebページを表示する領域が高くなり、小さくすると低くなります。
padding:20px;
カード本文の内側余白です。値を大きくするとタイトルや説明文とカード端との間隔が広がります。
margin:0 0 10px;
タイトル下側の余白です。10pxを大きくするとタイトルと説明文の間隔が広がり、小さくすると狭くなります。
font-size:20px;
カードタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。
line-height:1.8;
説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
@media (max-width:640px)
画面幅640px以下でスマートフォン向けの余白へ切り替える基準です。ページ全体の余白をpadding:24px 18px;へ変更します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでカードにwidth:100%とmax-width:380pxを指定しているため、画面幅が狭くなるとカードも自動的に縮小します。iframeにもwidth:100%を指定しているため、カードの横幅に合わせて表示領域が変化します。また、画面幅640px以下ではページ全体の余白をpadding:24px 18px;へ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント