枠線を引くスタイルシートには、borderプロパティだけではなくoutlineプロパティもある

画像でもテキストでも何に対してでも、スタイルシートを使って「枠線を引きたい」と思ったときに使うのはborderプロパティでしょう。
でも、borderプロパティを使って枠線を引くと、当然、「枠線の太さ」の分だけ、その要素自体のサイズも大きくなります。
最初から枠線が存在するデザインで作っていれば問題ないのですが、『マウスが載ったときにだけ枠線を付加したい』とか、『フォーカスを得たときにだけ枠線を付加したい』といった場合には、枠線が表示されたときにだけ周囲のレイアウトが崩れてしまうこともあります。

そんなときに便利なのが、outlineプロパティです。

outlineプロパティなら、レイアウトに一切影響を与えずに枠線が引ける

outlineプロパティは、その名の通り「要素の外側に線を引く」プロパティです。
その目的では、borderプロパティとの区別は付きません。
しかし、borderプロパティとは違って、周囲のレイアウトに一切影響しない枠線が引ける特徴があります。

そのため、

• マウスが載ったときにだけ枠線を付加したい
• フォーカスを得たときにだけ枠線を付加したい

……といった、「ある条件を満たした場合にのみ、動的に枠線を付加したい」というデザインに、とても使いやすいプロパティです。

下記の例では、画像の上にマウスを載せた際にだけ、10ピクセルの枠線を付加するようスタイルシートを記述しています。

• 上側は、borderプロパティを使って枠線を付加しています。
• 下側は、outlineプロパティを使って外枠を付加しています。

実際にマウスを載せて、動作を試してみて下さい。前者のoutlineプロパティの場合は、レイアウトが変化しないことが分かります。

このoutlineプロパティは、CSS2から用意されているため、比較的古いブラウザでも表示できます。例えば、IEの場合はなんとIE8から表示可能です。

outlineプロパティの書き方

outlineプロパティの書き方は、borderプロパティと同じです。枠線の太さ、枠線の種類、枠線の色を指定します。

img:hover {
   outline: 10px solid skyblue;
}

borderプロパティの場合と同様に、以下のように、太さ・線種・色を別々のプロパティで指定することもできます。

img:hover {
   outline-width: 10px;
   outline-style: solid;
   outline-color: skyblue;
}

ちなみに、先の表示例では、枠線の色を「rgba(128,204,255,0.75)」として、25％透明の空色にしてありました。

要素と枠線との間に余白を設けることもできるoutline-offsetプロパティ

outlineプロパティはCSS2で用意されたものですが、CSS3ではさらに「outline-offset」というプロパティが追加されています。
このoutline-offsetプロパティを使うと、「outlineプロパティで引いた枠線」と「対象要素」との間に任意の余白を挿入できます。

※このoutline-offsetプロパティは、Firefox、Chrome、Safari、Operaでは表示可能ですが、IEやEdgeでは(少なくともIE11・Edge25では)非対応でした。ただ、outlineプロパティ自体はIE8以降で対応済みなので、外枠自体はIE・Edgeでも問題なく表示されます。隙間が空かないだけです。

例えば以下では、7ピクセルの余白を挿入しています。画像の上にマウスを載せて、表示を試してみて下さい。

上記の場合は、以下のようにCSSソースを記述しています。

img:hover {
   outline: 10px solid rgba(128,204,128,0.75); /* 25％透明の淡い緑色の外枠 */
   outline-offset: 7px; /* 外枠との間の余白 */
}

ちなみに、残念ながらoutlineプロパティで引けるのはあくまでも「outline」であって「border」ではないため、「border-radius」プロパティを使って、枠線の角を丸くすることはできません。

動的に枠線を表示したい場合は、当然、既存のレイアウトを崩さずに表示したいでしょう。
込み入ったデザインをしている場合には、borderプロパティを使うよりも、こちらのoutlineプロパティを使う方が、楽にデザインできそうな気がします。

outlineプロパティとborderプロパティを同時に使うことも可能

どちらも外枠を引くためのプロパティではありますが、outlineプロパティとborderプロパティは同時に使用可能です。
下記では、borderプロパティで赤色の線を、outlineプロパティで青色の線を引いています。(ついでに、border-radiusプロパティを使って、borderの角を12pxほど丸くしています。)

img:hover {
   /* ▼outline */
   outline: 10px solid rgba(128,128,255,0.75);
   outline-offset: 3px;
   /* ▼border */
   border: 3px solid #ff5555;
   border-radius: 12px;
}

表示例は以下の通りです。画像の上にマウスポインタを載せてみて下さい。

何らかの事情で二重に枠線を引きたい場合にも使えるかも知れません。^^;

というわけで、レイアウトに一切影響を与えずに枠線が引けるoutlineプロパティを使って、任意の要素に外枠を動的に付加する方法でした。
ぜひ、活用してみて下さい。

(更新日：2017年07月09日)