Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

CSSプロパティ

HTMLリファレンス

CSSリファレンス

その他の記事

CSSリファレンス インデックス

スポンサーリンク

CSSリファレンス

UIユーザインタフェースTOPCSSPropertiesUI

  1. cursorカーソルの種類
  2. outline-colorアウトライン(外枠)の色
  3. outline-styleアウトライン(外枠)の線の種類
  4. outline-widthアウトライン(外枠)の幅
  5. outlineアウトラインのショートハンドプロパティ

outlineアウトラインのショートハンドプロパティ

プロパティの値[ outline-color || outline-style || outline-width ] | inherit
初期値各outline-color, -style, -widthの値(個別プロパティの値)
対象要素全要素
継承しない
%無効
メディアvisual, interactive
W3C Ref.CSS2.1CSS3

プロパティの書式と機能

アウトラインの線種、色、幅のプロパティをまとめて一括指定します。 borderと違い、要素の外周を取り囲むように線が描画されるので、上下左右の個別指定はできません。また、線幅がブロックのwidthやheightの計算に影響を及ぼさないので、描画によるレイアウトの崩れがありません。 この性質を利用して、特定の要素にアウトラインを描画させ、レイアウト構造を確認するといった活用方法が可能です。

プロパティの書式機能
outline: Style Color Width個別プロパティの値をまとめて指定
outline: inherit継承

識別子によるプロパティの個別記述

-style, -color, -widthの識別子を付加することにより、各プロパティの個別指定が可能です。※詳細については、各個別プロパティを参照して下さい。

  1. outline-style: none
  2. outline-color: invert
  3. outline-width: medium

プロパティの記述例

下の例はどちらも同じ表示結果となります。

div.example	{
		outline-style : solid ;
		outline-color : navy ;
		outline-width : 2px ;
		}
div.example	{outline : solid navy 2px}
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.