【CSS】outlineの特徴まとめ - borderとの違いも徹底解説

こんにちは。


今回はCSSの「outline」について解説したいと思います。
「線を引くことができるborderと同じなんじゃ？」と思っている方も多くいると思います。


多くの参考書はborderの説明だけで終わっていてoutlineまでは説明されていません。
実際によく似たプロパティなのです。
でも実は、borderでは表現できないこともoutlineなら表現できます。

この記事ではoutlineの特徴とborderとの違いを解説していきます。
違いも含めてoutlineを理解しましょう！

outlineで使えるプロパティ一覧と値

まずはoutlineのプロパティを確認しましょう。

outlineは要素の輪郭線の太さ・色・スタイルを指定できるプロパティです。borderとほとんど一緒です。
outlineプロパティの指定方法はスタイルも太さも色指定も、borderプロパティとほぼ同じですね。

outlineはborderと違いレイアウトを崩さない

outlineとborderの一番の違いは、
outlineは表示のためのスペースを考慮しなくてもいいと言う点です。

どうゆうことかと言うと、
下記の２つの水色のブロックにそれぞれホバーしてください。

「border」の方はホバーすると、他の要素も、ガクっと動いてしまいますが、
「outline」の方は緑の輪郭が出てくるだけで、他の要素に影響が出ません。

これはborderがボックスモデルの一つで、要素感の距離を調整する必要があるからです。
一方のoutlineはボックスモデルではなく、要素の外に輪郭を描くだけです。

こういったoutlineの特徴からフォームで必ずといっていいほど実装されています。
こんなやつ↓↓

入力欄をクリックすると薄く青枠が出てくるやつですね。（擬似クラスの:focusで設定していることが多いです）
このようにCSSのoutlineで実装することでレイアウトをガタつかせることなく綺麗に表現できます。

outlineは上下左右で同じ指定しかできない

もう一つborderとの違いは、上下左右での概念がないと言うことです。
つまり、
borderは上下左右で太さ、色、線の種類を指定できますが、outlineは全部同じ、太さ、色、線の種類でしか指定できません。

<div class="container">
   <p>TEXTTEX...</p>
</div>

<style>
.container{
  padding: 50px 20px;
  width: 150px;
  height: 150px;
  outline: 5px solid #21ec65; /* ←上下左右全部に適応されます。 */
  /* outline-top: ;　←できません */
  /* outline-right: ;　←できません */
  /* outline-bottom: ;　←できません */
  /* outline-left: ;　←できません */
}

h1{
	font-size: 40px;
	color: #000;
}
</style>

実装結果は下記です。
繰り返しになりますが、borderであれば上下左右で色を変えたりできますがoutlineではできません。

いかがでしたでしょうか？
borderの方が使う機会は確かに多いですが、今回の例のようにoutlineはホバーアクションを入れるときに他の要素を気にしなくていいので使いやすいです。

皆さんも一度使ってみてください。

では！