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

  • -

    シェア
  • ---

    LINEで送る
  • -

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

    pocket
  • -

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

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

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

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

それぞれ解説記事も用意しています。5分程度の時間がかかりますが、合わせて見ていただければと思います。

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

今回のサンプルの共通点は、JavaScriptを使わずにHTMLとCSSだけで処理を実装していることです。

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

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

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

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

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

まずはじめに、: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疑似クラスは、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からは策定は行わず勧告だけを行うようになった。

策定

どのような機能を追加・変更・削除するのか決めること。

勧告

決まった仕様の対応を開発元に促すこと。

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

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

また、文章やコンテンツの序文だけを表示して、その下に『すべてを表示』ボタンがあって、このボタンを押さないと続きが見れないことがあります(『続きを読む』ボタンも同じです。)。

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

このように、ボタンを押すのは一度きりで、ボタンを押すとボタンそのものが消えるものがあります。

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

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

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

こちらが解説です。

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

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

サンプルのHTML結果です。

制御されるコンテンツ

こちらが解説です。

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

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

サンプルのHTML結果です。

body1 body1 body1
body2 body2 body2
body3 body3 body3

こちらが解説です。

まとめ

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

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

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

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

 

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

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

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

tadtadya.com

_

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

*

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

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