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

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

CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

outlineプロパティ

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

概要・使用方法

{ outline: -style -width -color;}Code language: CSS (css)

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

outline-styleプロパティ

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

概要・使用方法

{ <span class="fz-20px"><span class="fz-20px"><span class="fz-20px"><span class="fz-20px"><span class="fz-20px">outline-style</span></span></span></span></span>: スタイル;}Code language: HTML, XML (xml)

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

値の指定方法

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

outline-widthプロパティ

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

概要・使用方法

{ <span class="fz-20px"><span class="fz-20px"><span class="fz-20px"><span class="fz-20px"><span class="fz-20px">outline-width</span></span></span></span></span>: 幅;}Code language: HTML, XML (xml)

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

値の指定方法

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

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

outline-colorプロパティ

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

概要・使用方法

{ outline-color: 色;}Code language: CSS (css)

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

値の指定方法

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

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

outline-offsetプロパティ

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

概要・使用方法

{ outline-offset: 間隔;}Code language: CSS (css)

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

値の指定方法(間隔)

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

サンプルコード

<!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>
実行結果

chrome 実行サンプル

outlineプロパティのchromeブラウザの実行結果

Firefox 実行サンプル

outlineプロパティのfirefoxブラウザの実行結果

edge 実行サンプル

outlineプロパティのedgeブラウザの実行結果

opera 実行サンプル

outlineプロパティのoperaブラウザの実行結果

すなりん

サイトの管理者「すなりん」です。現役のシステムエンジニアをしてます。要件定義からテスト、プロジェクトマネージャー、顧客調整、社内インフラなんでもこなします。いわゆるフルスタック・エンジニアです。 仕事柄色んな技術や製品を扱うことが多く、なかなか覚えているもの大変ですし、しばらくすると忘れてしまうことが多いので、自分なりの形で技術情報やIT関係の情報を掲載しています。 個人で仕事の合間をみながら記事の投稿やサイトを更新していますので、誤字や間違った内容があったりもしますので、閲覧者はご理解の上ご利用ください。

コメントを残す