⇔

・　説明

　このページは文字コード「UTF-8」で書いています。他の文字コードで書かれたページにサンプルのソースを貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。

　ホームページにスライドショーを貼り付けるときにIFRAMEを使うと便利です。 あらかじめWindowいっぱいに表示するスライドショーページを作っておき、それを他のページにIFRAMEで挿入します。 しかし、モバイルデバイスで表示した時、IFRAMEのスタイルでwidth:100%;max-width:～px;としても、幅だけが縮小して高さは元のままになってしまいます。スライドショーの種類によってはこれでも成立しますが、アスペクト比を維持したまま高さも縮小すればベストです。

　IFRAMEのアスペクト比を維持したままレスポンシブに対応させるには、下のソースの様に二重のDIV要素で囲んでください。 外側のDIV要素のスタイルでwidth:100%;max-width:～px;とし、内側のDIV要素のスタイルではwidth:100%;padding-bottom:（写真の高さ / 写真の幅 * 100）%;として、強制的にアスペクト比を維持して下さい。 これは、CSSのpaddingプロパティを％で指定した場合、相対値の基準が包含ブロックの幅になる事を利用しています。 その中にposition:absolute;top:0px;left:0px;で位置指定したIFRAME要素を入れてください。

・　ソースコード

　スライドショー部分のソースです。 「ここにスライドショーのURLを書く。」を使用するスライドショーのURLに書き換えてください。

<div style=" position:relative; top:0px; left:0px; margin:auto; width:100%; max-width:900px; "> <div style=" position:relative; top:0px; left:0px; width:100%; padding-bottom:75%; "> <iframe src="ここにスライドショーのURLを書く。" allowfullscreen frameborder="0" scrolling="no" style=" position:absolute; top:0px; left:0px; width:100%; height:100%; margin:0; padding:0; "> スライドショー </iframe> </div> </div>

・　注意事項

　このページは文字コード「UTF-8」で書いています。他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。

All Rights Reserved. Copyright (C) 2002- Miyake_kobo.