【CSS】outlineを使ってレイアウトに影響を与えずに枠線が引く方法

CSSを使ってボックスや画像の周囲に枠線を引く時はborderを使うのが定番ですが、outlineというプロパティでも枠線を引くことができます。

borderだと幅によってはレイアウトに影響したりしますが、outlineならレイアウトに全く影響を与えずに枠線を引くことができます。

今回はoutlineを使ってレイアウトに影響を与えずに枠線を引く方法を紹介します。

 

outlineを使って枠線を引く

outlineは要素の枠線をつけることができるプロパティです。なので使い方はborderとほぼ同じです。

borderと異なる点としては、周囲のレイアウトに一切の影響を与えず、枠線を独立して作れるという点です。

なので、以下のようなことがoutlineでできます。

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

 

また、outlineは古いブラウザでも対応しています。例えば、IEなら8から表示可能です。

 

outlineの書き方

outlineは以下のように書きます。

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

 

borderと同じように太さ、線の種類、色を別々に指定することもできます。

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

 

要素と枠線の間に余白を作る

outlineはCSS3で余白を作ることができるoutline-offsetが追加されています。

outline-offsetプロパティを使うことでoutlineで引いた枠線と要素の間に余白を作ることができます。

ただし、IE11やEdge25では非対応なので、古いブラウザのことも考慮すると使いどころを考える必要がありそうです。

outline-offsetの書き方は以下の通りです。

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

 

また、あくまでoutlineで枠線を引いているので、border-radiusで角を丸めることはできません。

 

outlineとborderを同時に使うことも可能

まずこの2つを同時に使うことはないと思いますが、一応outlineとborderを同時に使うこともできます。

outlineはoutline-offsetと組み合わせて余白付きの枠線を作り、borderで角を丸めた枠線を引くということも可能です。

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

 

まとめ

borderの代わりにoutlineを使ってレイアウトを崩さずに枠線を引く方法でした。

使いどころによっては役に立ってくれると思うので、機会があったら使ってみてくださいね。