CSSの outlineプロパティのメモです。
デフォルトで outline のスタイルが当てられている要素としてフォームタグがあげられます。ブラウザではデフォルトスタイルが当てられるためUX的に問題ないし、フォーカス時などでしか見ないためか、コーディングの際にこのデザインを指定されたことは記憶にありません。
あまり使用頻度は高くないかもしれませんが、知っておくと役立つ時があると思います。またデザインをリッチにしたい時にも使えるはず。
outline はどこの部分？
outline プロパティは border の外側のエリアです。
一番使用されるであろう、フォーム要素で実装して見ていきましょう。以下サンプルでは、フォーカス時やチェック時に outline の表示を変更しています。
<input type="text" name="test">
<textarea></textarea>
<input type="checkbox" name="check">input:focus-visible {
outline-color: yellowgreen;
}
textarea:focus-visible {
outline-color: seagreen;
}
input[type="checkbox"]:checked {
outline: 2px solid deeppink;
}:focus-visible (キーボード操作などフォーカスが視覚的に必要な場面でのみスタイルが当たる疑似クラス)を使うことで、マウスクリック時の見た目はそのままに、キーボード操作時だけスタイルを変更できます。
表示例
outline-color: yellowgreen;outline-color: seagreen;outline: 2px solid deeppink;input のテキスト要素やテキストエリアなどはブラウザでもスタイルが当てられていることがほとんどなので、一括指定せずとも変更したいことだけ指定すれば反映されます。
そうでない場合は 幅やカラー、線の種類など、border プロパティと同様に指定すれば反映されます。
outline の詳細
outline は outline-width(太さ)・outline-style(線の種類)・outline-color(色)の3つのプロパティをまとめて指定できる一括指定(ショートハンド)です。border と同じ感覚で、値の順番を気にせず指定できます。
outline: 3px solid green;outline-style で線の種類を変える
outline-style には solid(実線)、dashed(破線)、dotted(点線)、double(二重線)、groove・ridge・inset・outset(立体的な線)などが指定できます。
初期値は none なので、outline-style を指定しない限り outline 自体が表示されません。特に指定しなくともブラウザが用意しているスタイルが適用されることもあります。
outline-width と outline-color
outline-width は thin・medium(初期値)・thick のキーワードのほか、px などの数値でも指定できます。
outline-color は初期値が auto で、多くのブラウザでは背景色を反転させたような色が自動で使われ、対応していない環境では currentColor(そのテキストの文字色)が使われます。特定の色に揃えたい場合は、border と同じように色を指定します。
outline-offset で輪郭線との間に余白を作る
outline-offset を使うと、要素(border)と outline の間に余白を作れます。padding に近い感覚です。マイナスの値を指定すると、逆に要素の内側に輪郭線を食い込ませることもできます。
a:focus {
outline: 4px dotted #ee7733;
outline-offset: 4px;
}outline を消す時の注意(アクセシビリティ)
outline: none; や outline: 0; でブラウザ標準のフォーカス表示を消してしまうと、キーボード操作をしているユーザーが「今どこを操作しているか」を見失ってしまいます。
デザイン上どうしても標準の outline を外したい場合は、border-bottom や box-shadow など、目に見える形の代わりのフォーカススタイルを必ず用意してください(WCAG の達成基準2.4.7「フォーカスの可視性」にも関わる部分です)。
border との違い
outline は要素の幅・高さに含まれないため、フォーカス時に outline を付けても要素がガタつきません。border だと box-sizing の設定次第でサイズがずれることがありますが、outline ではその心配がありません。
border-top のように outline-top などのプロパティは存在しません。上下左右一辺ずつの指定は不可です。
要素に border-radius を指定していると、outline の角も自動で丸くなります。
カテゴリー : HTML-CSS
