アウトラインの表示方法を一括で指定する「outline」を解説

今回は、「outline」プロパティのお話をします。

要素の輪郭線「アウトライン」は太さや色、スタイルなどの表示方法を変えることができます。おしゃれなアウトラインにしてみたい!と思っていても、初心者のうちは

なんだか複雑で難しそう・・・

と心配になってしまうかもしれません。そこで、「outline」プロパティを使えば、アウトラインの表示方法をまとめて指定することができます。

今回は、outlineの

・基本的な使い方
・アウトラインを装飾する方法

について説明します。

outlineとは

outlineの読み方

outlineは、「アウトライン」と読みます。「輪郭線・外形」という意味で使われていて、プログラミングでは要素の輪郭線のことを指します。

outlineの説明

outlineプロパティは、要素の輪郭線の色・スタイル・太さを一括で指定することができるプロパティです。書式は以下のようになります。

outline:<outline-color> <outline-style> <outline-width> ;

outline-color、outline-style、outline-widthの値を指定すると、まとめて適用させることができます。各プロパティの記述は省略可能で、値のみを記述して指定します。指定順は自由になります。

outlineで利用できる値

outlineでは以下の値を使うことができます。

説明
outline-color アウトラインの色を指定します。
outline-style アウトラインのスタイルを指定します。
outline-width アウトラインの太さを指定します。
注意
各プロパティの値を参照して指定してください。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome  完全対応
Edge  完全対応
Firefox  完全対応
nternet Explorer  完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview   完全対応
Android版Chrome  完全対応
Android版Firefox  完全対応
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

outlineの基本的な使い方

アウトラインの色を指定する

アウトラインの色を指定する場合は、outline-colorの値を指定します。

今回は、textareaのアウトラインの表示方法を指定していきます。まず、以下のHTMLを記述してtextareaを表示させます。

次に、アウトラインの色を指定します。outlineプロパティで#6fb7ffの色を指定し、1本線で表示するためsolidを指定します。2つの値を指定するときは間にスペースを入れて区切ります。

このように指定した色で表示させることができました。

アウトラインのスタイルを指定する

アウトラインのスタイルを指定する場合は、outline-styleの値を指定します。様々な線の種類の中からいくつか例を挙げて紹介します。

先ほど使用したsolidでは1本の線で表示されますが、doubleを指定すると2本線で表示することができます。

点線で表示したい場合は、dottedを指定すると適用されます。

アウトラインの太さを指定する

アウトラインの太さを指定する場合は、outline-widthの値を指定します。

太さは、px、ex、emの単位で指定することができます。それぞれ指定すると、以下のような結果になります。

 

また、outline-widthプロパティのキーワード値であるthin、medium、thickで太さを指定することができます。それぞれ以下のように表示されます。

 

outlineとborderの違い

outlineを使うと、要素の輪郭線の色・スタイル・太さを指定することができます。outlineと同じように線の表示方法を指定できる「border」プロパティと変わらないのでは?と思う方も多いと思います。そこで、outlineとborderの何が違うのかを解説します。

borderは、要素の境界線のことを指します。要素の輪郭線であるoutlineよりも内側になります。

また、outlineでは上下左右の線を同じ表示に指定しますが、borderは、上下左右の線を個別に表示方法を指定することができます。

 

このように、異なる値を指定しても辺ごとに個別に適用されます。

アウトラインを装飾する

3つの値を一括で指定する

アウトラインの色・スタイル・太さの3つの値を指定することで、さらに装飾の幅を広げることができます。

今回は、アウトラインをより立体的に表示する方法を紹介します。線の種類を、立体的に隆起した線ridgeに指定し、色と太さを指定していきます。

このように立体的なアウトラインを表示することができました。

outlineとborderを組み合わせる

outlineは外側の線borderは内側の線の表示方法を指定できるので、2つの線を組み合わせてデザインすることができます。

先ほどアウトラインを表示したtextareaにborderを指定して組み合わせます。borderプロパティで、立体的に窪んだ線を表示するgroobeを指定し、色と太さを指定します。

このように、外側のoutlineと内側のborderを組み合わせてさらに立体的に表示することができました。

まとめ

いかがでしたか?outlineを使うと簡単にアウトラインの表示方法を指定することができます。この機会に覚えて活用してみてください。

この記事がお役に立てれば幸いです。

参考文献:https://developer.mozilla.org/en-US/docs/Web/CSS/outline 
https://developer.mozilla.org/ja/docs/Web/CSS/outline-color
https://developer.mozilla.org/ja/docs/Web/CSS/outline-style
https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width