HTMLとCSSだけで作る軽量サンプルのまとめ(:checked疑似クラス)

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
html5 css3 image
イラストACの画像をもとに加工しています。

CSS3のchecked疑似クラスを使えば、JavaScriptを使わない、軽量なコンポーネントを作ることができます。

閉じるボタンやタブ機能などのサンプルを用意しました。これはWebサーバーへのリクエストが1回なので、Webページのパフォーマンスを上げることができます。

今回は、:checked疑似クラスの特性を使ったサンプルを集めました。なるべく現場で使えるものを用意していますので、参考にしていただければ幸いです。

それぞれ解説記事も用意しています。5分程度の時間がかかりますが、ぜひ、合わせて見てください。

HTMLとCSSだけで処理を行いJavaScriptは使わない

今回のサンプルの共通点は、JavaScriptを使わずにHTMLとCSSだけで処理を行なうことです。

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

  • ブラウザからページのhttpリクエストを送信する
  • Webサーバーが、コンテンツのすべての情報を付けたレスポンスを返す
  • CSSは、コンテンツの表示/非表示、切り替えなど疑似クラスをつかってコントロールする

これは処理のすべてを画面を遷移しないで行います。

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

:checked 疑似クラスとはなにか?

まずはじめに、:checked疑似クラスがわからない人のために説明します。

-> 説明がいらない人はスキップ

:checked疑似クラスは、CSS3から追加された疑似クラスで、HTMLのchecked属性と連動しています。対象のHTMLは

  • チェックボックス(<input type="checkbox">)
  • ラジオボタン(<input type="radio">)
  • セレクトボックス(<option>)※1

選択する機能があるもので、選択されたタグ(要素)にchecked属性がつけられます。

CSSの:checked疑似クラスは、選択された要素(checked属性がついた要素)にスタイルを適用します。

:checked疑似クラスを使うと、いままではJavaScriptで行っていたものが、CSSでできるようになりました。

※1

セレクトボックスはW3Cが勧告した仕様ではなく、各ブラウザの開発元が独自に実装したものです。

セレクトボックスにchecked属性はありません。:checked疑似クラスはselected属性で判断します。

セレクトボックスに:checked疑似クラスを使うときは、W3C勧告よりもブラウザの対応状況をみる必要があります。

Css3_selectors_checked

CSS/Selectors/pseudo-classes/:checked - W3C Wiki

www.w3.org(W3C公式サイト)

_
W3C(ダブリュー・サン・シー)

World Wide Web Consortium

HTML, CSSの標準化団体。仕様の策定から勧告まで行う。HTML5からは策定は行わず勧告だけを行うようになった。

策定どのような機能を追加・変更・削除するのか決めること。
勧告決まった仕様の対応を開発元に促すこと。

『閉じる』ボタン・『すべてを表示』ボタン

ウェブページにウィンドウのようなコンテンツを表示するとき、閉じるボタンをつけることがあります。

また、文章やコンテンツの序文だけを表示し、その下に『すべてを表示』ボタンがあって、ぜんぶを見れないことがあります。

(『続きを読む』ボタンも同じです。)

新聞社や出版社のウェブページに多いですね?

このようにボタンを押すとボタンそのものが消えて、1回しか押すことができないものがあります。

そのようなボタンのサンプルです。ここでは、HTMLの結果だけお見せします。

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

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

こちらが解説です。

『開く』『閉じる』の切り替えボタン

閉じるボタンにはもうひとつ、ボタンが『開く』『閉じる』に切り替わるものがあります。これも:checked疑似クラスで作ることができます。

サンプルのHTML結果です。

制御されるコンテンツ

こちらが解説です。

タブによるコンテンツ切り替え

ボタンだけではありません。:checked疑似クラスでは、タブ機能も作れます。

タブはボタンの一種なのであたりまえといえばあたりまえですが。

サンプルのHTML結果です。

body1 body1 body1
body2 body2 body2
body3 body3 body3

こちらが解説です。

ドロワーメニュー(ハンバーガーメニュー)

:checked疑似クラスで、ドロワーメニューも作れます。ハンバーガーメニューとも言われます。

サンプルのHTMLの結果です。

こちらが解説です。

まとめ

ご紹介したサンプルは、すべて:checked疑似クラスとHTMLのchecked属性の連動を利用しています。

  • HTMLはchecked属性を利用する
  • CSSは:checked疑似クラスを使う

ポイントはこれだけです。見た目の動きからするとむずかしく感じますが、作り方はとてもかんたんです。

:checked疑似クラスはCSS3から実装された機能です。

いまのブラウザは、ほぼ対応しているので気にすることはないですが、どうしても動かない場合の知識として押さえておきましょう。

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

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

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

tadtadya.com

_

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

*

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

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