HTMLとCSSだけで簡単に作る。好き勝手に言ってみるゆるい話?開業・起業Amazon生活サイト内検索HTMLとCSSだけで簡単に作る。軽量な開く・閉じる切り替えボタン-ツイート-シェア---LINEで送る-B!ブックマーク-pocket-rss2018-10-092020-02-09イラストACの画像をもとに加工しています。HTMLとCSSだけで『開く・閉じる』の切り替えボタンをかんたんに作る方法をご紹介します。画面を遷移しないでコンテンツを開閉します。JavaScriptは使いません。これは、コンテンツをコントロールするときWebサーバーにリクエストを送信しないので、Webページのパフォーマンスを上げることができます。Pen』を押すと、今回のソースコードサンプルが表示されます。これを、HTMLとCSSだけでつくります。実装するので、とてもかんたんで分かりやすいと思います。疑似クラス)【解説】HTML文のボタン切り替えのポイント(radioボタンを使用)【解説】CSSのボタン切り替えもうひとつの方法まとめJavaScriptを使わずにコンテンツを『開く・閉じる』サンプルをつくっていく前に、JavaScriptを使わないメリットを説明します。説明はいらない人はジャンプHTMLとCSSだけでボタンを作成するメリットは、Webサーバにリクエストする回数を最小限にすることです。そのしくみは、ブラウザからhttpリクエストを送信。Webサーバーから、コンテンツが開いた状態のHTMLを返す。CSSでコンテンツの初期表示を設定(初期状態は『開く』『閉じる』のどちらでもよい)コンテンツを開いたり閉じたりする切り替えをCSSで行う。これは、コンテンツの表示・非表示の切り替えで画面を遷移しません。JavaScriptを使わないのでブラウザの負荷を軽くすることができます。結果的にWebページのパフォーマンスが向上します。HTMLも関係していますが、コンテンツの『開く・閉じる』の動作はほぼすべてCSSだけで行ないます。CSSの記述はかんたんです。ソースコードのサンプルを少しづつ実装しながら見ていきましょう。ソースコードサンプルのボックスにタップやマウスを合わせると、右上にコピーボタンが出ます。慣れないうちは、とりあえずコピー&ペーストで、自分で動かすところから始めると良いです。開く・閉じるボタン切り替えのソースコードサンプルまずは次のHTML&CSSを見てください。200px;}HTMLはラジオボタンとそのラベルの2つずつでボタンを作って、コントロールされるエリアを用意しただけです。ボタンには、まだボタンとしての機能はありません。CSSは、ボタンっぽい見た目と押したときのスタイルを入れました。コンテンツが見えやすいように枠をつけました。この状態で動かしてみましょう。閉じる制御されるコンテンツボタンを切り替えるはずが、2つとも表示されています。見えてほしくないラジオボタンが見えてしまっています。ボタンを押してもラジオボタンが切り替わるだけで、エリアには何も起きません。このままでは何の意味もありません。ここでCSSに、ボタンをコントロールする処理を追加します。HTMLを変更します。class="box">制御されるコンテンツ</div></div>ボタンのコントロール用クラスを親要素のdivに追加しただけです。次に、CSSにadd-controlクラスについてコードを追加します。同じ階層を見る)要素と同じ階層にある要素に対してスタイルを適用させるためのセレクタ。兄弟(姉妹)セレクタとも言う。red;}処理の内容ラジオボタンはいらないのでかくす。閉じるボタンかくす・開くボタン表示。開くボタンかくす・閉じるボタン表示。くわしい説明はあとのほうでします。