CSSのborder-bottom-widthプロパティを用いて下線の太さを設定する方法
ここでは、CSSのborder-bottom-widthプロパティを用いて下線の太さを設定する方法について説明していきます。
下線の太さを指定するには、「thin」「medium」「thick」などのキーワードを用いて指定する方法、数値を用いて指定する方法があります。
それでは、以下で具体的な例を用いて説明していきたいと思います。
Contents
下線の太さをキーワードを用いて指定する方法
下線の太さをキーワードを用いて指定する方法について説明していきます。
「thin」を用いて指定
HTML
<p class="border-bottom-width border-bottom-width--thin">
border-bottom-width: thin;
</p>CSS
.border-bottom-width {
width: fit-content;
border-bottom-style: solid;
}
.border-bottom-width--thin {
border-bottom-width: thin;
}※ widthプロパティの値をfit-contentにすることで、HTML要素の幅を文字数に合わせた幅に自動調整されます。
「medium」を用いて指定
こちらはデフォルトの値になります。
HTML
<p class="border-bottom-width border-bottom-width--medium">
border-bottom-width: medium;（初期値）
</p>CSS
.border-bottom-width--medium {
border-bottom-width: medium;
}「thick」を用いて指定
HTML
<p class="border-bottom-width border-bottom-width--thick">
border-bottom-width: thick;
</p>CSS
.border-bottom-width--thick {
border-bottom-width: thick;
}下線の太さを数値を用いて指定する方法
pxを用いて指定する方法
HTML
<p class="border-bottom-width border-bottom-width--px">
border-bottom-width: 10px;
</p>CSS
.border-bottom-width--px {
border-bottom-width: 10px;
}emを用いて指定する方法
1emは、フォントの高さを意味します。
もし、フォントのサイズを16pxに設定していた場合は、
1em=16pxという訳ですね。
HTML
<p class="border-bottom-width border-bottom-width--em">
border-bottom-width: 1em;
</p>CSS
.border-bottom-width--em {
border-bottom-width: 1em;
}実行結果
See the Pen Untitled by Yagi-System (@ihspycal-the-lessful) on CodePen.
まとめ
このように、border-bottom-widthプロパティにキーワードを指定したり、pxやemなどを指定したりすることで、HTML要素の下線の太さを設定することができます。