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

CSSのみで超軽量な、クリック開閉式ボックスのつくりかた【FAQやよくある質問に・jQuery/javascript不使用】

   

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

今回は、管理人がリメイクしていたサイトで、『CSSだけでクリック開閉式ボックス』を実装してみたので、その様子を紹介します。
複雑なエフェクトについてはjQuery/javascriptを使ったバージョンのほうが向いていますが、CSSのみならシンプル・軽量に作ることができます。さっそくコードや動作例を見ていってみましょう。

クリック開閉式のボックスとは?通常はどのように作る?

いろいろなところで使われていますが、例えば有名なサイトだと、ヤフー株式会社のFAQとかにもあります(引用)。

『+』のところをタップ/クリックすると、回答が表示されるものです。読者としては、『自分が見たい項目だけチェックできるので、スクロールが長くならなくて使いやすくなる』みたいな気持ちでしょうか。

よくある作り方だと、javascript/jQueryで作ることが多いと思います。コード自体は『$('.クラス名').click(function (){開ける処理});』みたいに書いてシンプルになります。しかし、『この機能のためだけにjQueryを読み込むのも微妙』となるのも事実。そこで、今回はCSSを使います。

CSSのみで超軽量な、クリック開閉式ボックスのつくりかた

というわけでコードを見ていきますが、今回の『CSSのみクリック開閉式FAQボックス』は、チェックボックスでクリック判定をしています。このサイトでも以前に『スマートフォンメニュー』などで取り上げたテクニックですので、参考になさってください。

コード例(CSS/HTML)

ポイント1~チェックボックス&対応ラベルが『checked』のとき、display: none;を解除

チェックボックスは、対応ラベルをクリックで代用するので、『display: none;』で非表示にしています。

qanda-contentという要素が、クリックで出てきたり閉じたりする部分です。通常はdisplay: none;になっていますが、チェックボックス&対応ラベルが『checked』になったときに、display: none;が解除されます。『visibility:hidden』だと、空ボックスが残るかも。
height指定は、固定の数値『10em』などだと、文章が長くなった時はみだすので、パーセント指定にします。

ポイント2~複数設置する場合は、id属性に別々の値を設定


『FAQボックス・Q&A』という用途なので、項目が1ページに複数あるものと考えられます。複数使う場合は、チェックボックス&対応ラベルには同じ値にしますが、他の項目(質問1・質問2みたいに)とは別の値をidに割り当てます。idが被ると不具合がでます。

CSSのみで超軽量な、クリック開閉式ボックス・実装例


管理人が持っている曲アレンジサイトにつけてみました。通常は閉じており、クリックすると項目を読むことができるようになります。実際の操作は、以下のリンクより行ってみてください。

あとがき・まとめ

  • クリック開閉式ボックスはjavascriptで作ることが多いが、CSSのチェックボックスなどでも作れる
  • 今回のやり方はチェックボックス&対応ラベルが『checked』のとき、『display: none;』を解除
  • 複数作るときは、id属性に別々の値を指定

まとめるとこんなところでしょうか。管理人のサイトでは、以前のバージョンではFAQ部分が全項目表示されていて、スクロールが多くて読みにくい状況でしたが、改善しつつ軽量なままにできたと思います。豪華なエフェクトをつけたい場合はjsで、軽量・シンプルにしたい場合はCSSみたいな形で、検討してみてください。

◆この記事で問い合わせ

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。
『サイトを既にお持ちで、リニューアル』の場合は、¥10万以下でご対応します(月額管理費/24回支払い縛りなどの強制無し)。

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

  関連記事

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

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

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

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

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

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

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

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

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

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

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

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

【スマホ対応サイト】レスポンシブで、スマホからアクセスしたときに横にずれる・ディスプレイ領域の外にはみ出る現象を直したい

今回は、スマホ対応や管理をしやすくするためにレスポンシブにしたは ...