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

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
html5 css3 image
イラストACの画像をもとに加工しています。

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

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

『Run Pen』を押すと、今回のソースコードサンプルが表示されます。これを、HTMLとCSSだけでつくります。

少しづつ実装するので、とてもかんたんで分かりやすいと思います。

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

サンプルをつくっていく前に、JavaScriptを使わないメリットを説明します。

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

  • ブラウザからコンテンツを閉じたり追加表示したりするページのhttpリクエストを送信する
  • Webサーバーから、コンテンツが開いた状態(追加された状態)のHTMLを返す
  • ページを最初に表示するときは、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:hover {
    cursor: pinter; 
}
.btn:active {
    background: rgb(127, 194, 239);
}
.box {
    border: 2px solid #d685b0;
    border-radius: .3em;
    height: 200px;
}

/* close button */
.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);
}

/* all-display */
.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
/* checkbox non-display */
.add-control .checkbox {
    display: none;
}

/* close button's control */
.add-control .action-close #close:checked ~ .btn {
    display: none;
}
.add-control .action-close #close:checked ~ .box {
    display: none;
}

/* all-display's control */
.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だけで閉じる・すべてを表示ボタンができました。

これまで順を追ってサンプルコードを作ってきました。それを整理すると、最初にみたCodePenのHTMLとCSSになります。

【解説】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でのボタン処理の記述はサンプルコードの後半部分で、たったこれだけです。

/* checkbox non-display */
.add-control .checkbox {
    display: none;
}

/* close button's control */
.add-control .action-close #close:checked ~ .btn {
    display: none;
}
.add-control .action-close #close:checked ~ .box {
    display: none;
}

/* all-display's control */
.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あたりを変えれば劇的に変わります。

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

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

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

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

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

tadtadya.com

_

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

*

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

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