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

目次

outline

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

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

書式

outline: width style color

属性値

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

outline-width

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

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

書式

outline-width: width

属性値

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

対応状況

Webブラウザ対応状況
Internet Explorer 6.0×
FireFox 3.0
Google Chrome 0.3×

使用例

<a href="background.html" style="outline: thin solid blue;">background</a>
<a href="border.html" style="outline: medium solid blue;">border</a>
<a href="font.html" style="outline: thick solid blue;">font</a>

background border font

outline-style

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

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

書式

outline-style: style

属性値

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

対応状況

Webブラウザ対応状況
Internet Explorer 6.0×
FireFox 3.01
Google Chrome 0.31

1 対応しているが、動作がおかしい。

使用例

<a href="index.html" style="outline-style: none">スタイルシート</a>

スタイルシート

<a href="index.html" style="outline-style: solid">スタイルシート</a>

スタイルシート

<a href="index.html" style="outline-style: dashed">スタイルシート</a>

スタイルシート

<a href="index.html" style="outline-style: dotted">スタイルシート</a>

スタイルシート

<a href="index.html" style="outline-style: groove">スタイルシート</a>

スタイルシート

<a href="index.html" style="outline-style: ridge">スタイルシート</a>

スタイルシート

<a href="index.html" style="outline-style: inset">スタイルシート</a>

スタイルシート

<a href="index.html" style="outline-style: outset">スタイルシート</a>

スタイルシート

outline-color

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

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

書式

outline-color: color

属性値

color
線のを指定します。

使用例

<p>
  <a href="background.html" style="outline-color: red;">background</a>
  <a href="font.html" style="outline-color: green;">font</a>
  <a href="border.html" style="outline-color: blue;">border</a>
</p>

background font border

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送