CSS outline property

HTMLのリンクやフォーム部品がフォーカス状態になったときの表示方法を指定するには、CSSプロパティ「outline」を使います。

outline

スタイルシート属性 outline は、リンクやフォーム部品がフォーカス状態になったときの表示方法を指定します。

ブラウザでTABキーを押すと、フォーカスがリンクやフォーム部品を移動していきます。フォーカスがある状態のリンクやフォーム部品は、枠線で囲まれます。この枠線の幅やスタイル、色を指定します。

書式

outline: width style color

属性値

width
線の幅を 1px のように数値と単位を組み合わせて指定するか、以下の値の中から選びます。
値説明
thin細い線
medium通常の線
thick太い線
style
線のスタイルを以下の値の中から指定します。スタイルの違いは線の幅をある程度太くしないと見分けがつきません。
値説明
none線無し
solid実線
dashed粗い点線
dotted点線
double２重線
groove谷線
ridge山線
inset内線
outset外線
inherit継承
color
線の色を指定します。

サンプル

<p><input type="text" style="outline: thin solid black"></p>
<p><input type="text" style="outline: medium solid black"></p>
<p><input type="text" style="outline: thick solid black"></p>

<p><input type="text" style="outline: medium none black"></p>
<p><input type="text" style="outline: medium solid black"></p>
<p><input type="text" style="outline: medium dashed black"></p>
<p><input type="text" style="outline: medium dotted black"></p>
<p><input type="text" style="outline: medium double black"></p>

<p><input type="text" style="outline: thin solid red"></p>
<p><input type="text" style="outline: thin solid green"></p>
<p><input type="text" style="outline: thin solid blue"></p>

入力フォーカスを得たときのアウトラインを指定する。

<head>
  <style>
    .example:focus {
      outline: medium solid red
    }
  </style>
</head>
<body>
  <input type="text" class="example">
  <textarea class="example"></textarea>
</body>

outline-width

スタイルシート属性 outline は、リンクやフォーム部品がフォーカス状態になったときの表示方法を指定します。

ブラウザでTABキーを押すと、フォーカスがリンクやフォーム部品を移動していきます。フォーカスがある状態のリンクやフォーム部品は、枠線で囲まれます。この枠線の幅やスタイル、色を指定します。

書式

outline-width: width

属性値

width
線の幅を 1px のように数値と単位を組み合わせて指定するか、以下の値の中から選びます。
値説明
thin細い線
medium通常の線
thick太い線

使用例

<p><input type="text" style="outline-style: solid; outline-width: thin"></p>
<p><input type="text" style="outline-style: solid; outline-width: medium"></p>
<p><input type="text" style="outline-style: solid; outline-width: thick"></p>

<p><input type="text" style="outline-style: solid; outline-width: 1px"></p>
<p><input type="text" style="outline-style: solid; outline-width: 2px"></p>
<p><input type="text" style="outline-style: solid; outline-width: 3px"></p>

outline-style

スタイルシート属性 outline は、リンクやフォーム部品がフォーカス状態になったときの表示方法を指定します。

ブラウザでTABキーを押すと、フォーカスがリンクやフォーム部品を移動していきます。フォーカスがある状態のリンクやフォーム部品は、枠線で囲まれます。この枠線の幅やスタイル、色を指定します。

書式

outline-style: style

属性値

style
線のスタイルを以下の値の中から指定します。スタイルの違いは線の幅をある程度太くしないと見分けがつきません。
値説明
none線無し
solid実線
dashed粗い点線
dotted点線
double２重線
groove谷線
ridge山線
inset内線
outset外線
inherit継承

使用例

<p><input type="text" style="outline-style: none"></p>
<p><input type="text" style="outline-style: solid"></p>
<p><input type="text" style="outline-style: dashed"></p>
<p><input type="text" style="outline-style: dotted"></p>
<p><input type="text" style="outline-style: double"></p>

outline-color

スタイルシート属性 outline は、リンクやフォーム部品がフォーカス状態になったときの表示方法を指定します。

ブラウザでTABキーを押すと、フォーカスがリンクやフォーム部品を移動していきます。フォーカスがある状態のリンクやフォーム部品は、枠線で囲まれます。この枠線の幅やスタイル、色を指定します。

書式

outline-color: color

属性値

color
線の色を指定します。

使用例

<p><input type="text" style="outline-color: black"></p>
<p><input type="text" style="outline-color: gray"></p>
<p><input type="text" style="outline-color: silver"></p>
<p><input type="text" style="outline-color: white"></p>
<p><input type="text" style="outline-color: red"></p>
<p><input type="text" style="outline-color: green"></p>
<p><input type="text" style="outline-color: blue"></p>

参考文献

World Wide Web Consortium (2018) CSS Basic User Interface Module Level 3 (CSS3 UI)