[参考ページ]IFRAMEで設置したスライドショーをレスポンシブ対応にするiframe_slide_show




このスライドショーはIFRAMEで貼り付けています。マウスホイールやドラッグやフリックでも操作できます。






・ 説明
 このページは文字コード「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に書き換えてください。


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




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

    inserted by FC2 system