にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

borderと違ってレイアウトに影響せず枠線が引けるoutlineプロパティで、動的に枠線を表示 [CSS3,ボックス,]

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

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

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

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

そのため、

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

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

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

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

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

▼borderプロパティを使って「マウスが載ったときにだけ枠線を付加」した例:
川滝 川滝 川滝
※枠線が付加されると(要素のサイズが大きくなるため)レイアウトが変化します

▼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ピクセルの余白を挿入しています。画像の上にマウスを載せて、表示を試してみて下さい。

▼outlineプロパティとoutline-offsetプロパティを使って「マウスが載ったときにだけ枠線を付加」した例:
川滝 川滝 川滝
※動的に引かれる枠線と要素との間には、7pxの余白が設けられます。(※IE・Edge以外)

上記の場合は、以下のように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プロパティとoutline-offsetプロパティを使って「マウスが載ったときにだけ枠線を付加」した例:
川滝 川滝 川滝
※borderの3px分だけレイアウトがずれます。

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

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

《2016/03/12 10:30 改訂》
《2014年6月5日 11:23 初版公開》

()

▼当サイト内外で関連しそうな記事などを自動表示:

スタイルシートTipsふぁくとりーの主要なカテゴリ

現在、以下のカテゴリに区分してスタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

--- 当サイト内を検索 ---