CSS入門 | CSSボックスモデル | Outline

Tags:

Outline

outlineプロパティは、HTML要素の最も外側を囲むoutline部分のスタイルを設定する。 このプロパティはborderプロパティと同じく、style、width、colorプロパティを持つ。

しかし、outlineプロパティはborderプロパティとは異なり、HTML要素の全体サイズには含まれない。 HTML要素の高さや幅は、outlineの太さの影響をまったく受けない。

CSS outlineプロパティ

プロパティ 説明
outline すべてのoutlineプロパティを使ったスタイルを1行で設定できる。
outline-style outlineをさまざまな形に設定する。
outline-width outlineの幅を設定する。
outline-color outlineの色を設定する。
outline-offset borderとoutlineの間の余白を設定する。

outline-styleプロパティ

outline-styleプロパティを使うと、outlineをさまざまな形に設定できる。

  1. dotted: outlineを点線に設定する。
  2. dashed: outlineを少し長い破線に設定する。
  3. solid: outlineを実線に設定する。
  4. double: outlineを二重実線に設定する。
  5. groove: outlineを3次元の立体的な線に設定し、outline-color値の影響を受ける。
  6. ridge: outlineを3次元の隆起した線に設定し、outline-color値の影響を受ける。
  7. inset: 3次元の内側に押し込まれた線に設定し、outline-color値の影響を受ける。
  8. outset: 3次元の外側に浮き出た線に設定し、outline-color値の影響を受ける。
  9. none: outlineをなくす。
  10. hidden: outlineは存在するが表示されない。
<style>
    p.dotted {outline-style: dotted;}
    p.dashed {outline-style: dashed;}
    p.solid {outline-style: solid;}
    p.double {outline-style: double;}
    p.groove {outline-style: groove;}
    p.ridge {outline-style: ridge;}
    p.inset {outline-style: inset;}
    p.outset {outline-style: outset;}
    p.none {outline-style: none;}
    p.hidden {outline-style: hidden;}
</style>

Internet Explorer 8以前では、HTML文書に<!DOCTYPE html>タグが挿入されている必要があり、そうするとoutlineプロパティが正しく表示される。

outline-widthプロパティ

outline-widthプロパティは、outlineの太さを設定する。 px、em、cmなどのCSSサイズ単位を使って太さを直接設定できる。 また、予約語であるthin、medium、thickを使って設定することもできる。

<style>
    p.solidA { outline-style: solid; outline-color: violet; outline-width: 2px; }
    p.solidB { outline-style: solid; outline-color: coral; outline-width: 7px; }
    p.dashedA { outline-style: dashed; outline-color: violet; outline-width: thin; }
    p.dashedB { outline-style: dashed; outline-color: coral; outline-width: thick; }
</style>

outline-colorプロパティ

outline-colorプロパティは、outlineの色を設定する。 基本的なcolorプロパティ値だけでなく、色反転を表すinvert値を使用できる。 また、invert値は背景色に関係なくoutlineを表示するための色反転を設定する。

<style>
    p { border: 1px solid black; outline-style: dashed; }
    p.red { outline-color: red; }
    p.green { outline-color: rgb(0,255,0); }
    p.blue { outline-color: #0000FF; }
    p.invert { outline-color: invert; }
</style>

outlineの省略表記

すべてのoutlineプロパティを使ったスタイルを1行で設定できる。

<style>
    p { border: 1px solid black; }
    p.none { border-style: none; }
    p.good { outline: 3px solid teal; }
    p.wrong { outline: 5px teal; }
</style>

outlineプロパティを設定するには、必ずoutline-styleプロパティが先に設定されている必要がある。