wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

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

      2020/06/01

こんにちは、管理人@SS_mshpです。

今回は、一般的には『クソ重い』とされる、スライダー・スライドショー系の機能を、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%にし(親要素の幅に対する相対的な値)、2枚目・left: -100%、3枚目・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を変える』で対応できました(4から5に増やした)。

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×2個分)を判定基準にした』から。親要素のsliderの高さを指定してクリアしました。

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

  • JavaScriptやWPプラグインスライダーは重いことが多い
  • CSSのみだと、シンプルなものなら数十行のコードで実装可能
  • 横幅100%フレックスボックスや、ラジオボタン・left or right指定で、CSSのみでもイケる
  • PC向け画像と、スマホ向け画像は、分けたほうがいいかもしれない(単純な縮尺だと)
  • サイズをパーセント指定するときは、(相対だから)親要素のサイズも気にしておこなう

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

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - CSS
【タグ】 - ,

  関連記事

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

【CSSエディット】『 』みたいな空白スペース・改行タグでレイアウト調整が良くない理由

今回は、管理人がこのサイト(よんどけコラム)のCSSを調整してい ...

【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装

今回は、当サイトでもよく取り上げているCSSを使ったアニメーショ ...

【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装

今回は、CSSのみで動作する、軽量でお洒落なスマートフォンメニュ ...

【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る

今回は、フレームワークを使ったサイト制作を行ってみます。 利用す ...

wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)

今回は、自分のフリー曲素材サイトのチューニングをしてて、word ...