・　サンプルの説明

　レスポンシブデザインのホームページのテンプレートです。 最初に表示されている背景画像は、ページのスクロールに連動して他の画像にアニメーションで変化します。

　スライドショーはIFRAMEで貼り付けてあります。 ご自身で用意したスライドショーと差し替えて使用してください。 見本のスライドショーを使いたい方は、 ホームページテンプレート の「写真を画面いっぱいに表示するスライドショーとギャラリー」をご参照ください。

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

　このサンプルは、jQueryなどのライブラリーやプラグインは必要ありません。 個人・商用を問わず無料で永久に自由に使用できます。

⇔

・　このページのソース

　ページ全体のソースです。他のページに貼り付けるためのソースではありません。 ソースを「メモ帳」などのテキストエディターに貼り付け「名前を付けて保存」してください。 その際、文字コードを、ソースの４行目の meta charset="～" の記述と統一してください。因みに、このページは「Shift_JIS」（「ANIS」と同じ）で書いています。

・　注意事項

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

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