HTMLとCSSだけで簡単に作る。軽量な閉じる・すべて表示ボタン

他言語サイト
翻訳はみつかりませんでした
HTML5 CSS3 ロゴ

HTMLとCSSだけで『閉じる・すべて表示』ボタンを簡単に作る方法をご紹介します。このボタンは、画面を遷移しないでコンテンツを閉じたり追加表示します。JavaScriptは使いません。

これは、コンテンツを制御するときに、Webサーバーにリクエストを送信しないので、Webページのパフォーマンスを上げることができます。

JavaScriptを使わずにコンテンツを『閉じる・すべて表示』

HTMLとCSSだけでボタンを作成するメリットは、Webサーバにリクエストする回数を最小限にすることです。そのしくみは、

  • ブラウザからコンテンツを閉じたり追加表示したりするページのhttpリクエストを送信する
  • レスポンスにコンテンツが開いた状態(追加された状態)のHTMLを付ける
  • Webサーバからレスポンスを返す
  • ページを最初に表示するときは、CSSでコンテンツを初期状態にする
  • コンテンツを閉じたり追加表示する動作をCSSで制御する

です。これは、コンテンツを閉じたり追加表示する動作を画面を遷移しないで行います。

また、JavaScriptを使わないのでブラウザ側の負荷を軽くすることができます。結果的にWebページのパフォーマンスを向上させることができます。

ボタンの動作をCSSのみで行なう簡単な作り方

正確にはHTMLも関係していますが、コンテンツの『閉じる・すべて表示』の動作のほぼすべてはCSSだけで行ないます。

CSSの記述は簡単です。ソースコードのサンプルを作りながら見ていきましょう。

ソースコードサンプルのボックスをタップすると(またはボックスにマウスを合わせると)、右上にコピーボタンが出てコードのコピーができます。

慣れないうちは、とりあえずコピー&ペーストで、自分で動かすところから始めると良いです。

閉じる・すべて表示ボタンのソースコードサンプル

まずは、HTMLからです。

HTML
<div>
<div class="action-close">
<input type="checkbox" class="checkbox" id="close" name="close" /><label for="close" class="btn">閉じる</label>
<div class="box">閉じることができるコンテンツ</div>
</div>
<div class="action-allopen">
<p>ここに序文があります。</p>
<input type="checkbox" class="checkbox" id="allopen" name="allopen" /><label for="allopen" class="btn">すべてを表示</label>
<div class="box">
<p>追加された本文です</p>
<p>追加された本文です</p>
<p>本文の終わりです。</p>
</div>
</div>

HTMLはこれだけです。閉じる・すべて表示ボタンは、チェックボックスとラベルで作りました。そして、閉じる/すべてを表示するコンテンツボックスです。

ボタンには、ボタンとしての機能はありません。次はCSSです。

CSS
.btn {
    color: #fff;
    background: rgba(127, 194, 239, .5);
    padding: .3em .5em;
    border-radius: .3em;
    text-align: center;
    display: table;
    cursor: pinter; 
}
.btn:active {
    background: rgb(127, 194, 239);
}
.box {
    border: 2px solid #d685b0;
    border-radius: .3em;
    height: 200px;
}

/* 閉じるボタンのコンテンツ */
.action-close {
    position: relative;
    margin-top: 2em;
}
.action-close .btn {
    position: absolute;
    right: 0;
    top: -1em;
}
.action-close .box {
    margin-bottom: 2em;
    border: 2px solid rgb(127, 194, 239);
}

/* すべて表示のコンテンツ */
.action-allopen .btn {
    margin: 0 auto;
}
.action-allopen .box {
    border: none;
    height: auto;
}

チェックボックスのラベルにボタンっぽい見た目と押したときのスタイルを入れました。そのほか微調整をしています。HTMLの結果です。

閉じることができるコンテンツ
ここに序文があります。

追加された本文です
追加された本文です
本文の終わりです。

すべての要素が表示されています。ボタンを押しても何も起きません。また、チェックボックスが見えてしまっています。

このままでは何の意味もありません。ここでCSSに、ボタン制御の処理を追加します。まずは、HTMLを変更します。

HTML
<div class="add-control">
<div class="action-close">
<input type="checkbox" class="checkbox" id="close" name="close" /><label for="close" class="btn">閉じる</label>
<div class="box">閉じることができるコンテンツ</div>
</div>
<div class="action-allopen">
<p>ここに序文があります。</p>
<input type="checkbox" class="checkbox" id="allopen" name="allopen" /><label for="allopen" class="btn">すべてを表示</label>
<div class="box">
<p>追加された本文です</p>
<p>追加された本文です</p>
<p>本文の終わりです。</p>
</div>
</div>

ボタンのコントロール用クラスを親要素のdivに追加しました。そのほかに変更はありません。

次に、CSSに、add-controlクラスについてコードを追加します。

CSS
/* チェックボックスの非表示 */
.add-control .checkbox {
    display: none;
}

/* 閉じるボタンのコントロール */
.add-control .action-close #close:checked ~ .btn {
    display: none;
}
.add-control .action-close #close:checked ~ .box {
    display: none;
}

/* すべてを表示のコントロール */
.add-control .action-allopen .box {
    display: none;
}
.add-control .action-allopen #allopen:checked ~ .btn {
    display: none;
}
.add-control .action-allopen #allopen:checked ~ .box {
    display: block;
}

処理の内容は、

  • チェックボタンはいらないのでかくす。
  • 閉じるボタンが押された → 閉じるボタンをかくす・コンテンツボックスをかくす
  • すべてを表示で、追加表示分のコンテンツボックスをかくす(初期状態)
  • すべてを表示ボタンが押された → すべてを表示ボタンをかくす・追加表示分のコンテンツを表示

