2019.10.05目次やアコーディオンメニューなどでよく見る、クリックで表示・非表示の切り替えができるボックスをcssのみで実装する方法の紹介です。ネタバレを隠したりするのにも使えます。FontAwesomeを使って、表示しているときと非表示のときのアイコンが変わるようにしています。下記のコードがhtmlです。</div><!--//ラベル2ここまで--></div><!--//switchbox-->要素を増やすときは、チェックボックスのID(id=”label1′′の部分)とラベルの関連付け(for=”label1′′の部分)を変更して使ってください。for=はラベルと他の部品を紐づけるために使用します。することで、ラベルをクリックした場合でもチェックボックスにチェックが入るようになります。下記のコードがcssです。'\f068';}チェック状態を判断して表示・非表示を切り替えたり、アイコンを入れ替えるために、セレクタ「checked」と「+」を使っています。セレクタ「checked」とはcss3で追加されたクラスです。チェックボックスやラジオボタンにチェックが入っているかどうかを判断したいときに使います。セレクタ「+」とは+を使うと、その要素の直後に隣接している要素のスタイルを指定できるようになります。チェックボックス→Label→divという順で要素を並べることで、チェックボックスの状態によってLabelとdivのスタイルを指定できます。うまく動作しないときはWordPressを使っている場合、pタグが自動挿入される仕様が影響しているかもしれません。ページのソースを確認してlabelやdivの前にpタグが入ってしまっている場合、「WordPressで勝手に入るpタグを消す方法-隣接セレクタが効かなときにも」を参考にしてみてください。こちらの記事もおすすめです副業おしゃれなアイキャッチ画像を作るためのフリーサービス3点セットおしゃれなアイキャッチ画像を作成するのに便利な無料ツールを紹介します。デザインセンスがなくてもOK!副業2019年WordPressおしゃれなテーマ無料&有料まとめ2019年おすすめのおしゃれなWordPressテーマを無料・有料別に紹介します。どのテーマも高機能で、SEO対策済み・レスポンシブデザインです。手抜きに見えない手の抜き方を日々模索しています。手抜きに見えない手の抜き方を日々模索しています。\ニケッチャをフォロー/カテゴリー別人気記事クリックで表示・非表示の切り替えができるボックスをcssのみで実装する2019.10.052019.10.12WordPressプラグインなしで人気記事リストを表示する方法2パターン2019.10.06ウェブページにできる謎の隙間「﻿」(BOM)の消し方2019.10.06はてなブログからWordPressへの移行手順と注意点2019.09.242019.10.05一番簡単なWordPressの始め方!サーバーの知識不要2019.10.05おすすめサービス。