【CSSオンリー・超軽量】JavaScriptすら使わない！CSSだけで動くスライダー作ってみた（PC向け横長レイアウト）

今回は、一般的には『クソ重い』とされる、スライダー・スライドショー系の機能を、CSS数十行のシンプル・超軽量な記述で実装できたので、その方法をご紹介します（PC向け横長レイアウト）。 表示速度の犠牲を最小限にしつつ、サイトの見た目も強化できるかもしれません。さっそく、参考のコードや実装例・ポイントなどをみていきましょう。

スライダーはプラグインなどで実装が簡単！だがファイルサイズが大きく重い

管理人は今までも、JavaScriptでスライダーを実装したり、wordpressのときはプラグイン『Slider by 10Web・Responsive Image Slider』を使っていました。特にこのプラグインは高機能なんですが、いかんせんプラグイン単体で容量が6.28MBと大きく（Smart Slider も2.7MB、MetaSliderも4.3MBなど）・・・

CSSだけで2000行とかあったり・・・

構成ファイルが多くて、サイト表示時の読み込みスクリプトも増えます。実際、スライダープラグインをオンにした状態だと、表示速度も遅くなるので、ちょっと軽量なやつを作ってみようか、となったわけです。

CSSだけで動くPC向け横長レイアウトスライダー作ってみた

参考コード

参考にしたのはcodepenにあった、以下のコードです。アイコンと文章だけですが、CSSフレックスボックス(display:flex・並列ボックスを出せる)を並べて、横幅100%にし（親要素の幅に対する相対的な値）、２枚目・left: -100%、３枚目・left: -200%;（leftは左端からの距離）のように、領域の外から流れるように登場する形になります。transitionが指定されているので、流れるように登場します。

また、スイッチになるのはラジオボタンで、オンのとき（CSSでcheckedとなる）leftの値が変わって、現れるようになります。

■Testimonial Slider Pure CSS
https://codepen.io/maheshambure21/pen/qZZrxy

CSSだけで動くスライダー（画像タイプ）、コードおよび実装例

■実装したページ（ただしユーザーエージェント判定によりPCのみ表示）
https://sounds-stella.jp/music-creation/4356-2

slider のmax-width:1100px;は、このサイトの横幅にあわせています。ここであわせたサイズの画像ならうまく表示できると思います。 画像を増やす場合は『ラジオボタン追加・slider__navのクラス・.slider__inner {left: -400%;}みたいなのを追加し、leftを変える』で対応できました（４から５に増やした）。

PC向け横長レイアウトにつき、レスポンシブは非対応・ではどうするか？

このテーマではPCレイアウトwrapperにmax-width: 1100px;が指定されていますが、SPではレイアウトが変動するけど親要素横幅が指定されているわけではありません。そのため・・・ スマホやタブレットみたいに横幅を狭くすると、画像がはみ出ます（そのため、phpで判定して、つけたページでPCアクセスがあった場合表示するようにしています）。

SP時でも対応するレスポンシブにしたい場合は、wrapperなど親要素に横幅指定し、slider__contents img（スライダー内の画像）のwidthをパーセント指定などにすると、うまくいくかもしれません。なお管理人は、スマホ向けにあまり横にながくないやつを、PHPのユーザーエージェント判定＆切り替えみたいなのを考えています。画像をデバイス幅にあわせて縮小をかけようと思いましたが、横長スライド前提の画像のため、スマホだと相当小さくなるからです。

おまけ：CSS tips：親要素の高さ（height）指定しないで、写真や内部の高さ100%にすると？

CSSをいろいろ弄っていて、ちょっとやらかしちゃった例がこちら。codepenではbodyにheight: 100%;が指定されていたので気にならなかったけど、この『bodyにheight: 100%;』をカットした上で、中の画像にheight: 100%;指定するとこういうおかしいレイアウトになります。 細すぎてスライダー画像ほとんどみえないじゃん（笑）

理由は『親要素sliderの高さが未確定で、slider__navのほうのheight: 16px;margin: 2rem 12px;（2remはhtml要素のフォントサイズ12px×２個分）を判定基準にした』から。親要素のsliderの高さを指定してクリアしました。

まとめ・覚えておきたいポイント(CSS)

まとめるとこんなところでしょうか。使った画像の関係でレスポンシブにはしませんでしたが、軽量にできたと思います。CSSテクでも参考になったので、皆さんもぜひつかってみてください。