【outline】アウトラインの指定をまとめて行う

outlineプロパティでは、アウトラインに関する各種のプロパティ(色・形式・幅)を一度にまとめて指定(一括指定)することができます。 色・形式・幅のうち必要な値を任意の順番でならべ、半角スペースで区切って指定して下さい。

指定しなかった省略した値については、各プロパティの初期値が適用されます。

またアウトラインとは、要素の縁取り(輪郭線)の事で、ボタンや入力フィールドなどに輪郭線をつけて強調したい時などに使用されます。

アウトラインとborderの違いですが、アウトラインはボーダーの外側の位置にボックスに重ねて表示されます。 このため、ボックスのサイズや配置に影響することがないほか、常に矩形(すべての角が直角の長方形、四辺形)で表示されるわけではありません。

なおアウトラインには上下左右の懸念がありませんので、borderのように辺ごとに個別指定することができませんので注意して下さい。

書式

  • outline : ★ ■ ♥ ……… アウトラインの各プロパティをまとめて指定(一括指定)

★:outline-colorの値、■:outline-styleの値、♥:outline-widthの値

outline-colorの値

RGB値、またはキーワードなどで色を指定します。指定できる色についてはカラーコード一覧を参照
invert
対象の色を反転した色にする(初期値)

outline-styleの値

none
アウトラインを表示しません。太さも0となります。(初期値)
solid
実線(1本線)で表示します。
double
2本線(二重線)で表示します。
groove
へこんでみえるような立体的な感じで表示します。
ridge
浮き上がったようにみえる立体的な感じで表示します。
inset
アウトラインの上と左が暗く、下と右が明るい色で表示され、内側がへこんだように表示します。
outset
アウトラインの上と左が明るく、下と右が暗い色で表示され、内側が浮き上がったように表示します。
dashed
破線で表示します。
dotted
点線で表示します。

outline-widthの値

実数値+単位
数値にpxなどの単位をつけてアウトラインの太さを指定します。負の値は指定できません。
thin
細い線で表示します。(実際に表示される太さはブラウザ依存)
medium
中くらいの線で表示します。(実際に表示される太さはブラウザ依存)
thick
太い線で表示します。(実際に表示される太さはブラウザ依存)

使用した時の例

.sample1 {outline: solid #FF8484 1px;}
:focus {outline: dashed red 3px;}
<div class="sample1">入力欄をクリックすると:focusで指定したCSSの適用結果が見れます</div>

<form action="/cgi-bin/sample.cgi" method="post">
  <p>名前:<input type="text" name="name"></p>
  <p>性別:<input type="radio" name="sex" value="man">男
          <input type="radio" name="sex" value="woman">女
  </p>
  <p>お問合せ<br />
    <textarea name="toiawase" cols="60" rows="5">
    </textarea>
  </p>
  <p><input type="submit" value="送信"></p>
</form>

ブラウザ上の表示例

入力欄をクリックすると:focusで指定したCSSの適用結果が見れます

名前:

性別:

お問合せ

対応ブラウザなどのデータ

初期値 個別のプロパティを参照 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer8~ , Google Chrome1~ , Firefox1.5~ , Opera7~ , Safari1.2~

関連情報