僕とコード書いて複数枚の画像をフェードアニメーションで切り替えてよ!
最近のWebページの多くに数秒毎に複数の画像が切り替わる「スライダー」が設置されています． スライダーは大きな動きがある分，目につきやすいメリットはあるものの，JavaScriptやjQuery等のライブラリを使って実装する必要があり，コーディングのハードルとしてはやや高めです．
そこで，今回は，スライドではなく，フェードアニメーションで複数の画像を切り替える「写真立て」を制作します． フェードアニメーションは，画像の透明度を一定時間毎に変化させることで実現でき，HTMLとCSSのみで実装可能です．
本ページでは，有料サービスやライブラリ，CMS等のプログラム群は使用せず， 自作できるHTML, JavaScript, CSSのみを使用し，基本的な文法だけで構成することで，初心者に優しいページを目指しました．
最近のWebページの多くに数秒毎に複数の画像が切り替わる「スライダー」が設置されています． スライダーは大きな動きがある分，目につきやすいメリットはあるものの，JavaScriptやjQuery等のライブラリを使って実装する必要があり，コーディングのハードルとしてはやや高めです．
そこで，今回は，スライドではなく，フェードアニメーションで複数の画像を切り替える「写真立て」を制作します． フェードアニメーションは，画像の透明度を一定時間毎に変化させることで実現でき，HTMLとCSSのみで実装可能です．
本ページでは，有料サービスやライブラリ，CMS等のプログラム群は使用せず， 自作できるHTML, JavaScript, CSSのみを使用し，基本的な文法だけで構成することで，初心者に優しいページを目指しました．
-
目次
【準備】プロジェクトフォルダの作成
今回は画像を複数表示するため，プロジェクトフォルダを事前に用意することをお勧めします．
本ページでは，プロジェクトフォルダの中に画像を保存するフォルダ「img」を作成していることを想定しています．
本ページでは，プロジェクトフォルダの中に画像を保存するフォルダ「img」を作成していることを想定しています．
1枚の画像でフェードアニメーション
表示結果
ソースコード
HTML
まずは表示領域を記述します．bodyタグの中に上記コードを記述します．
外側のdiv要素は画像アイテムを格納する要素で，内側のdiv要素は画像やリンクを格納し，このdiv要素にフェードアニメーションを適用します．
外側のdiv要素は画像アイテムを格納する要素で，内側のdiv要素は画像やリンクを格納し，このdiv要素にフェードアニメーションを適用します．
CSS
本ページのCSSコードは大きく分けて，「表示領域」，「アニメーションの設定」，「アニメーションの進行」の3つから構成されています．
1〜13行目: 表示領域の確保
16〜29行目: アニメーションの設定
33〜52行目: アニメーションの進行の設定
アニメーションの進行(@keyframes itmFade1-chg-itm-anim)は，24行目で指定している5秒を100%とした時に，何%進行時点での透明度を指定しています． 例えば，@keyframes itmFade1-chg-itm-animの20%時点は，アニメーション開始から1秒後ということになります．
1〜13行目: 表示領域の確保
16〜29行目: アニメーションの設定
33〜52行目: アニメーションの進行の設定
アニメーションの進行(@keyframes itmFade1-chg-itm-anim)は，24行目で指定している5秒を100%とした時に，何%進行時点での透明度を指定しています． 例えば，@keyframes itmFade1-chg-itm-animの20%時点は，アニメーション開始から1秒後ということになります．
finish!
ここまでで，1枚の画像をフェードイン・フェードアウトさせることができました！
2枚の画像を交互にフェード切替
表示結果
ソースコード
HTML
画像の表示領域です．本項では2枚の画像を切り替えます．
2枚の画像を並べていますが，CSSで透明・不透明を指定するため，表示上は問題ありません．
CSS
表示領域の内容は特に変更ありません．
24行目では1枚当たり5秒間アニメーションをさせるため画像枚数分の秒数を指定しています．
26行目から37行目では，各画像のアニメーション開始を遅らせています． これは，2枚の画像を切り替えるため，開始を遅らせて同時にアニメーションが発火しないようにしています．
39行目から63行目ではアニメーションの進行を指定しています． 24行目でアニメーション全体の長さは10秒と指定しているので，1枚の画像の持ち時間は5秒，50%です．
このコードでは，アニメーションの50%(5秒)から65%(6.5秒)の1.5秒でフェードアウトして画像が消える間に，次の画像がフェードインして現れます． また，「z-index」を使い，フェードアウトして見えなくなった画像を後ろに，フェードインして見えている画像を一番手前に重ね順を変更しています．
24行目では1枚当たり5秒間アニメーションをさせるため画像枚数分の秒数を指定しています．
26行目から37行目では，各画像のアニメーション開始を遅らせています． これは，2枚の画像を切り替えるため，開始を遅らせて同時にアニメーションが発火しないようにしています．
39行目から63行目ではアニメーションの進行を指定しています． 24行目でアニメーション全体の長さは10秒と指定しているので，1枚の画像の持ち時間は5秒，50%です．
このコードでは，アニメーションの50%(5秒)から65%(6.5秒)の1.5秒でフェードアウトして画像が消える間に，次の画像がフェードインして現れます． また，「z-index」を使い，フェードアウトして見えなくなった画像を後ろに，フェードインして見えている画像を一番手前に重ね順を変更しています．
finish!
以上，2枚の画像を交互にフェード切替する方法でした．
複数の画像をフェード切替
表示結果
ソースコード
HTML
画像の表示領域です．本項では3枚の画像を切り替えます．CSSで透明・不透明を指定するため，3枚の画像を並べています．
CSS
表示領域の内容は特に変更ありません．
24行目では1枚当たり5秒間アニメーションをさせるため画像枚数分の秒数を指定しています．
26行目から46行目では，各画像のアニメーション開始を遅らせています． これは3枚の画像を切り替えるため，開始を遅らせて同時にアニメーションが発火しないようにしています．
47行目から69行目ではアニメーションの進行を指定しています． 24行目でアニメーション全体の長さは15秒と指定しているので，1枚の画像の持ち時間は5秒，33%です．
上記のコードでは，アニメーションの33%(5秒)から50%(7.5秒)の2.5秒でフェードアウトして消えている間，次の画像がフェードインして現れます． また，「z-index」を使用し，フェードインして見えている画像を一番手前にするよう重ね順を変更しています．
24行目では1枚当たり5秒間アニメーションをさせるため画像枚数分の秒数を指定しています．
26行目から46行目では，各画像のアニメーション開始を遅らせています． これは3枚の画像を切り替えるため，開始を遅らせて同時にアニメーションが発火しないようにしています．
47行目から69行目ではアニメーションの進行を指定しています． 24行目でアニメーション全体の長さは15秒と指定しているので，1枚の画像の持ち時間は5秒，33%です．
上記のコードでは，アニメーションの33%(5秒)から50%(7.5秒)の2.5秒でフェードアウトして消えている間，次の画像がフェードインして現れます． また，「z-index」を使用し，フェードインして見えている画像を一番手前にするよう重ね順を変更しています．
finish!
画像が4枚以上あっても基本的な考え方は同じです．
1枚当たりの表示秒数x切り替える画像枚数が，アニメーション全体の秒数となります．
次に，100%を切り替える画像枚数で割った値が「@keyframes」(アニメーションの進行)における画像1枚当たりの割当%です．
また，各画像に対してアニメーションの開始を遅らせることで，画像が次々に変わるように見せることができます．
以上，複数画像のフェード切替でした．
1枚当たりの表示秒数x切り替える画像枚数が，アニメーション全体の秒数となります．
次に，100%を切り替える画像枚数で割った値が「@keyframes」(アニメーションの進行)における画像1枚当たりの割当%です．
また，各画像に対してアニメーションの開始を遅らせることで，画像が次々に変わるように見せることができます．
以上，複数画像のフェード切替でした．
【appendix】リンク付き画像のフェードチェンジ
表示結果
ソースコード
HTML
複数画像をフェード切替する項と基本的には同じです．画像にaタグでリンクをつけています．
CSS
先の複数の画像をフェード切替と基本的に同じコードで動きます．これまでの項では，画像そのものではなく，画像を内包するdiv要素をフェードしました．
本項では，フェードするdiv要素の中にaタグを入れているので，CSSの内容には変更点がありません．
finish!
本項では，フェードするdiv要素内の画像にリンクをつけて，ショッピングサイト等にある商品紹介画像のようにすることができました．
以上，リンク付き画像のフェードチェンジでした．
以上，リンク付き画像のフェードチェンジでした．