純粋なCSSを使用したスタイルスイッチャーの構築：チェック済み

数年前、Web開発者は、JavaScriptに依存せずに、CSSのみを使用して多くのものを実装および構築することができませんでした。しかし、今日、CSSは十分に成熟しているため、JavaScriptの1行を書くことなく強力なことをすることができます。また、CSSの力を示す「CSSのみアプローチ」に関する記事をいくつか読んだことがあるかもしれません。

CSSのみのアプローチに関しては、この投稿で使用するチェックされた擬似クラスセレクターを無視することはできません。もちろん、私はこのテクニックについて最初に書いた人ではなく、フォーム要素をJavaScriptの代替品として使用することに関するより広範な議論がありました。たとえば、Louis LazarisによるこのAdobeの記事とRyan Seddonによるこの素晴らしいスライドショー。

キーテイクアウト

The：CSSのチェックされた擬似クラスセレクターを使用して、JavaScriptのラインを書く必要なくスタイルスイッチャーを構築できます。チェックまたは選択されたラジオまたはチェックボックス要素を選択します。

The：チェックされた擬似クラスセレクターは、入力要素とラベル要素と組み合わせて動作します。ラベル要素の「for」属性は、クリックしたときに関連する入力要素を選択またはチェックするため、以下の使用を可能にします。
• CSSの「位置：固定」宣言は、「トップ」および「正しい」プロパティとともに、ページ上の要素を配置するために使用できます。 「Z-Index」プロパティは、ラベルがページ上の他の要素の上に留まることを保証します。
the：チェックされた擬似クラスセレクターを使用して、要素の背景を変更したり、コンテンツを非表示または表示したり、関連するラベル要素とのユーザーの対話に基づいて他のスタイルを適用したりすることができます。
• the：チェックされた擬似クラスセレクターは、隣接する兄弟セレクター（）および一般的な兄弟セレクター（〜）で動作し、ページ上の異なる要素間の相互作用を可能にします。この手法は、Webページにさまざまなインタラクティブな機能を作成するために使用できます。
• 使用：checked
要するに、
• ：チェックされた擬似クラスセレクターは、チェックまたは選択されたラジオまたはチェックボックス要素を表します（選択）します。ユーザーは、チェックボックスをチェックしたり、一連のラジオボタンで異なる値を選択して、これらの要素の状態を変更できます。
より深く掘り下げる前に、このチュートリアル全体で何を構築するかを理解するために、最終的なデモを見てください：
codepenでsitepoint（@sitepoint）によってチェックされた純粋なCSSを使用したペンAスタイルスイッチャーを参照してください。

さあ、始めましょう。

設定ボックスの構築

デモでは、ギアアイコンと、クリックしたときにいくつかのオプションがあるボックスが表示される方法に気付くはずです。そのボックスを構成するHTMLとCSSを説明する前に、次のコードをご覧ください。

<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span>  <span>position: absolute;
</span>  <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span>  <span>z-index: 10;
</span><span>}</span>

ラベルの表示にのみ関心があるため、上記のコードはチェックボックスとラジオボタンを非表示にするために使用されます。さらに、すべてのラベルには、ラベルがページ上の他の要素の上にあることを確認するために、Z-Indexプロパティを備えた設定ボックスエレメントのクラスがあります。

ここで、設定ボックスを構成するコードを分割できます。ギアボタンから始めましょう。これがHTML：

です

およびcss：

<span><!-- the gear icon that opens the box when you click on it -->
</span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>

フォーム要素をJavaScriptの代替品として使用することについて1つまたは2つの記事を読んだ場合、入力要素とラベルを一緒に使用する必要があることを知っている必要があります。そのため、ID値に一致する属性を備えたラベルを持つチェックボックス入力があります。また、CSSフックに使用するために設定BTNのクラスを追加しました。

<span><span>.settings-btn + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: 0;
</span>  <span>display: block;
</span>  <span>width: 35px;
</span>  <span>color: #e83737;    
</span>  <span>text-align: center;
</span>  <span>background: #fff;
</span>  <span>cursor: pointer;
</span><span>}</span>

CSSでは、ラベルには位置が与えられます。適切な方向のプロパティ/値（上部および右）の固定宣言。

>

次は、

を実質的に

に含める白い箱です。

html first：

およびcss：

<span><!-- the white box that contains the buttons -->
</span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>

ボックスは、クラス「ボタンワッパー」と「設定ボックスエレメント」を備えた単一のdiv要素です。先ほど言ったように、後者のクラスは主に要素にz-index値を与えるために使用されます。 「ボタン - ラッパー」は、DIV要素のスタイルに使用されます。ご覧のとおり、Divには200pxの幅と高さ240pxが与えられ、デモに表示される5つのボタンに対応しました。また、DIVには、固定の位置値と適切な権利および最上部のプロパティが与えられます。ここで留意する必要がある唯一のことは、適切なプロパティが幅と同じ値を持っている必要があるが、ネガティブで（ビューポートから消えてしまうため）。

