CSSデザインをもっと魅力的に！「outline」を使いこなすためのヒント

outline プロパティは、Web要素にフォーカスされた際に表示される輪郭線を装飾するための CSS プロパティです。主に以下の設定が可能です。

• 色：red、green、blue などの色名、または 16 進数カラーコードで輪郭線の色を指定します。
• 幅：thin、medium、thick など、輪郭線の太さを指定します。
• スタイル：none、dotted、dashed、solid など、輪郭線のスタイルを指定します。

構文

selector {
  outline: style width color;
}

a:focus {
  outline: 2px solid red; /* 赤色の太い実線で輪郭線を表示 */
}

• outline プロパティと border プロパティは似ていますが、微妙な違いがあります。border プロパティは要素の境界線を設定するのに対し、outline プロパティはフォーカス時のみに表示される輪郭線を設定します。
• outline プロパティは、アクセシビリティの観点から重要です。視覚障がいのあるユーザーがキーボード操作でページを閲覧する際に、フォーカスされている要素を識別するのに役立ちます。
• outline プロパティは、ユーザーがキーボードやマウスで要素にフォーカスした際にのみ適用されます。

• outline プロパティは、すべての要素に適用できます。
• outline-color、outline-style、outline-width などの個別プロパティを使用して、outline プロパティの各属性を個別に設定することもできます。

---

例 1：フォーカス時に赤い太線で輪郭線を強調する

button:focus {
  outline: 3px solid red;
}

例 2：すべてのリンクに青い点線輪郭線を追加する

a {
  outline: 1px dotted blue;
}

例 3：入力フィールドにフォーカス時に太線輪郭線を強調し、色を緑色にする

input:focus {
  outline: 2px solid green;
}

例 4：画像にフォーカス時に破線輪郭線を強調する

img:focus {
  outline: 2px dashed gray;
}

*:focus {
  outline: 5px solid gray;
}

• outline プロパティは、アクセシビリティを向上させるために役立ちます。特に、視覚障がいのあるユーザーがキーボード操作でページを閲覧する際に、フォーカスされている要素を識別するのに役立ちます。
• デザインのニーズに合わせて、太さ、スタイル、色を自由に調整してください。
• 上記の例はほんの一例です。outline プロパティを使用して、さまざまなスタイルの輪郭線を作成できます。

---

box-shadow プロパティ

box-shadow プロパティは、要素の周りに影を落とすエフェクトを作成するために使用できます。この影をフォーカスインジケータとして利用することで、outline の代替手段となります。

利点：

• アクセシビリティを向上させられる：視覚障がいのあるユーザーでも、影によってフォーカスされている要素を認識しやすくなります。
• より柔軟なデザインが可能：影の色、ぼかし具合、サイズなどを自由に調整できます。

欠点：

• すべてのブラウザで完全にはサポートされていない：古いブラウザでは、box-shadow プロパティが正しくレンダリングされない場合があります。
• outline ほど目立たない場合がある：特に、影の色やぼかし具合を薄く設定した場合、ユーザーがフォーカスを見逃してしまう可能性があります。

例：

button:focus {
  box-shadow: 0 0 2px blue; /* 青い影を要素の周りに表示 */
}

border プロパティ

border プロパティは、要素の境界線を設定するために使用できます。フォーカス時にのみ境界線のスタイルを変更することで、outline の代替手段となります。

• outline よりも目立つ：境界線を太くしたり、色を変更したりすることで、より目立たせることができます。
• シンプルで分かりやすい：ユーザーにとって、フォーカスされている要素を認識しやすいデザインとなります。

• アクセシビリティが懸念される：視覚障がいのあるユーザーにとって、境界線のみではフォーカスを認識しにくい場合があります。
• デザインの柔軟性が制限される：境界線の太さや色しか変更できないため、outline ほど多彩なデザインはできません。

button:focus {
  border: 2px solid red; /* 赤い太線境界線を要素に表示 */
}

JavaScript によるフォーカスハイライト

JavaScript を使用して、フォーカス時に要素にハイライト効果を追加することもできます。例えば、要素の背景色を変更したり、アニメーションを再生したりすることができます。

• ユーザーのインタラクションを強化できる：フォーカスされた要素を強調することで、ユーザーの操作を誘導することができます。
• 非常に柔軟なデザインが可能：様々なハイライト効果を作成することができ、デザインの自由度が非常に高いです。

• アクセシビリティに配慮する必要がある：すべてのユーザーが JavaScript を利用できるわけではないため、アクセシビリティに配慮した代替手段も用意する必要があります。
• 開発コストがかかる：JavaScript による実装が必要となるため、開発コストがかかります。

const button = document.querySelector('button');

button.addEventListener('focus', () => {
  button.style.backgroundColor = 'yellow';
});

button.addEventListener('blur', () => {
  button.style.backgroundColor = '';
});

アクセシビリティ API

focus-visible などのアクセシビリティ API を利用することで、フォーカス状態をより適切に伝えることができます。これは、視覚障がいのあるユーザーを含む、すべてのユーザーにとってアクセシビリティを向上させるのに役立ちます。

• 将来性の高いソリューション：focus-visible などの API は、今後も改善されていくことが期待されています。
• アクセシビリティを大幅に向上させる：視覚障がいのあるユーザーでも、フォーカス状態を確実に認識することができます。

• 開発に専門知識が必要：アクセシビリティ API の実装には、専門知識が必要です。
• 比較的新しく、すべてのブラウザで完全にはサポートされていない：古いブラウザでは、これらの API が正しく動作しない場合があります。

const button = document.querySelector('button');

button.addEventListener('focus', () => {
  if (!button.classList.contains('focus-visible')) {
    button.classList.add('focus-visible');
  }
});

button.addEventListener('blur', () => {
  button.classList.remove('focus-visible');
});