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

   

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

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

      2019/05/28

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

今回は、CSSのみで動作する、軽量でお洒落なスマートフォンメニューをサイトに実装してみたいと思います。

いままでだと、jQuery(javascriptライブラリ)とかで動かすことが多かった動くメニューですが、最近ではCSS3のアニメーション機能が充実しているので、CSSでやってみます。さっそく、見ていきましょう。

なぜ、jQueryではなくCSSのみで、タップでふわっと広がって透けるスマートフォンメニューを行うか?

jQueryでタップで開くスマホメニューは、このサイトにも実装されていました。最近、いままでなんとなく利用していたjQueryについて調べたところ、『ちょっとした機能ならば、CSSで代用できるんではないか?』と推測しました。

また、自分のサイト(このサイトなど)で、『jQueryはスマホアコーディオンメニューくらいしか使っていないのに、jQueryを何回も読み込むのは、リソース的に無駄が多いかな』と思ったこともあり、CSSの短いコードでやろうと思ったわけです。もちろん、jQueryが必要な機能をいっぱい実装したいときは、jQueryを使うべきですが。

CSSのみで、タップでふわっと広がって透けるスマートフォンメニュー実装例

ブラウザ表示例(ユーザーエージェントをスマートフォンに)

そんな感じで、サクッと作ってみました。このぶろぐについています。メニューは全部CSSですが、ユーザーエージェント判定の部分のみPHPです。

通常はこんな感じのメニューで・・・


メニュー部分をタップすると、ふわっと現れます。重なって透ける機能もつけてみました。ちょっとお洒落かもしれません。

実際のコード&ポイント

ポイントはcheckboxでクリック判定(ただし、チェック機能は使わないからdisplay: none;)、 transitionで時間指定、開いたメニューはposition指定してz-indexで重ねる(z-indexがうまく動かないときには、position指定が適切でない場合が多い)、opacityで透けさせる(checkedのとき、visibility: visible;にして、opacity: 0.9くらいにすると、ちょっと透ける)といったところです。

参考になったコード(CodePen/Pure CSS Accordion)

参考にしたコードは、海外のプログラムのコードなどを共有・紹介するサイト『CodePen』にあった『Pure CSS Accordion』でした。
アコーディオンみたいに開くタイプだったんだけど、『これメニューに使えんじゃね?』ってことで、特に『チェックボックスをクリック判定に使う』みたいなポイントで参考に。リストタグで項目を複数入れることにより、メニューみたいに機能するようになりました。

【参考】Pure CSS Accordion 2.0
https://codepen.io/raubaca/pen/PZzpVe

メリットは?→jQueryやプラグインカットで、サイトのファイルサイズ縮小とお洒落感を両立!

もちろん、見た目以外のメリットもあります。このサイトはWPテーマ・昔のstingerを改造して作っていますが、このテーマではアコーディオンメニューを動かすのに、『jQuery&base.js』を読み込まなければなりません。


footer.phpやfunctions.phpにjQuery&base.jsを読み込むようになってたので、CSSのみで実装できれば、これらをカットできます

さらに、wordpressということから、JavaScript読み込み調整系のプラグインもカットできます(jQueryが無いので、使う必要がない)。

『Speed Up – JavaScript To Footer』などをカットしたので、アクティブなプラグインは4つだけになりました。そういう取り組みを積み重ねた結果・・・・



シンプルで地味目な、デフォルトテーマtwenty seventeenで、(seoちぇきで計測)サイトのファイルサイズ229.6KB・読み込み2.427秒だったのが


ファイルサイズ53.4KB・読み込み1.452秒みたいに。コードのシンプルさは最近のstingerよりシンプルかもしれません。

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

  • jQueryじゃなくてCSSでも、簡単なアニメーションはできる
  • checkboxでクリック判定をすることができる(display: none;だと見えない)
  • transitionで時間指定して、動きをつける
  • position指定してz-indexで上に重ねることができる
  • opacityで透けさせることができる
  • jQueryなどの読み込みが減る分、ファイルサイズが小さく、読み込みも早くなる

といったところでしょうか。jQueryやCSSでできるポイントをしっかり見極めると、ファイルサイズを削ってリソース節約しつつ、ちょっと洒落たサイトにできるかと思いますので、皆さんもぜひチェックしてみてください。

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

【カテゴリ】 - CSS, webサイト高速表示 【タグ】 -

  関連記事

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

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

【WordPressモバイル高速化】pagespeed insightsモバイルスコアが大きく低下→原因はgoogle、お前だ(アドセンス自動広告)

今回は、WordPressサイト(重い)の高速化に取り組んでいて、pag …

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

今回は、一般的には『クソ重い』とされる、スライダー・スライドショー系の機 …

【重くて邪魔】WordPressのblock-libraryのCSSを読み込まなくする方法(wp deregister script関数・functions.php)

今回は、WordPressを新バージョンにしたときに、勝手に読み込まれる …

【WPサイト高速表示】ロリポWPコンテンツキャッシュで、速度の変動があるようです(不安定)

今回は、サイト表示速度に関わるキャッシュ話題です。 以前ロリポサーバーで …

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

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

【wordpress限界高速化】Pjax技術を使ってサイトを高速表示するプラグインと、エラーの対処

今回は、『遅い』とされていた(過去形)wordpressサイトを『Pja …

【ロリポwordpress高速表示でSP90超えろ】ロリポップサーバーで『コンテンツキャッシュ機能』提供開始・設定方法と効果のチェック

今回はサイトを高速表示するときに重要なポイントといえる『キャッシュ活用』 …

【WPテーマを軽くカスタマイズ】プチ静的化して、データベースアクセスやPHPファイルをへらしつつ同じデザインで

今回は管理人も利用しているWP(wordpress)サイトで、ちょっとだ …

【WPプラグイン・サイト高速化】EWWW Image Optimizerで、画像をサクッと圧縮して表示を速くしよう

今回は、サイトの高速化で、画像を圧縮してくれるものを試します 画像サイズ …

Googleがスマホ表示速度をランキング要因にすると発表・サイト制作者/ユーザーの対策は?

今回は2018年1月に、Googleの検索順位に影響する内容が公式に発表 …

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

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