CSS辞典 outlineプロパティ、outline-styleプロパティ、outline-widthプロパティ、outline-colorプロパティ、outline-offsetプロパティの解説

ボックスのアウトラインをまとめて指定する「outlineプロパティ」、ボックスのアウトラインのスタイルを指定する「outline-style」、ボックスのアウトラインの幅を指定する「outline-width」、ボックスのアウトラインの色を指定する「outline-color」、ボックスのアウトラインとボーダーの間隔を指定する「outline-offset」の使用方法を記載

対応バージョン：CSS3／2.1

対応ブラウザ
outlineプロパティ
- 概要・使用方法
outline-styleプロパティ
- 概要・使用方法
- 値の指定方法
outline-widthプロパティ
- 概要・使用方法
- 値の指定方法
outline-colorプロパティ
- 概要・使用方法
- 値の指定方法
outline-offsetプロパティ
- 概要・使用方法
- 値の指定方法（間隔）
サンプルコード

対応ブラウザ

outlineプロパティ

初期値	各プロパティに準じる
適用される要素	すべての要素
モジュール	CSS Basic User Interface Module Level 3
継承	なし

概要・使用方法

{ outline: -style -width -color;}

「outline-styleプロパティ」、「outline-widthプロパティ」は、「outline-colorプロパティ」の値を一括で指定するプロパティです。

outline-styleプロパティ

初期値	none
適用される要素	すべての要素
モジュール	CSS Basic User Interface Module Level 3
継承	なし

概要・使用方法

{ outline-style: スタイル;}

「outline-styleプロパティ」は、アウトラインのスタイルを指定します。borderよりも外側に表示されます。入力ボタンや入力フィールド、イメージマップを目立たせたいときに利用します。

値の指定方法

none	アウトラインは表示されません。
auto	ブラウザーに描画を任せます。
dotted	点線で表示します。
dashed	破線で表示します。
solid	1本の実線で表示します。
double	2本の実線で表示します。
groove	立体的にくぼんだ線で表示されます。
ridge	立体的に隆起した線で表示されます。
inset	アウトラインの内部が立体的にくぼんだように表示されます。
outset	アウトラインの内部が立体的に隆起したように表示されます。

outline-widthプロパティ

初期値	medium
適用される要素	すべての要素
モジュール	CSS Basic User Interface Module Level 3
継承	なし

概要・使用方法

{ outline-width: 幅;}

「outline-styleプロパティ」は、ボーダーの外側に描画するアウトラインのスタイルを指定します。入力ぼたにゃテキストエリア、イメージマップを目立たせたいときに利用します。

値の指定方法

thin	細いアウトラインが表示されます。
medium	通常のアウトラインが表示されます。
thick	太いアウトラインが表示されます。
数値+単位	アウトラインの幅を単位付きの数値で指定します。

単位付きの数値は以下を参照。

CSS辞典単位付きの数字

outline-colorプロパティ

初期値	invert（未対応のブラウザーではcurrentcolor）
適用される要素	すべての要素
モジュール	CSS Basic User Interface Module Level 3
継承	なし

概要・使用方法

{ outline-color: 色;}

「outline-colorプロパティ」は、アウトラインの色を指定します。

値の指定方法

invert	背景色を反転させた色でアウトラインを表示します。
色	キーワード、カラーコード、rgb()、rgba()によるRGBカラー、hsl()、hsla()によるHSLカラー、あるいはシステムカラーで指定します。色の指定が無い場合はcurrentcolorが使用されます。

色の指定方法は以下を参照。

CSS辞典色（カラー）の指定方法

outline-offsetプロパティ

初期値	0
適用される要素	すべての要素
モジュール	CSS Basic User Interface Module Level 3
継承	なし

概要・使用方法

{ outline-offset: 間隔;}

「outline-offsetプロパティ」は、アウトラインとボーダーの間隔を指定する

値の指定方法（間隔）

数値+単位

単位付きの数値を指定します。

CSS辞典単位付きの数字

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>outlineプロパティ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
    <style>
          input[type="text"]{color:red;}
          .box{margin:1em;}
          .sample1{
              outline-style:dotted;
              outline-width:5px;
              outline-color:red;
              outline-offset:0px;
          }
          .sample2{
              outline-style:dashed;
              outline-width:5px;
              outline-color:red;
              outline-offset:0px;
          }
          .sample3{
              outline-style:solid;
              outline-width:5px;
              outline-color:red;
              outline-offset:0px;
          }
          .sample4{
              outline-style:double;
              outline-width:5px;
              outline-color:red;
              outline-offset:0px;
          }
          .sample5{
              outline-style:groove;
              outline-width:5px;
              outline-color:red;
              outline-offset:0px;
          }
          .sample6{
              outline-style:ridge;
              outline-width:5px;
              outline-color:red;
              outline-offset:0px;
          }
          .sample7{
              outline-style:inset;
              outline-width:5px;
              outline-color:red;
              outline-offset:0px;
          }
          .sample8{
              outline-style:outset;
              outline-width:5px;
              outline-color:red;
              outline-offset:0px;
          }
          .sample9{
              outline-style:outset;
              outline-width:5px;
              outline-color:red;
              outline-offset:10px;
          }
          .sample10{
              outline:outset 5px red;
          }
    </style>
  </head>
  <body>
      <form action="https://kcfran.com/inquery" method="post">
          
          <div class="box">
              <button class="sample1">outline-style:dotted</button>
          </div>
          <div class="box">
              <button class="sample2">outline-style:dashed</button>
          </div>
          <div class="box">
              <button class="sample3">outline-style:solid</button>
          </div>
          <div class="box">
              <button class="sample4">outline-style:double</button>
          </div>
          <div class="box">
              <button class="sample5">outline-style:groove</button>
          </div>
          <div class="box">
              <button class="sample6">outline-style:ridge</button>
          </div>
          <div class="box">
              <button class="sample7">outline-style:inset</button>
          </div>
          <div class="box">
              <button class="sample8">outline-style:outset</button>
          </div>
          
          <div class="box">
              <button class="sample10">outline:outset 5px red;</button>
          </div>
          
          <div class="box">
              <label for="name">名前</label>
              <input class="sample4" type="text" name="name" id="name" size="20" placeholder="名前入力欄">
          </div>
          <div class="box">
              <label for="email">email</label>
              <input class="sample4" type="email" name="email" id="email" size="20">
          </div>
          <div class="box">
              <div>
                  <label for="message">問い合わせ内容</label>
              </div>
              <textarea class="sample4" name="message" rows="20" cols="50"></textarea>
          <div>
          
          <div class="box">
              <button class="sample9">outline-offset:10px</button>
          </div>
          
          
      </form>
  </body>
</html>