JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

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