CSS3: outline-offset プロパティ - 輪郭のオフセット値の指定

■ 概要

項  目説  明
記述形式 セレクタ {outline-offset: }
値 の形式 inherit | 長さ
初 期 値 0
対応ブラウザー C2+ / e?+ / N?+ / Fx3.6+ / Op?+ / Ch8+ / Sa5+
適用可能な要素 すべての要素
継  承 しない

■ 解説

outline-offsetプロパティ は,輪郭のオフセット値を指定します。

outlineプロパティ で指定する輪郭は,border プロパティ で指定する境界とは,次のような点で異なります。

  1. 隣接要素との間に新たにスペースを確保しません。 つまり,境界外の隣接要素内などに表示されます。
  2. 形は長方形に限定されません。

輪郭が表示される場所に別の要素の内容や境界線が表示されている場合は, 輪郭で上書きされますのでレイアウトや輪郭のスタイルに注意が必要です。

数値によるは,次のような単位を付けて可能です。

単位説  明
 px
px とは画面の1画素(ピクセル) のサイズを1とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。
 em
em とは現在使用中の標準フォントの高さを1とする単位です。 
 ex
ex とは現在使用中の標準フォントの小文字の「x」の高さを1とする単位です。

■ 使用例( outline-offset プロパティの利用)

HTMLソース
CSS
<head> ~ </head>
<style type="text/css" media="screen, handheld, print, tv" >
<!--
   input.sample:focus { 
      outline-width: 3px;
      outline-style: solid;
      outline-color: #ddff88;
      outline-offset: 3px;
   }
-->
</style>
<script type="text/javascript">
   window.onload = function() {
      document.getElementById('ans1').focus();
   }
</script>
HTML
<body> ~ </body>
<div>問1:<input type="text" class="sample" id="ans1"></div><br>
<div>問2:<input type="text" class="sample" id="ans2"></div><br>
<div>問3:<input type="text" class="sample" id="ans3"></div>

ブラウザー 表示例 (未対応のブラウザーでは正しく表示できません)
問1:

問2:

問3:

上の例では,フォーカスのある input要素 に対して輪郭が表示されます。

輪郭の表示される場所は, input要素 の境界外の親要素(div要素)や,さらに,その隣接要素などです。 (輪郭をもっと太くするとさらによくわかります。) 

■ 備考

【参考ページ】