HTMLとCSSだけで簡単に作る。好き勝手に言ってみるゆるい話?開業・起業Amazon生活サイト内検索HTMLとCSSだけで簡単に作る。軽量な閉じる・すべて表示ボタン-ツイート-シェア---LINEで送る-B!ブックマーク-pocket-rss2019-01-232019-08-30イラスト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の記述はかんたんです。ソースコードのサンプルを少しづつ実装しながら見ていきましょう。ソースコードサンプルのボックスにタップやマウスを合わせると、右上にコピーボタンが出ます。慣れないうちは、とりあえずコピー&ペーストで、自分で動かすところから始めると良いです。閉じるボタンのソースコードサンプルまずは、閉じるボタンから作ります。239);}HTMLはチェックボックスとラベル、閉じられるエリアだけです。閉じるボタンは、チェックボックスとラベルで作りました。ボタンにはまだボタン機能はありません。CSSは、チェックボックスのラベルにボタンっぽい見た目と、ボタンを押したときのスタイルを入れました。そのほかは細かい見た目の調整です。閉じるボタン閉じる閉じることができるコンテンツボタンを押してもチェックボックスが変化するだけでコンテンツはかくれません。見えてはいけないチェックボックスが見えています。このままでは何の意味もありません。そこで、CSSにボタンの処理を追加します。HTMLを変更します。--></div>ボタンのコントロール用クラスを親要素のdivに追加しました。そのほかに変更はありません。コードの全文はこうなります。</div></div>次にCSSにadd-controlクラスのコードを追加します。none;}チェックボックスとラベルをボタンに変身させる処理はこれだけです。同じ階層を見る要素と同じ階層にある要素に対してスタイルを適用させるためのセレクタ。兄弟(姉妹)セレクタとも言う。red;}CSSのボタンコントロールの処理チェックボタンを非表示。none;}さっそく動かしてみましょう。閉じる閉じることができるコンテンツCSSでボタンの動きができました。次は『すべて表示』ボタンのサンプルコードです。やることは一緒で、表示/非表示のデフォルトが逆になるだけです。サンプルへジャンプすべて表示ボタンのソースコードサンプルすべて表示ボタンのHTMLです。量が少ないので全文表示します。class="action-allopen"><p>ここに序文があります。class="box"><p>追加された本文です</p><p>追加された本文です</p><p>本文の終わりです。違いはクラス名をそれらしくなおしているのと、コメントが追加されてるくらいです。CSSもほとんど一緒ですが、とりあえずボタン機能がない状態からいきます。auto;}ボタンとコントロールされるエリアの見た目の部分を、さっきのCSSからもってきます。これもボタンとエリアの見た目の調整です。ボタンの機能はありません。auto;}一応ボタン機能のないHTMLを動かしてみます。ボタン機能のないサンプルここに序文があります。追加された本文です追加された本文です本文の終わりです。閉じるボタンと同じです。チェックボックスが見えてしまっているのと、ボタンを押してもチェックボックスが変わるだけです。これにさっきと同じようにCSSにボタン機能を追加します。block;}これもさっきとほぼ同じです。チェックボタンを非表示。.boxの最初の状態は非表示。コンテンツボックス表示HTMLを実行します。すべて表示のサンプルここに序文があります。追加された本文です追加された本文です本文の終わりです。すべて表示ボタンができました。<p>ここに序文があります。<p>本文の終わりです。疑似クラス)閉じる・すべてを表示ボタンの処理、コンテンツの表示・非表示には、CSSの:checked疑似クラスを使う:checked疑似クラスは、HTMLのinput要素のchecked属性と連動しています。HTMLのchecked属性は、input要素のチェックボタンやラジオボタンなどで選択されると、checked属性がつけられます。【解説】HTML文のボタン処理のポイント(チェックボックスを使用)HTMLは、チェックボックスをカスタマイズしてボタンに使うチェックボックスを使う理由は、checked属性が使えるのと、on/offの機能が一度押したら消えるボタンで流用しやすいからです。チェックボックスでチェックをつけるとinput要素にchecked属性がつけられるので、ボタンの処理でコンテンツの表示/非表示に使います。チェックボックスは内部の機能だけが必要なので、CSSのdisplay:noneでかくします。ボタンの表示は、チェックボックスのとなりにあるテキスト部分(label)で表現します。【解説】CSSのボタン処理ボタン処理のコントロールはCSSで行うHTMLのチェックボックスのchecked属性だけでボタン処理を行うので、JavaScriptはいらないです。HTML&CSSだけでボタン処理ができるのは、そのコントロールをHTMLにある機能だけで行うからです。CSSは見た目の面でカバーしているだけです。CSSのボタン処理の部分はサンプルコードで見たように10行くらいです。checked属性がついたボタンはかくす。noneを使うボタンにchecked属性がついて、連動してコンテンツを表示するときはdisplay:blockを使うボタンの処理でやっていることはこれだけです。まとめHTMLはチェックボックスの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この記事を気に入ったらぜひシェアも!!。