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>
<input type="radio" class="radio" id="open" name="btn" /><label class="btn btn-open" for="open">開く</label>
<input type="radio" class="radio" id="close" name="btn" checked="checked" /><label class="btn btn-close" for="close">閉じる</label>
<div class="box">制御されるコンテンツ</div>
</div>

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

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

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

ラジオボタンにボタンっぽい見た目と押したときのスタイルを入れました。そしてコンテンツが見えやすいように枠を付けました。HTMLの結果です。

制御されるコンテンツ

すべての要素が表示されています。ボタンを押しても何も起きませんし、開く・閉じるボタンの両方が表示されています。また、ラジオボタンが見えてしまっています。

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

HTML
<div class="add-control">
<input type="radio" class="radio" id="open" name="btn" /><label class="btn btn-open" for="open">開く</label>
<input type="radio" class="radio" id="close" name="btn" checked="checked" /><label class="btn btn-close" for="close">閉じる</label>
<div class="box">制御されるコンテンツ</div>
</div>

ボタンのコントロール用クラスを親要素のdivに追加しています。

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

CSS
/* radio non-display */
.add-control .radio{
    display: none;
}
/* button control */
.add-control #close:checked ~ .btn-close {
    display: none;
}
.add-control #close:checked ~ .btn-open {
    display: table;
}
.add-control #open:checked ~ .btn-close {
    display: table;
}
.add-control #open:checked ~ .btn-open {
    display: none;
}
/* content control */
.add-control #close:checked ~ .box {
    display: none;
}
.add-control #open:checked ~ .box {
    display: block;
}

処理の内容は、

  • ラジオボタンはいらないので非表示。
  • 閉じるボタンが押された → 閉じるボタン非表示・開くボタン表示。コンテンツ非表示。
  • 開くボタンが押された → 開くボタン非表示・閉じるボタン表示。コンテンツ表示。

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

制御されるコンテンツ

HTMLとCSSだけで開く・閉じるボタンができました。

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

このサンプルでは、初期状態を『閉じるボタン+コンテンツ表示』に変えるのはかんたんです。htmlのinput要素で、閉じるボタンからchecked属性をはずして、開くボタンのほうにつけるだけです。

HTMLの結果だけを表示します。

制御されるコンテンツ

【解説】CSSのボタン切り替えのポイント(:checked 疑似クラス)

『開く・閉じる』ボタンの切り替え、コンテンツの表示・非表示には、CSSの:checked疑似クラスを使う

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

サンプルコードでは、閉じるボタンのinput要素に初期値としてchecked属性がつけているので、閉じるボタンはかくれ、開くボタンが表示されます。

<input type="radio" class="radio" id="close" name="btn" checked="checked" />

【解説】HTML文のボタン切り替えのポイント(radioボタンを使用)

HTMLは、radioボタンをカスタマイズして開く・閉じるボタンに使う

radioボタンを使う理由は、タブは常に1つしか選択できないので、radioボタンの機能が『開く』『閉じる』の一方を選択するのと動きが同じだからです。

radioボタンをクリックすると、input要素のchecked属性が自動的に切り替わるので、この動作をそのまま開く・閉じるボタンの切り替え、コンテンツの表示・非表示に使います。

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

【解説】ボタン切り替えのCSS記述

ボタンの切り替えの制御はCSSで行う

HTMLのradioボタンのchecked属性だけで、ボタンの切り替え動作を行なっているので、JavaScriptは必要ありません。

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

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

/* button control */
.add-control #close:checked ~ .btn-close {
    display: none;
}
.add-control #close:checked ~ .btn-open {
    display: table;
}
.add-control #open:checked ~ .btn-close {
    display: table;
}
.add-control #open:checked ~ .btn-open {
    display: none;
}
/* content control */
.add-control #close:checked ~ .box {
    display: none;
}
.add-control #open:checked ~ .box {
    display: block;
}

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

  • checked属性が付いたボタンはかくして、もう一方のボタンを表示する
  • 閉じるボタンにchecked属性がついて、連動してコンテンツをかくすときはdisplay: noneを使う
  • 開くボタンにchecked属性がついて、連動してコンテンツを表示するときはdisplay:tableで表示(tableを使うと文字列の長さにボタン幅が自動調整されます。)

まとめ

  • HTMLはradioボタンのchecked属性を使う
  • CSSは:checked疑似クラスを使う

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

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

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

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

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

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

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

tadtadya.com

_

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

*

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

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