(HTML,CSS,JavaScript)複数の画像がふわっと切り替わるスライドショーを作る(2ページ目)複数の画像が数秒間隔でフェイドアウト・フェイドインを繰り返す「ふわっと表示が切り替わる」効果のあるスライドショーをWeb上で作る方法を解説。画像を掲載する短いHTMLに、配置と重なり順序を調整するCSSを加え、jQueryでスライドショーを制御することで簡単に作れます。画像はリンクにもできるため、クリックすると詳細ページへ飛ぶスライドショーを作ることもでき、シンプルながら活用範囲の広いスライドショーになります。Slideshow」スクリプトを使って、ふわっと画像が切り替わるスライドショーを作成してみましょう。ここで記述するソースは、以下の3点です。各画像を「ふわっと切り替える」ためのjQueryソースを記述どれも数行の短い記述で済み、大半はコピー&ペーストするだけで使えます。表示したい画像を用意してから、以下の順序で記述して下さい。スライドショーとして表示したい画像を列挙するHTMLを記述まずは、HTMLを記述します。下記のように、適当なid名を付けたボックスの中に、「スライドショーとして表示したい画像」(img要素)を列挙するだけです。上記ではid名を「slideshow」としていますが、どんなid名を付けても構いません。これ以降に掲載するCSS・JavaScriptソースでは、ここで付けるid名が「slideshow」であることを前提にしています。従って、特に問題がなければ「slideshow」のままにしておくと、これ以降のコピー&ペーストが楽になります。同一ページ内に複数のスライドショーを掲載したい場合は、id名が重複しないように別々の名称を付けて下さい。■必要なだけimg要素を列挙ここでは5枚の画像を表示させるため、5つのimg要素を列挙しています。何枚でも必要なだけ列挙して下さい。列挙した画像のうち、最初に表示させたい画像には、「class="active"」というclass属性を付加しておきます。これを省略した場合は、(後述のCSSによってすべての画像が透明になってしまうため)ページの読み込み直後からスライドショーの処理が開始されるまでの間は、何も表示されなくなってしまいます。次に、CSSを記述します。ここでのポイントは、positionプロパティを使った絶対配置と、z-indexプロパティを使った「重なり順」の指定です。9;}</style>上記のCSSソースは、HTMLで対象のボックスに付加したid名が「slideshow」である場合のものです。id名を変更した際は、上記のCSSソース内の記述も同じように変更して下さい。id名を変更していなければ、太字で表示している箇所以外は全く修正する必要はありません。}外側のボックスには、画像の絶対配置の基準にするために、positionプロパティに値「relative」を指定しておきます。ボックスのサイズを画像サイズに合わせるよう、widthプロパティとheightプロパティを記述します。上記は、画像サイズが(横)640×(縦)270ピクセルの場合の記述です。実際に用意した画像サイズに合わせて修正して下さい。■重なる順序を指定するz-indexプロパティ上記のCSSソースでは、z-indexプロパティが3つ使われています。このz-indexプロパティは、(positionプロパティによって)重なり合うよう配置された要素の「重なる順番」を指定するプロパティです。値が大きいほど、上に重なる(=手前に表示される)ことになります。}内側のimg要素には、「外側のボックスの端」を基準にして絶対配置するよう、positionプロパティに値「absolute」を指定しています。表示位置は、topプロパティとleftプロパティの値を共に「0」にしているので、「左上」にぴったり合うようになります。opacityプロパティに値0.0を指定し、透明にしています。これは、後からJavaScriptを使って透明度を徐々に下げていくことで、フェイドインの効果(=「ふわっと」表示される効果)を出すためです。}最初に表示される画像(img要素)には、HTMLソース側で「active」クラスを付加しています。ここでは、z-indexプロパティの値を最も大きくして「一番上(=最も手前)に表示される」ようにし、opacityプロパティに1.0を指定して「完全に不透明」(=背後が全く透過しない状態)で表示されるように指定しています。最後に、JavaScriptを記述します。このスクリプトは、名称にある通りjQueryを使いますから、先にjQueryの読み込みが必要です。HTMLのhead要素内などに以下の1行を記述して、jQueryを読み込んでおきましょう。1.12.4を直接読み込むソースです。自サイト内にjQueryをアップロードしてあるなら、そちらを読み込んでも構いません。■スライドショーを実現するjQueryソース次に、以下のようにスクリプトを記述します。このソースが、ふわっと切り替わるスライドショーを実現するメインのJavaScriptソースです。記述場所は、先の(jQueryを読み込む)1行よりも後であればどこでも構いません。);});</script>対象のボックスに付加したid名を記述している箇所が3箇所あります。id名を「slideshow」以外の文字列に変えた場合は、上記ソース中の3箇所も同様に変更して下さい。変更していないのであれば、何も書き換えずにコピー&ペーストするだけで構いません。(最後から3行目)setIntervalは、一定時間ごとに処理を繰り返すメソッドです。上記では、3000ミリ秒ごとに、slideSwitch関数を呼び出すよう記述しています。この数値を変更すれば、スライドショーの更新頻度を調整できます。2500にすれば2.5秒ごとに画像が切り替わるようになりますし、5000にすれば5秒ごとに画像が切り替わるようになります。望みの更新頻度を「ミリ秒」で指定して下さい。切り替わるスライドショーの動作サンプル上記のソースを記述したサンプルページを用意しています。ここでは5枚の画像が3秒ごとに切り替わります。実際にお使いのブラウザで動作を確認してみたい場合は、下記のリンクからサンプルページを表示して下さい。→ふわっと切り替わるスライドショーサンプルページ1CSSもJavaScriptも、すべてHTMLファイル内に直接記述してあります。ソースを表示させて、コピー&ペーストして使ってみる際の参考にして下さい。jQueryで動作するスライドショーのサンプルページさて、上記の方法では画像だけが次々に切り替わります。画像のそばに記述した文字はそのままです。画像にキャプションなどの文字を付加して、画像と一緒に文字も切り替えたい場合もあるでしょう。バナー画像でスライドショーを作る際などのように、それぞれの画像に対して異なるリンク先を設定したい場合もあるでしょう。その場合は、画像ではなくボックスそのものを切り替えるようなスクリプトを記述する必要があります。そこで最後に、画像だけでなく、ボックスを丸ごと切り替えたい場合の記述方法をご紹介いたします。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。