残りのマークアップ、つまり5つのボタンのコードを見てみましょう。コメントは、それらが制御する背景スタイルを示しています：

<span><span>.buttons-wrapper</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: -200px; /* should match element width */
</span>  <span>width: 200px;
</span>  <span>height: 240px;
</span>  <span>background: #fff;
</span><span>}</span>

そして、ここにcss：

があります

最初のチェックボックスに「チェックされた」属性が与えられたことに注意してください。それは、デフォルトで強調表示されているものにしたいからです。 すべての入力フィールドにはIDがあり、すべてのラベルには、入力フィールドの1つのIDと一致する属性があります。そして、ご存知かもしれませんが、そのような手法の背後にある秘密は属性です。なぜなら、属性を持つラベルがクリックされると、その特定のラベルに関連付けられている要素が選択/チェックされるため、これにより使用するには：checked selector。

<span><!-- background styles -->
</span><span><!-- light background (#eaeaea) -->
</span><span><span><span><input</span> id<span>="light-layout"</span> class<span>="light-layout"</span> type<span>="radio"</span> name<span>="layout"</span> checked></span>
</span><span><span><span><label</span> for<span>="light-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Light Background<span><span><span></label</span>></span>
</span>
<span><!-- dark background (#494949) -->
</span><span><span><span><input</span> id<span>="dark-layout"</span> class<span>="dark-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span>
</span><span><span><span><label</span> for<span>="dark-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Dark Background
<span><span><span></label</span>></span>
</span>
<span><!-- image background -->
</span><span><span><span><input</span> id<span>="image-layout"</span> class<span>="image-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span>
</span><span><span><span><label</span> for<span>="image-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Image Background<span><span><span></label</span>></span>
</span>
<span><!-- pattern background -->    
</span><span><span><span><input</span> id<span>="pattern-layout"</span> class<span>="pattern-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span>
</span><span><span><span><label</span> for<span>="pattern-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Pattern Background<span><span><span></label</span>></span>
</span>
<span><!-- hide/show content -->
</span><span><span><span><input</span> id<span>="hide-show-content"</span> class<span>="hide-show-content"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="hide-show-content"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Hide/Show content<span><span><span></label</span>></span></span>

上記のすべてのラベルには、「レイアウトバットン」のクラスがあります。このクラスは、ボタンに幅、パディング、境界線などのデフォルトと一般的なスタイルを提供するために使用されます。他のクラスは、それぞれに一意のスタイルを追加するために使用されます。ギアアイコンとホワイトボックスを見たように、位置プロパティは、値が固定されており、適切な上部および右のプロパティで使用されます。すべてのラベルの最高値は、その前のラベルよりも45px大きいことに注意してください。これは、ボタンを重複せずに互いに上にスタックすることです。また、適切なプロパティ値はボタンの幅と同じですが、負です。

CSSコードの最後の部分をご覧ください：

<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span>  <span>position: absolute;
</span>  <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span>  <span>z-index: 10;
</span><span>}</span>

上記のCSSは、選択したラジオボタンに関連付けられたラベルのデフォルトスタイルを変更するために使用されます（4つのラジオボタンがあります）。隣接する兄弟セレクターを使用して、タイプ「ラジオ」の入力フィールドが先行するすべてのラベルをターゲットにしました。あなたが見ることができるように、背景と境界の特性には値＃e83737（赤みがかった色）と色のプロパティが値#fffに与えられました。本当に派手なものや複雑なものはありません。

HTMLの残りの要素は、divに包まれます：

上記のコードでは、設定ボックスのすべての要素を個別に配置したことに注意してください。そこでは、それらをすべてdivまたはセクション要素にすべて包み、この単一の要素を配置するため、物事をより簡単にすることができます。これは、親要素を選択できず、兄弟だけを選択できないという理由だけで行われます。

<span><!-- the gear icon that opens the box when you click on it -->
</span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>

この場合、すべてのメインコンテンツはdiv内にラップされます。そして、後で見るように、このdivのスタイルを変更できるようにするには、これに似たものを書くことでそのdivを選択する必要があります。

ここで、一般的な兄弟セレクターを使用してメインDIVを選択します。これが唯一の方法です。 ギアアイコンをクリックします

ギアアイコンをクリックすると、設定ボックスが表示されます。それを実現するためのコードは次のとおりです

<span><span>.settings-btn + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: 0;
</span>  <span>display: block;
</span>  <span>width: 35px;
</span>  <span>color: #e83737;    
</span>  <span>text-align: center;
</span>  <span>background: #fff;
</span>  <span>cursor: pointer;
</span><span>}</span>

ユーザーがギアアイコンをクリックすると、チェックボックスが選択され、ここにマジックが表示されます。ギアアイコンがクリックされたら、次のことが発生します。

隣接する兄弟セレクター（）を使用して、そのチェックボックスが選択され、ビューポートの右から200ピクセルを移動した後、すぐに

<span><!-- the white box that contains the buttons -->
</span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>

