閉じる制御されるコンテンツHTMLとCSSだけで開く・閉じるボタンができました。これまで順を追ってサンプルコードを作ってきました。それを整理すると最初にみたCodePenのHTML&CSSになります。初期状態を『閉じるボタン+コンテンツ表示』に変えるのはかんたんです。htmlのラジオボタンで、閉じるボタンからchecked属性をはずして開くボタンにつけるだけです。HTMLの結果だけを表示します。疑似クラス)『開く・閉じる』ボタンの切り替え、コンテンツの表示・非表示には、CSSの:checked疑似クラスを使う:checked疑似クラスは、HTMLのinput要素のchecked属性と連動しています。HTMLのchecked属性は、input要素のチェックボタンやラジオボタンなどで選択されると、checked属性がつけられます。サンプルコードでは、閉じるボタンのinput要素に初期値としてchecked属性がついるので、閉じるボタンはかくれ、開くボタンを表示します。/>【解説】HTML文のボタン切り替えのポイント(radioボタンを使用)HTMLは、radioボタンをカスタマイズして開く・閉じるボタンに使うラジオボタンは、複数のボタンで選ぶことができるのがひとつだけで、『開く』『閉じる』の一方を選択するのと動きが同じです。これがラジオボタンを使う理由です。ラジオボタンをクリックすると、input要素のchecked属性が自動的に切り替わるので、これを開く・閉じるボタンの切り替え、エリアの表示・非表示に使います。ラジオボタンは内部の切り替え機能だけが必要なので、CSSのdisplay:noneでかくします。ボタンの表示はラジオボタンのとなりにあるテキスト部分(label要素)で表現します。【解説】CSSのボタン切り替えボタンの切り替えはCSSで行うラジオボタンのchecked属性(HTML)だけでボタンを切り替えるので、JavaScriptはいりません。HTML&CSSだけでボタンが切り替えられるのは、HTMLにある機能だけでコントロールするからです。CSSはそれを見た目の面でカバーしているだけです。CSSでのボタンの切り替えの記述は、さっき見たように20行もありません。(checked疑似クラスがついたところ)checked属性がついたボタンはかくして、もう一方のボタンを表示。閉じるボタンにchecked属性がついて、連動してコンテンツをかくす。noneを使う)開くボタンにchecked属性がついて、連動してコンテンツを表示。(display:tableで表示)(tableを使うと文字列の長さにボタン幅が自動調整される。inline-blockと同じ。)ボタンの処理でやっていることはこれだけです。ひとつの方法これまで見てきたサンプルよりも、もっと短いコードでかんたんな方法があります。ラジオボタンをチェックボックスにする方法です。ボタンの数がひとつなので、その分だけCSSのボタンのコントロールが少なくなります。20行が10行くらいまで少なくできます。こっちを先にいってくれよ!と思うでしょうが、チェックボックスは機能の拡張がむずかしいです。(例えば『ボタンを3個以上に増やす』とか。)サンプルで見た方法は、ラジオボタンを増やすだけでできます。チェックボックスは、ボタンがふたつに限定されるオン/オフ機能で使えます。サンプルの『閉じる・開く』もそのひとつです。処理の内容はほとんど一緒です。HTMLとCSSの完成したサンプルコードからHTML結果まで一気に見ていきます。制御されるコンテンツさらにかんたんにできましたね?チェックボックス版のポイントは、ラベルをHTMLに書かずに、CSSの::before疑似クラスで書いていることです。あとは、CSSでエリアを切り替えるとき一緒にボタン名を切り替えるだけです。HTMLのラベルは空で作る。ボタン名はCSSの::before疑似クラス+contentプロパティで作る。ボタン名を切り替える。ちなみに、::before疑似クラスではなく、HTMLにボタンをふたつ用意して"display:none"で制御することもできます。;}まとめHTMLはradioボタンのchecked属性を使うCSSは:checked疑似クラスを使うHTMLとCSSだけでコントロールする開く・閉じるボタンは、見た目と動きでむずかしく感じますが、じっさいはかんたんですね?サンプルコードではデザインをシンプルにしています。backgroundあたりを変えれば劇的に変わります。:checked疑似クラスはCSS3から実装された機能です。現在のブラウザは対応しているので気にすることはないですが、どうしても動かない場合の知識として押さえておきましょう。今回ご紹介した開く・閉じるボタンとまったく同じ作り方で、JavaScriptを使わないその他の機能も実装できます。/HTMLとCSSだけで簡単に作る。軽量な開く・閉じる切り替えボタンCSSHTML開く・閉じるボタン:checked疑似クラスHTML&CSSの本どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。関連記事SNSでも記事を配信しています。*メールアドレス(公開されません。*このフォームを使用することにより、このウェブサイトによるデータの保管および取り扱いに同意するものとします。コメントデータの処理方法の詳細はこちらをご覧ください。(全16回)日本国憲法を読む。views今上天皇の読み方。Vol.3天皇の皇位継承の解決策は既にある。Vol.2天皇の男系・女系・双系の違い。Vol.14図で見りゃわかる。このサイトの使用を継続することで、その使用に同意したとみなされます。コントロール方法を含む詳細についてはこちらをご覧ください。(1)プロフィールシステムエンジニア&プログラマ。SIerに12年、フリーと会社員を交互に繰り返すこと4年。心疾患をわずらってしまい実家に戻って静養中。何もしないのはヤバいので、今まで得てきたものをWebサイトで発信しながら少しだけ活動中。静養しながらできることをして、迷走して、転んで、怪我してをくり返している。コメント等いただいておりますが、回答・回答は遅くなりがちです。(1週間以内で早い方。)20%くらいの力しか出せてないので、その点はご了承ください。コメント等のコミュニケーションは面と向かって話すのと同じだと思っています。初対面でいきなりケンカ腰で来られると、『いきなり刺されるかも?』と同じくらいに感じるので、100%レスポンスがあるとはかぎりません。そのエネルギーがないだけなんですが...くわしく見るSNSでも記事を配信しています。ただ屋ぁのブログ.topこの記事を気に入ったらぜひシェアも!!。