border-top-widthプロパティを使用すると、境界線の上側の太さを変えられます。ですが、CSS初心者の方には
と疑問を抱く方がいるでしょう。
そこで今回は、border-top-widthプロパティの
・他にできる境界線の太さの変え方
について説明します。
border-top-widthプロパティとは
border-top-widthプロパティの読み方
border-top-widthの読み方は、「ボーダー-トップ-ウィドゥス」です。
borderという言葉が含まれているプロパティは、おおよそ境界線に関する設定を行います。
border-top-widthプロパティの説明
border-top-widthプロパティは、
際に使います。
border-top-widthプロパティで太さを変えることで、見たときの印象が違います。情報をより強調させるなど、使い方は多数存在します。
border-top-widthプロパティを使うためには、他のプロパティも設定する必要があります。
設定の仕方については、「border-top-widthプロパティの基本的な使い方」から詳しく解説していきます。
border-top-widthプロパティで利用できる値
border-top-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 | 完全対応 |
border-top-widthプロパティの基本的な使い方
border-top-widthプロパティの使い方
border-top-widthプロパティの使い方が分かるように、以下にコードを記述していきます。
See the Pen
border-top-widthプロパティの使い方 by 吉井大輝 (@DaiW)
on CodePen.
border-top-widthプロパティの設定は、以下のように書きます。
|
1 |
border-top-width:10px; |
境界線の上側を太くするには、「幅」「高さ」「境界線のスタイル・太さ・色」の設定も必要になります。
|
1 2 3 |
width:150px; height:50px; border:solid 2px #000; |
上記の設定によって、境界線が反映されます。
border-top-widthプロパティ以外で境界線の上側の太さを変えられる
border-top-widthプロパティ以外で、境界線の上側の太さを変える方法があります。
See the Pen
border-top-widthプロパティ以外で境界線の上側の太さを変える by 吉井大輝 (@DaiW)
on CodePen.
「.box2」で設定しているborder-widthプロパティで、border-top-widthプロパティと同様の設定が可能です。
border-widthプロパティは、上下左右の境界線の太さをまとめて変えられます。
|
1 |
border-width:10px 2px 2px 2px; |
border-widthプロパティの値が4つならば、「上側」「右側」「下側」「左側」の順に境界線の太さを指定します。
値の数によって指定する境界線も変わってきます。
border-top-widthプロパティの他にもborder-widthプロパティで設定ができることを覚えていてください。
border-top-widthプロパティの応用的な使い方
border-top-widthプロパティの値にkeywordsを指定する
border-top-widthプロパティの値にlengthではなく、keywordsを指定したコードを記述していきます。
See the Pen
border-top-widthプロパティの値にkeywordsを指定する by 吉井大輝 (@DaiW)
on CodePen.
上から順に「細い」「中くらい」「太い」境界線を指定しています。
細かく境界線の太さを変えたいとき、pxやemなどの単位を使うと良いでしょう。
ですが、大まかな太さで良いならば、keywordsを指定して太さを変えてみてください。
まとめ
いかがでしたでしょうか？
今回、基本的な使い方や他にできる境界線の太さの変え方についてご紹介しました。
border-top-widthプロパティの使い方を覚えることで、サイトデザインの選択肢の一つになります。
境界線の太さを変える設定は、記述しましたコードを参考にすれば、CSS初心者の方も設定できるでしょう。
border-top-widthプロパティの習得に役立ててもらえたら幸いです。
参考文献：MDN web docs｜border-top-widthプロパティ: 要素の上側の境界の幅を設定します。
