CSSの疑似クラス「:focus-within」が素晴らしい理由

CSSの疑似クラス「:focus-within」を使用して、フォームの入力時にハイライト表示させるテクニックを紹介します。

:focus-withinは適用した要素の子孫要素にフォーカスに当たった時に起動するセレクタで、効果的に使用すると非常に便利です。

CSSの疑似クラス「:focus-within」が素晴らしい理由

Why CSS :focus-within is amazing
by Chris Bongers

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

ここでお話するのは、フォーカスされた要素にスタイルする:focusセレクタのことではありません。:focus-withinは、その中の子孫要素(どれでも)にフォーカスが当たった時に起動するセレクタです。

:focus-withinを使用して、フォームにフォーカスを当てるとどうなるでしょう?

:focus-withinのデモ

:focus-withinを適用

formタグに:focus-withinを使用すると、フォームの中のすべての要素にフォーカスが当たると起動します。
このデモの実装で:focus-withinを解説します。

HTMLの構造

HTMLはシンプルで、formタグ内に2つのinput要素があるフォームです。

デモに必要なのはこれだけです。

CSSの疑似クラス「:focus-within」

:focus-withinは、:before:afterと同じ疑似セレクタです。
まず、フォームに基本的なスタイルを与えます。

これでフォームがページの中央に配置され、エフェクトに使用するボーダーが表示されます。
参考: テキストや画像を上下左右の中央寄せに配置、最近主流になっている実装方法

フォームの入力時にユーザーの注意を引き付けるため、ユーザーが入力欄にフォーカスした時にフォームを少し目立つカラーに変更します。

form:focus-withinを使用すると、formの子孫要素(ここでは入力欄の2つ)にフォーカスがあたるとフォームの背景がイエローに変わります。

実際の動作は、Codepenでご覧ください。

See the Pen
Why CSS :focus-within is amazing
by Chris Bongers (@rebelchris)
on CodePen.

:focus-withinの効果をより素晴らしいものにする

box-shadowのテクニックを使用して、モーダルエフェクトを加えることで、より素晴らしいものにすることができます。

ビューポートの最大位置(幅または高さ)の100%であるbox-shadowを作成します。初期状態では、不透明度を0にしています。

:focus-withinの方のbox-shadowの不透明度は0.7の70%です。

これで、ライトボックスのようなエフェクトが完成です✨

See the Pen
Why CSS :focus-within is amazing ~ Modal Effect
by Chris Bongers (@rebelchris)
on CodePen.

:focus-withinのサポートブラウザ

IEはすでにお亡くなりになっていると考えると、:focus-withinのサポート状況はかなり良いと言えます。主要なすべてのブラウザでサポートされています。

サイトのキャプチャ

:focus-withinのサポート状況

ここまで読んでいただき、ありがとうございます。
もし気に入ったならば、私のFacebookまたはTwitterをフォローしてください。

sponsors

top of page

©2020 coliss