です。くわしい解説はあとのほうでします。まずは、動かしてみます。次にHTMLの結果です。

閉じることができるコンテンツ
ここに序文があります。

追加された本文です
追加された本文です
本文の終わりです。

HTMLとCSSだけで閉じる・すべてを表示ボタンができました。

ここまでは、順を追ってサンプルコードを作ってきました。これを整理するとHTML,CSSはこのようになります。

HTML
<div class="action-close">
<input type="checkbox" class="checkbox" id="close" name="close" /><label for="close" class="btn">閉じる</label>
<div class="box">閉じることができるコンテンツ</div>
</div>
<div class="action-allopen">
<p>ここに序文があります。</p>
<input type="checkbox" class="checkbox" id="allopen" name="allopen" /><label for="allopen" class="btn">すべてを表示</label>
<div class="box">
<p>追加された本文です</p>
<p>追加された本文です</p>
<p>本文の終わりです。</p>
</div>
CSS
.btn {
    color: #fff;
    background: rgba(127, 194, 239, .5);
    padding: .3em .5em;
    border-radius: .3em;
    text-align: center;
    display: table;
    cursor: pinter; 
}
.btn:active {
    background: rgb(127, 194, 239);
}
.box {
    border: 2px solid #d685b0;
    border-radius: .3em;
    height: 200px;
}

/* 閉じるボタンのコンテンツ */
.action-close {
    position: relative;
    margin-top: 2em;
}
.action-close .btn {
    position: absolute;
    right: 0;
    top: -1em;
}
.action-close .box {
    margin-bottom: 2em;
    border: 2px solid rgb(127, 194, 239);
}

/* すべて表示のコンテンツ */
.action-allopen .btn {
    margin: 0 auto;
}
.action-allopen .box {
    border: none;
    height: auto;
}

/* チェックボックスの非表示 */
.checkbox {
    display: none;
}

/* 閉じるボタンのコントロール */
.action-close #close:checked ~ .btn {
    display: none;
}
.action-close #close:checked ~ .box {
    display: none;
}

/* すべてを表示のコントロール */
.action-allopen .box {
    display: none;
}
.action-allopen #allopen:checked ~ .btn {
    display: none;
}
.action-allopen #allopen:checked ~ .box {
    display: block;
}

【解説】CSSのボタン処理のポイント(:checked 疑似クラス)

閉じる・すべてを表示ボタンの処理、コンテンツの表示・非表示には、CSSの:checked疑似クラスを使う

:checked疑似クラスは、HTMLのinput要素のchecked属性と連動しています。HTMLのchecked属性は、input要素のチェックボタンやラジオボタンなどで選択されると、checked属性がつけられます。

【解説】HTML文のボタン処理のポイント(チェックボックスを使用)

HTMLは、チェックボックスをカスタマイズして閉じる・すべてを表示ボタンに使う

チェックボックスを使う理由は、checked属性が使えるのと、1つのボタンで独立しているところが、一度押したら消えるボタンで流用しやすいからです。

チェックボックスにチェックをつけると、input要素にchecked属性がつけられるので、この動作をそのまま閉じる・すべてを表示ボタンの処理、コンテンツの表示・非表示に使います。

チェックボックスは内部の機能だけが必要なので、CSSのdisplay:noneでかくします。そして、ボタンの表示は、チェックボックスに隣接するテキスト部分(label要素)で表現します。

【解説】ボタン処理のCSS記述

ボタン処理の制御はCSSで行う

HTMLのチェックボックスのchecked属性だけで、ボタン処理を行なっているので、JavaScriptは必要ありません。

HTML, CSSだけでボタン処理ができるのは、その制御の根幹をHTMLにある機能だけで実現しているからです。CSSは、それを見た目の面でカバーしているだけです。

CSSでのボタン処理の記述はサンプルコードの後半部分で、たったこれだけです。

/* チェックボックスの非表示 */
.add-control .checkbox {
    display: none;
}

/* 閉じるボタンのコントロール */
.add-control .action-close #close:checked ~ .btn {
    display: none;
}
.add-control .action-close #close:checked ~ .box {
    display: none;
}

/* すべてを表示のコントロール */
.add-control .action-allopen .box {
    display: none;
}
.add-control .action-allopen #allopen:checked ~ .btn {
    display: none;
}
.add-control .action-allopen #allopen:checked ~ .box {
    display: block;
}

CSSでは次の動作を制御しています。

  • checked属性が付いたボタンはかくす。
  • 閉じるボタンにchecked属性がついて、連動してコンテンツをかくすときはdisplay: noneを使う
  • すべてを表示ボタンにchecked属性がついて、連動してコンテンツを表示するときはdisplay:blockを使う

まとめ

  • HTMLはチェックボックスのchecked属性を使う
  • CSSは:checked疑似クラスを使う

HTMLとCSSだけで閉じる・すべてを表示ボタンの操作をすることは、見た目と動きで難しく感じますが、作り方はかんたんですね?

サンプルコードでは、デザインはシンプルにしています。もっとオシャレにしたい場合は、ラベルとコンテンツエリアのborder, color, backgroundあたりを変えれば劇的に変わります。

1つ注意点として、:checked疑似クラスはCSS3から実装された機能です。現在のブラウザは、ほぼ対応しているので気にすることはないですが、どうしても動かない場合の知識として押さえておきましょう。

今回ご紹介した閉じる・すべてを表示ボタンと同じ作り方で、JavaScriptを使わないその他の機能も実装できます。

最近Webカテゴリでよく読まれている記事です。
post-cta-image
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!