一般的な兄弟セレクター〜を使用して、クラス「ボタンワッパー」と「レイアウトバットン」を持つ要素が選択され、その後、それぞれ0ピクセルと30ピクセルがそれぞれ右から30ピクセルになるように移動します。ビューポート。

1. 隣接する兄弟セレクターと一般的な兄弟セレクターの両方は、この手法がそれらなしでは機能しないため、ここで不可欠です。

   背景の変更 ラジオボタンのHTMLコードを思い出させてください：

   <span>/* we don't want the input fields to appear, all we need is the labels */
   </span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
   </span>  <span>position: absolute;
   </span>  <span>visibility: hidden;
   </span><span>}
   </span>
   <span><span>.settings-box-element</span> {
   </span>  <span>z-index: 10;
   </span><span>}</span>

   私たちが変えるという背景は、.main-wrapper要素の背景です。 CSSは次のとおりです

   <span><!-- the gear icon that opens the box when you click on it -->
   </span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
   </span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>

   HTMLには、Type = "Radio"と4つのラベルの4つの入力要素があることがわかります。ラベルのいずれかがクリックされると、その特定のラベルに関連付けられている入力が選択され、したがって、次のように一致します：チェックされた擬似クラス。次に、どのラベルをクリックするかによって、上記の4つのスタイルの1つがメインラッパーに適用されます。

   コンテンツを隠す/表示

   ショー/非表示の要素の場合、チェックボックスを使用しています：

   そして、ここにcss：

   <span><span>.settings-btn + label</span> {
   </span>  <span>position: fixed;
   </span>  <span>top: 130px;
   </span>  <span>right: 0;
   </span>  <span>display: block;
   </span>  <span>width: 35px;
   </span>  <span>color: #e83737;    
   </span>  <span>text-align: center;
   </span>  <span>background: #fff;
   </span>  <span>cursor: pointer;
   </span><span>}</span>

   があります

   この場合、ブラウザに要素を選択し、表示するように設定するようにブラウザに指示します。ユーザーが関連するラベルをクリックすると、チェックボックスを選択します。

   結論

   <span><!-- the white box that contains the buttons -->
   </span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>

   このセレクター手法を使用してできることは他にもたくさんありますが、限界はあなた自身の創造性です。このテクニックが新しい場合、この記事が他の可能性を試すための出発点として役立つことを願っています。

   以下に、完了したデモ：

   があります

   codepenでsitepoint（@sitepoint）によってチェックされた純粋なCSSを使用したペンAスタイルスイッチャーを参照してください。

   チェックされた

   the：チェックされた擬似クラスは、主にチェックボックス、ラジオボタン、オプション要素などのフォーム要素で使用されます。ただし、HTML5属性の「コンテンツ誘導性」と組み合わせて、他の要素とともに使用することもできます。これにより、ユーザーが編集できるインタラクティブなコンテンツを作成し、「チェック」または「選択」状態にあるときに異なるスタイルを作成できます。以下を使用してスタイルスイッチャーを作成するには、最初にラジオボタンまたはラジオボタンを使用してフォームを作成する必要があります。各スタイルオプションのチェックボックス。次に、CSSでは、選択したオプションに応じてさまざまなスタイルを適用するために、次のようなチェックされた擬似クラスを使用します。これには、配色、フォント、レイアウト、またはWebページの外観のその他の側面を変更することができます。
   次のように使用できますか？ ：チェックされた擬似クラスを使用して、動的なコンテンツを作成できます。それを他のCSSセレクターおよびプロパティと組み合わせることにより、コンテンツを表示または非表示にすること、レイアウトの変更、ユーザーの選択に基づいてインタラクティブな機能を作成できます。これにより、ユーザーエクスペリエンスを大幅に向上させ、Webページをより魅力的でインタラクティブにすることができます。以下を使用できますか？ >はい、The：チェックされた擬似クラスを使用して、チェックボックスとラジオボタンをスタイリングできます。デフォルトでは、これらのフォーム要素は非常に基本的な外観を持っていますが、次のようなものを使用すると、Webサイトの残りの部分に合わせて外観をカスタマイズできます。選択したときに、これらの要素の色、サイズ、形状、さらにはアニメーションを変更できます。チェックされた擬似クラスは、一般に、スタイルスイッチャー、アコーディオン、タブ、モーダルなどのインタラクティブな機能を作成するために使用されます。また、チェックボックスやラジオボタンなどのフォーム要素をスタイリングしたり、「満足できる」属性を持つ編集可能なコンテンツを作成するために使用することもできます。ユーザー入力に反応する能力は、ユーザーエクスペリエンスを向上させるための強力なツールになります。

   以下を使用することに制限や欠点はありますか？現在選択またはチェックされている要素のみを選択できるため、他の状態や条件に基づいて要素をスタイリングするために使用することはできません。さらに、Internet Explorer 8以前のバージョンではサポートされていません。これらの制限にもかかわらず、インタラクティブで動的なWebコンテンツを作成するための貴重なツールです。

以上が純粋なCSSを使用したスタイルスイッチャーの構築：チェック済みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。