CSSコメント(1)2015年11/13WEBサイトでよく見かけるコンテンツのひとつ、スライドショー。今回は、複数の画像をスライドさせる方法ではなく、背景画像をX軸内で無限ループさせるスライドショーをCSSのみで実装する方法です。animationsをサポートしているブラウザでないと動作しませんのでご注意ください。最終的な結果は下のようになります。背景画像を作成スライド効果まとめるHTMLの設定HTMLの設定をしていきます。構造としてはこんな感じ。class="sliding"></div></div>ビューポートの幅にフィットする外枠のdiv.wrapを一つ作成します。背景画像を配置するためのdiv.slidingをdiv.wrapの中に作成します。次にCSSの設定をしていきます。hidden;を設定します。div.slidingには、画像の高さと幅(2倍にした数値)を指定しておきます。画像の大きさは任意ですのでお好きな大きさのものを作成し、background-imageとして読み込みます。X軸でリピートさせたいのでrepeat-xも指定しておきます。今回の例では高さ500px、幅1692pxで作成しています。3384px;}スライド効果スライド効果を定義していきます。画像が左から右に無限ループするような動きをCSSアニメーションで指定します。}}アニメーションの開始時にdiv.wrapの左端に画像を配置するためtransformプロパティを使用します。transform関数には以下のようなものがあります。説明translate(X,Y)X方向とY方向の距離で2D移動を指定します。Y方向の距離は省略することができ、その場合はY方向の距離は0となります。translateX(X方向の距離)X方向の距離で移動を指定します。translateY(Y方向の距離)Y方向の距離で移動を指定します。translateZ(Z方向の距離)Z方向の距離で移動を指定します。)関数にはパーセンテージ値を指定することができません。パーセンテージで値を指定しても0と同じになります。Z方向の距離)X方向とY方向とZ方向の距離で3D移動を指定します。Y方向とZ方向の距離は省略することができますが、この場合のY方向とZ方向の距離は0となります。割合、繰り返し回数を定義します。infinite;}まとめる全てをまとめると以下のようになります。HTML/CSSも記述が少なくお手軽なスライドショーの完成です。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。