itLinkedInPocketCopy今回は、Webサイトの中の画像をマウスオーバーすると、その画像がスライドして別の画像に切り替わる方法について、説明していきます。.img-wrap2」について使用するケース画像がリンク元となっているケースが一般的です。画像がスライドして切り替わることで閲覧者の注目を引き、クリックを訴求することができます。サンプルこちらからご確認ください。解説1横方向へのスライドHTMLは下記のように記述します。</div></a>一般的にリンクに対して使われるので、「a」タグで表示領域をマークアップします。ここでは「img-disp」というクラスを付けています。「img-disp」の中に、画像を並べた箱として「div」要素を設置します。ここでは「img-wrap」というクラスを付けています。「img-wrap」の中に、切り替え前の画像「img1.jpg」、切り替え後の画像「img2.png」をそれぞれ指定します。cssは下記のように指定します。translateX(-50%);}「.img-disp」についてもともと「a」タグなので「display:block」を指定しインライン要素からブロック要素に変更しています。「width」で表示したいサイズの横幅を指定します。注目すべきは「overflow:hidden」の記述です。「img-wrap」は「img-disp」をはみ出すように設定するので、この指定をしないと初期状態で画像が2つ並んでしまいます。そのため「over-flow:hidden」を記述し、表示領域を超えた分は非表示にするという内容になります。「.img-wrap」について「width:200%」により、「img-disp」の2倍の横幅を設けます。「transition:1s」を設定し、スライドアニメーションの実行時間を1秒に設定しています。任意のスピードに変更して問題ありません。「display:flex」を設定することで、画像2つを横に並べます。(もともと「img」はインライン要素であるためflexboxを使用しなくても横に並びますが、不必要な空白を除去するために「img」に「display:block」を入れてブロック要素に置き換えます。そのために、ブロック要素を横に並べる「flex」の記述が必要になります。img」について前述の通り「display:block」を入れて不自然な空白を除去しています。「width:50%」を記述し、横幅を「img-wrap」の半分の値にします。2倍の横幅を設定しているため、この記述により、表示させたい画像と、表示領域「img-disp」の横幅を等しくすることができます。.img-wrap」について表示領域「img-disp」がマウスオーバーされた際の「img-wrap」のスタイルとなります。「img-wrap」の横幅50%(=画像1つ分)の長さだけ左にずれるようにします。これにより、初期表示画像が左にずれて表示されなくなり新しい画像が表示されます。横方向へのスライドは、これで完成です!解説2縦方向へのスライドHTMLは下記のように設定しています。</div></a>横方向と内容は変更ありませんが、区別して「img-disp」「img-warp」に「2」の数字を付けています。CSSは下記となります。横方向と多くの箇所が異なります。hidden」を記述していますが、縦方向では「height」も記述しています。横方向のスライドでは画像が横に並び、必然的に画像の縦のサイズがそのまま「img-disp」の縦のサイズになっていましたが、縦方向のスライドでは画像を縦に並べるため、2枚目の画像を非表示にするために「img-disp2」の縦幅を表示される画像の高さ分だけ、あらかじめ設定する必要があります。「.img-wrap2」について画像を横に並べないため、「width」は「100%」を設定して「img-disp2」と同じサイズにします。1s」で設定しています。block」で画像をブロック要素に指定しています。100%」を記述し「img-wrap2」と同じ横幅を指定します。translateY(-50%)」を指定し、画像がマウスオーバーされた際に「img-wrap2」が縦方向へ高さの50%(=画像1枚分)だけ上に移動するよう設定します。これで縦方向へのスライドも完成となります。無料でプログラミングを学びたい方はこちらがオススメです。「jQuery」を使うための準備と使い方について「jQuery」を使うための準備と使い方について記載していきます。「しの」フリーランスでWebクリエイターをしています。