このページの説明

　レスポンシブデザインのホームページのテンプレートです。IFRAMEタグを使えば、複数の種類が違うスライドショー（このページの見本では同じスライドショー）を切り替える事ができます。別のスライドショーをIFRAME部分に読み込む事で、複数のアルバムを切り替えています。

　このページの見本は３つのIFRAMEスライドショーを使っています。 上部右側のボタンのクリックで切り替わります。 ご自身で用意したスライドショーに差し替えて使用してください。 見本のスライドショーを流用する時は、スライドショー上を右クリックして「フレームのソースを表示」でソースを開いてコピーし、ご自身の画像のURLに書き換えてください。 見本は画像のURLを相対表記で書いているため、このままでは画像が表示されません。

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

　このサンプルは個人でも商用でも自由に使用できます。使用している画像は生成AIのGeminiで作ったものです。

⇔

このページのソース

　ページ全体のソースです。他のページに貼り付けるためのソースではありません。

注意事項

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

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