コーディング

【CSS】outlineの特徴まとめ 〜borderとの違いまで〜

投稿日:2019年9月14日 更新日:

こんにちは。


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


多くの参考書はborderの説明だけで終わっていてoutlineまでは説明されていません。
でも実は、borderでは表現できないこともoutlineなら表現できます。



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


この際borderとの違いも含めてoutlineを理解しましょう!

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

outline-stylenone(デフォルト値)、solid、dotted,,,,etc
outline-color色を指定
outline-width太さを指定
outline-offset外側に離す距離を指定(CSS3から追加されたプロパティ)
outline上記のショートハンド(outline-offset以外)


outlineはレイアウトを気にしなくていい

outlineの大きな特徴は、レイアウトを崩さないことです。
borderとの違いでいうと表示のためをスペースを必要としない。


どうゆうことかと言うと、
下記の2つの緑のブロックにホバーしてください。

outline
border

「border」の方はホバーすると、他の要素も、ガクっと動いてしまいますが、
「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>

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

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

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

では!

-コーディング
-,

執筆者:

関連記事

CSS

【CSS】repeating-linear-gradient 背景に格子・ストライプを表現する

コンテンツ背景に格子状のデザインやストライプのデザインを背景に引く方法をお教えします。

CSS

【CSS】子要素を親要素内で上下左右中央寄せさせる方法

子要素を親要素の上下左右中央に持ってくる方法を書きました。
様々な方法があるのですが、個人的には今回紹介する方法がベストではないかと思います。参考になれば幸いです。

CSS

【CSS】テキストにマスク掛け。画像をテキストの形にクリッピング。(background-clip)

CSS小技集。勉強しててイイなと思ったテクを共有します。

CSS

【CSS】 複数、子孫、子、隣接…忘れがちなセレクタをまとめました。<前編>

「*」「+」「>」「,」これらについて書きます。セレクターを自由に使える様になると、コーディングスピード、可読性、更新性がアップします。

CSS

【CSS】hoverした時に別要素にアクションをさせる方法

今回はhoverした時に別の要素にアクションをつける方法を書きました。意外に躓くところなので、一読していただければと思います。脱初心者の為の内容となっています。

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。