CSSの技 ～ 要素の枠（アウトライン）を表示する ～

～ 要素の枠（アウトライン）を表示する ～

要素の枠（アウトライン）を表示するには「outline-style」、枠の幅を指定するには「outline-width」、枠の色を指定するには「outline-color」プロパティを設定しますが、「outline」でスタイルと幅と色を一度に指定することもできます。

outline-style:dotted;                 /*外枠のスタイル*/
outline-width:2px;                    /*外枠の幅*/
outline-color:#FF0000;            /*外枠の色*/
outline:dotted 2px #FF0000;   /*一度に指定*/

サンプルソース（CSS）

<style type="text/css">
<!--
#sotowaku {
     outline-style:dotted;       /*ドットの外枠*/
     outline-width:2px;          /*外枠の幅*/
     outline-color:#FF0000;  /*外枠の色*/
}
-->

サンプルソース（HTML）

<p id="sotowaku">赤色のドット枠（幅2px）</p>

結果

赤色のドット枠（幅2px）

備考

＜outline-style の種類＞

dotted（ドット枠）

dashed（ダッシュ枠）

solid（ソリッド枠）

double（double枠）

groove（グルーブ枠）

ridge（リッジ枠）

inset（インセット枠）

outset（アウトセット枠）

END