CSSでborderの長さを自由に指定したり文字数に応じて指定する方法！
CSSでテキストやボックスのスタイルによく使われるborder（ボーダー）ですが、太さを変える方法はよく見ますが長さを変える方法はなかなか見ませんよね！そこで今回は、CSSでborderの長さを自由に指定したり文字数に応じて指定する方法をご紹介します。
CSSでborderの長さを調整したい
CSSで枠線はborderのプロパティで引くことができ、例えば以下のように記述することで枠線の太さ、種類（直線や破線など）、色を設定することが出来ます。
borderの設定
.sample {
/* 太さ 種類 色 */
border: 5px solid gray;
}しかし一方で枠線の長さ指定したいという時はないでしょうか？
枠線の長さとは、例えば下の例を見てみましょう！
この例では、h1要素にborder-bottomプロパティを使っています。ブロックレベル要素であれば、ブラウザ標準のスタイルで親要素に対して幅が100％になるのでテキストの領域の左端から右端まで枠線が横線で引かれています。
この枠線の長さを調整したいというのが今回の記事の主旨になります。
しかし、枠線の長さを指定するプロパティというのは存在していません。ではどのように枠線の長さは指定するのでしょうか？
やり方を解説していきます！
CSSでborderの長さを調整する方法
それではborderの長さを調整する方法を見ていきましょう！
今回は、h1要素にborder-bottomプロパティを使ったシンプルなHTML構造で解説します。
CSSのwidthプロパティで長さを指定する方法
CSSのwidthプロパティで長さを指定する方法の解説です。
下のサンプル画像のように、下線を任意の長さに変更することができます。
【HTML】CSSのwidthプロパティで長さを指定する方法
<h1>Qumeru</h1>【CSS】CSSのwidthプロパティで長さを指定する方法
h1 {
border-bottom: 3px solid gray;
width: 600px;
margin-left: auto; /* 中央寄せにするため */
margin-right: auto; /* 中央寄せにするため */
}widthプロパティで幅を任意の大きさに指定して線の長さを調整します。
とてもシンプルで簡単な方法ですが、h1要素の横幅と線の長さは必ず同一になるので注意してください。
下がプレビュー付きのサンプルコードになります。
文字数に応じた長さに指定する方法
文字数に応じた長さに指定する方法の解説です。
下のサンプル画像のように、文字数によって下線の長さが自動で変わります。
【HTML】文字数に応じた長さに指定する方法
<h1>Qumeru</h1>【CSS】文字数に応じた長さに指定する方法
h1 {
border-bottom: 3px solid gray;
display: inline-block; /* 必要なのはこれだけです */
}displayプロパティの値を、inline-blockに指定します。
こうすることで、文字数に応じた長さに指定することができます。
下がプレビュー付きのサンプルコードになります。
borderプロパティは使わずに自由に枠線を引く方法
borderプロパティは使わずに自由に枠線を引く方法の解説です。
下のサンプル画像のように「テキストよりも下線の長さを短くしたい」という時のテクニックです。
【HTML】borderプロパティは使わずに自由に枠線を引く方法
<h1>Qumeru</h1>【CSS】borderプロパティは使わずに自由に枠線を引く方法
h1 {
position: relative;
}
h1::after {
content: '';
display: block;
position: absolute;
left: 50%; /* 位置調整 */
transform: translate(-50%); /* 位置調整 */
bottom: -10px; /* 下線の上下位置調整 */
width: 30px; /* 下線の幅 */
height: 2px; /* 下線の太さ */
background-color: #666666; /* 下線の色 */
}
border-bottomで指定していたこれまでのやり方とは変わり、h1の疑似要素からボックスを生成して下線に見せかける方法です。
そのため、横の長さや高さはwidthやheightプロパティを使うので自由に指定することができます。
位置はposition: absolute;とtransform: translateX(-50%);の組み合わせテクニックで左右中央寄せしています。
下がプレビュー付きのサンプルコードになります。
まとめ
いかがでしたでしょうか？
どれも基本的なテクニックですが、特に「borderプロパティは使わずに自由に枠線を引く方法」で解説した方法は、テキストよりも下線が短くおしゃれなイメージがありよく使います。
今回ご紹介した方法以外にも実現する方法はありますので、この記事を参考にぜひ、みなさんも自分のベストコードを探してみてくださいね！
