outline-styleプロパティを設定すると輪郭線のスタイルを変えられます。
ですが、
と思う方がいるでしょう。
そこで今回は、outline-styleプロパティの
・輪郭線の種類
について説明します。
目次
outline-styleプロパティとは
outline-styleプロパティの読み方
outline-styleの読み方は、「アウトライン-スタイル」です。
outlineとは輪郭線を意味する言葉で、outline-styleによって輪郭線のスタイルを変えられます。
outline-styleプロパティの説明
outline-styleプロパティは、
ために使います。
outline-styleプロパティで指定する値によって、輪郭線のスタイルが決まります。輪郭線の種類は多くあるので、さまざまな見せ方ができます。
ですが、outline-styleプロパティを設定するために必要な、タグやプロパティがあります。
outline-styleプロパティの設定の仕方は、この記事内でコードを交えて説明していきます。
outline-styleプロパティで利用できる値
outline-styleプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| none | 輪郭線を消したいときnoneを指定します。 |
| dotted | dottedを指定すると輪郭線が点線になります。 |
| dashed | 輪郭線を破線にしたいときdashedを指定します。 |
| solid | solidの指定により、輪郭線が1本になります。 |
| double | doubleの指定で、2本線になります。 |
| groove | grooveの指定によって、ページに刻まれているような輪郭線になります。 |
| ridge | ridgeは、輪郭線を立体的に見せたいときに使う値です。 |
| inset | insetの指定で、ページに埋め込んでいるように見せられます。 |
| outset | 輪郭線で高くもり上がっているように見せたいとき、outsetを指定します。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
outline-styleプロパティの基本的な使い方
outline-styleプロパティの使い方
outline-styleプロパティの設定の仕方が分かるコードを以下に記述していきます。
See the Pen
outline-styleプロパティの使い方 by 吉井大輝 (@DaiW)
on CodePen.
outline-styleプロパティの値は、solidを指定しているため、1本の輪郭線になります。
outline-styleプロパティを使うには、以下の幅と高さの設定も必要になります。
|
1 2 |
width:200px; height:50px; |
上記の設定ですと、幅が200pxで高さが50pxです。
輪郭線は、境界線の外側になります。
outline-styleプロパティとborder-styleプロパティとの違い
outline-styleプロパティとborder-styleプロパティは、線のスタイルを変える設定ですが、指定する線が違います。
・border-styleプロパティ：境界線のスタイル
指定する線が違うので、以下のように2つのプロパティを一緒に使うことも可能です。
See the Pen
outline-styleプロパティとborder-styleプロパティを一緒に使う by 吉井大輝 (@DaiW)
on CodePen.
しかし、outline-styleプロパティは、上下左右のスタイルをそれぞれ変えることができません。
一方border-styleプロパティの場合、4つの値で上下左右のスタイルを変えられるので、違う線を組み合わせられます。
outline-styleプロパティを設定するとき、border-styleプロパティと勘違いしないように気を付けましょう。
outline-styleプロパティの輪郭線の種類
outline-styleプロパティのさまざまな輪郭線
outline-styleプロパティのさまざまな輪郭線を指定したコードを以下に記述していきます。
See the Pen
outline-styleプロパティのさまざまな輪郭線 by 吉井大輝 (@DaiW)
on CodePen.
上記のように、輪郭線の値を指定することで、スタイルを変えられます。
サイト全体の配色などに合わせて輪郭線を利用すると、おしゃれに見せたりできます。
まとめ
いかがでしたでしょうか？
今回、outline-styleプロパティの基本的な使い方や輪郭線の種類をご紹介しました。
outline-styleプロパティが使えるように基本を覚えていくことで、ボックスのデザインの選択肢の一つになります。
コードを記述しているので、設定するとき参考にしてください。
参考文献：MDN web docs｜outline-styleプロパティ: 要素の輪郭線のスタイルを設定します。
