日本語

CSSチュートリアル

CSS3チュートリアル

CSS 的高度化

CSS リファレンス

CSS レスポンシブ

CSS - フォーカス：初級者のガイド

こんにちは、未来のウェブデザインスーパースター！今日は、CSSのフォーカスの素晴らしい世界に飛び込んでみましょう。コードを書いたことがない方も心配しないでください - この旅の親切なガイドとしてお手伝いします。このチュートリアルの終わりには、プロのように要素をフォーカスする技能を身につけていることでしょう！

CSS - Focus

CSSフォーカスとは？

まず、基本から始めましょう。CSSフォーカスは、要素がフォーカスを受け取ったときにスタイルを適用するための擬似クラスです。では、「フォーカスを受け取る」とは何でしょうか？オンラインのフォームを記入するとき、入力フィールドをクリックすると、それがハイライトされたり、何かしらの変化が起こったりします。それがフォーカスの作用です！

フォーカスはアクセシビリティにおいて非常に重要です。特にキーボードで导航しているユーザーにとって、現在どの要素とインタラクションしているかを理解する手助けになります。

対象要素

スタイルを適用する前に、どの要素が実際にフォーカスを受け取れるかを知ることは重要です。以下の表を参照してください：

フォーカス可能な要素
リンク (<a>)
ボタン
フォーム入力
ドロップダウンメニュー
テキストエリア
セレクト要素

デフォルトでフォーカスを受け取れるすべてのHTML要素ではなく、注意してください。でも心配しないでください、後ほど他の要素をフォーカス可能にする方法を説明します！

文法

では、実際にCSSフォーカスをどのように書くか見てみましょう。基本的な文法は非常に簡単です：

element:focus {
/* あなたのスタイルここに */
}

「focus」の前にあるコロンが気づいたかもしれませんね？それが擬似クラスを表しています。まるで「Hey CSS、この要素がフォーカスを受け取ったときにこれらのスタイルを適用してくれ！」と言っているようなものです。

CSSフォーカス - リンク

まず、一般的な使用例であるフォーカスされたリンクのスタイルを見てみましょう。以下はその例です：

a:focus {
color: #ff6600;
text-decoration: underline;
outline: 2px solid #ff6600;
}

このコードでは、リンクがフォーカスを受け取ったとき：

  1. 色が明るいオレンジ(#ff6600)に変わります
  2. 下線が付きます
  3. 2ピクセルのオレンジの実線のアウトラインが周囲に現れます

これにより、現在どのリンクがフォーカスされているかが非常に明確になり、アクセシビリティとユーザー体験が向上します。

CSSフォーカス - ボタン

ボタンもフォーカススタイルが非常に重要な要素です。ボタンのスタイルを見てみましょう：

button:focus {
background-color: #4CAF50;
color: white;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.5);
}

このボタンがフォーカスを受け取ったとき：

  1. 背景色が緑(#4CAF50)に変わります
  2. テキストが白に変わります
  3. 半透明な緑の「光」が周囲に現れます

これにより、ボタンのフォーカスステートが視覚的に魅力的で明確になります。

CSSフォーカス - インプットボックス

インプットボックスはフォーカスが非常に効果を発揮する場所です。以下はフォーカスされたインプットボックスのスタイルの例です：

input:focus {
border: 2px solid #3498db;
background-color: #e8f4fc;
outline: none;
}

この例では：

  1. 枠線が2ピクセルの実線の青(#3498db)に変わります
  2. 背景色がライトブルー(#e8f4fc)に変わります
  3. デフォルトのアウトラインを削除します

プロ tip: デフォルトのアウトラインを削除する場合は、明確な視覚的なインジケータを提供するようにしてください。さもなければ、キーボードユーザーがフォーカスを失う可能性があります！

CSSフォーカス - ドロップダウンボックス

ドロップダウンボックス（またはセレクト要素）もフォーカスされたときにスタイルを適用できます：

select:focus {
border-color: #9b59b6;
box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2);
}

ここで、ドロップダウンがフォーカスを受け取ったとき：

  1. 枠線の色が紫(#9b59b6)に変わります
  2. 軽い紫の「光」が周囲に現れます

この微妙な変化は、ユーザーがどのドロップダウンとインタラクションしているかを理解する手助けになります。

CSSフォーカス - チェックボタン

チェックボタンは少し特別な要素です。フォーカスされてチェックされている状態と異なるスタイルを適用することが多いです。以下はその方法です：

.toggle:focus {
outline: 2px solid #3498db;
}

.toggle:focus:checked {
outline-color: #e74c3c;
}

このコードでは：

  1. チェックボタンがフォーカスされたとき、青いアウトラインが現れます
  2. フォーカスされてチェックされているとき、アウトラインの色が赤に変わります

これにより、ユーザーはフォーカスステートとチェックステートの両方を理解できます。

CSSフォーカス - 関連プロパティ

フォーカスとともに使用されるいくつかのCSSプロパティがあります。以下は最も有用なものの表です：

プロパティ 説明
outline エレメントの周囲に線を描きます
box-shadow エレメントに影を追加します
border エレメントの枠線を定義します
background エレメントの背景を設定します
color テキストの色を変更します
text-decoration テキストに装飾を追加します（例：下線）

これらのプロパティを組み合わせて、ユニークでアクセシブルなフォーカススタイルを作成することができます！

結論

そして、ここまでがCSSフォーカスの初級者向けガイドです！良いフォーカススタイルはただ見栄えを良くするだけではなく、アクセシブルでinclusiveなウェブを作成するための重要な要素です。

コードの旅を続ける中で、いつもアクセシビリティを頭に入れてください。それはただの「Nice to have」ではなく、ウェブ開発において非常に重要な部分です。そして、あなたのフォーカススタイルが誰かの一日を少しでも楽にするかもしれません。

練習を続け、好奇心を持ち、そして何より楽しみましょう！CSSはあなたの遊び場であり、フォーカスはその中の多くの楽しい玩具の一つです。ハッピーコーディング！

Credits: Image by storyset

前のチュートリアル:
CSS - 表示
次のチュートリアル:
CSS - ズーム