outline-widthプロパティは、輪郭線の太さを変えるときに使われる設定です。
太さを変えるために、コードが必要になりますが、CSSについて勉強を始めたばかりの方には
と疑問を抱く方がいるでしょう。
そこで今回は、outline-widthプロパティの
・応用的な使い方
について説明します。
目次
outline-widthプロパティとは
outline-widthプロパティの読み方
outline-widthの読み方は、「アウトライン-ウィドゥス」です。
widthは、幅を指定する際にも使われますが、太さを調整する設定にも用いられます。
outline-widthプロパティの説明
outline-widthプロパティは、
できる設定です。
outline-widthプロパティで指定する太さによって、輪郭線を効果的に見せられます。
しかし、太さを指定するためには、輪郭線の設定に加えて他のプロパティも使わなければいけません。
設定の仕方は、「outline-styleプロパティの基本的な使い方」からコードを交えて解説していきます。
outline-widthプロパティで利用できる値
outline-widthプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| length | 輪郭線の太さを指定するために、長さを決める単位のpxやemを数値に付けます。 |
| keywords | keywordsを指定すると、輪郭線の太さを決められます。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
outline-widthプロパティの基本的な使い方
outline-widthプロパティの使い方
outline-widthプロパティで、輪郭線の太さを5pxにするときのコードを以下に記述します。
See the Pen
outline-widthプロパティの使い方 by 吉井大輝 (@DaiW)
on CodePen.
輪郭線の太さを5pxにしているのが以下のコードです。
|
1 |
outline-width:5px; |
ですが、上記だけでは輪郭線を太くできません。
設定には、
・height：高さを指定する
・outline-style：輪郭線のスタイルを指定する
が必要になります。
サイト上にoutline-widthプロパティが反映されない場合、必要なプロパティを書き忘れている可能性があるので覚えておきましょう。
outline-widthプロパティで輪郭線の印象を変える
輪郭線のスタイルが同じでも、outline-widthプロパティで太さを変えると印象が大きく違ってきます。
違う太さの輪郭線を見比べてみましょう。
See the Pen
outline-widthプロパティで輪郭線の印象を変える by 吉井大輝 (@DaiW)
on CodePen.
太さの指定に、keywordsを使っています。
それぞれのkeywordsの太さは、
・medium：基本3px
・thick：基本5px
になります。
3つの輪郭線を見ると太さが違うだけで、印象が変わるでしょう。少しの差で見え方に影響を与えます。
outline-widthプロパティを使う際、他の要素の大きさや色など考慮に入れることで、クオリティの向上につながります。
outline-widthプロパティの応用的な使い方
outline-widthプロパティの太さに加えてアウトラインに色も付けてみる
outline-widthプロパティだけでも見え方が変わりますが、黒色と異なる色を付けると、さらに変わってきます。
黒色と緑色の2つのアウトラインを記述したコードを見ていきましょう。
See the Pen
outline-widthプロパティの太さに加えてアウトラインに色も付けてみる by 吉井大輝 (@DaiW)
on CodePen.
2つのアウトラインを見比べてみると違った印象を受けるでしょう。
outline-widthプロパティと他のアウトラインを設定するプロパティを使うことで、サイトデザインの幅が広がります。
アウトラインの作成には、太さも重要ですが、色やスタイルも考慮する必要があるということですね。
まとめ
いかがでしたでしょうか？
今回、outline-widthプロパティの基本的な使い方や応用的な使い方についてご紹介しました。
outline-widthプロパティを使えるようになると、アウトラインを作るために必要な要素も分かるようになります。
outline-widthプロパティのコードを記述しているので、CSSを学び始めた方も参考にすることで、設定ができるでしょう。
CSSの勉強に役立てもらえたら幸いです。
参考文献：MDN web docs｜outline-widthプロパティ: 要素の輪郭線の太さを設定します。
