wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

WordPress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

      2019/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・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装

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

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

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

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

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

自社サイト(wpホームページ制作請負)のプチリニューアルしました(ヒーローヘッダー風&重なるメニュー)

今回は、ちょっと時間があったので、管理人のお仕事用サイト(wpホームペー …

(ヘッダーとか見出しの要素を)片方だけ丸い・台形・矢印などおしゃれデザインにできるCSSやってみた

今回はWebサイトでよくある『ガチガチ長方形とか正方形みたいな要素』では …

【html5 videoとcss】ヘッダーやメインビジュアル背景に動画を使ってインパクトを与える方法

今回は、サイト閲覧者にインパクトを与えやすい・最近のトレンドになっている …

bootstrapのcolクラスをとphp関数を使って、3列レイアウトとブログ2カラムを切り替える

今回は、1ドメイン・1サイトで『トップページやコーポレート部分は1カラム …

【ワードプレステーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど

今回は、ワードプレスのテーマカスタマイズしてオリジナルデザインにするとき …

【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法

今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。 よくあ …

スクロール後に変な位置に移動するタイトルをcssのpositionで直す(wp rootstrapテーマ)

今回は、管理人がワードプレスサイト作ってる時に、要素が変な位置に移動して …

【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)

今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。 絵は …

有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)

今回は、身近なサービスとかに使われている色って、カラーコードだとどうなっ …