【CSS】borderの長さを変える方法

borderは長さを変えることはできません。

<p>サンドイッチ食べたいぞ！</p>

p{
border-bottom: solid 2px #555;
}

上記のように、通常は要素全体に線がかかってしまいます。いったい、どのようにしたらborderの線を可変させることができるのでしょうか？

今回はそのことについて解説してみたいと思います。

borderの長さを変えるには、inline-blockを使ってみよう
なぜinline-blockを使うと文字の長さに応じて、ラインが変化するのか？
borderの長さを変える、その他の方法
1. block要素に、そのまま横の長さを指定する方法
2. 疑似要素を使って、borderの長さを変える方法
まとめ

borderの長さを変えるには、inline-blockを使ってみよう

borderの長さを変えるのはdisplay: inline-blockの利用が最適です。

<p>サンドイッチ食べたいぞ！</p>

p{
display: inline-block;
border-bottom: solid 2px #555;
}

先ほどのコードにdisplay: inline-blockを加えたら、borderの長さが文字の長さに変化しました。

これは文字の長さのぶんだけborderの長さが変化します。

なぜinline-blockを使うと文字の長さに応じて、ラインが変化するのか？

inline-blockは横並びの情報のかたまりです。幅と高さが指定可能で、余白も自由自在に調整できます。

<p>サンドイッチ食べたいぞ！</p><a> </a><p>サンドイッチ食べたいぞ！</p><a> </a><p>サンドイッチ食べたいぞ！</p>

p{
display: inline-block;
border-bottom: solid 2px #555;
}

横にポンポン情報のかたまりが並びます。そのため、要素をinline-blockに指定するとborderの長さも可変になるのです。

<p>サンドイッチ食べたいぞ！</p><a> </a><p>サンドイッチ食べたいぞ！</p><a> </a><p>サンドイッチ食べたいぞ！</p>

p{
display: inline-block;
border-bottom: solid 2px #555;
}

先ほどの例で使われていた<p>タグの初期値はblock要素で設定されています。block要素はh2やh3のように横いっぱいに要素が広がり、縦に並びの情報のかたまりです。

borderの長さを変える、その他の方法

少し複雑だったり問題はありますが、他にもborderの長さを変える方法は色々あります。いくつか紹介します。

block要素に、そのまま横の長さを指定する方法

<p>サンドイッチ食べたいぞ！</p>

p{
width:500px;
border-bottom: solid 2px #555;
}

実はblock要素は情報のかたまりなので、width:500px;と横の大きさを簡単に指定できます。

しかし、この方法は欠点があります。

例えばユーザーが500px以下のスマホを使っていた場合、borderの線が画面から切れてしまいます。

Webサイトを閲覧するユーザーのデバイスはバラバラです。

パソコンから最新のスマホ、古いスマホまで色々なデバイスから閲覧します。コーディングする時は基本的には様々なデバイスからの閲覧に対応すべきです。

もちろん極端な話、100pxの画面でWebサイトを見る人は、小さい液晶ディスプレイを自作してしまうような、相当なPCオタクでないと考えられないでしょう。

それを見越した上で、block要素を利用してborderの長さを指定するのは全然アリです。

疑似要素を使って、borderの長さを変える方法

<p>サンドイッチ食べたいぞ！</p>

p{
  position: relative;
  display: inline-block;
  margin-bottom: 3px;
}

p:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  display: inline-block;
  width: 50%;
  height: 5px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: blue;
  border-radius: 20%;
}

線をさらに自由に描写したいなら、p:beforeなど擬似要素を使う方法もあります。

この方法は文字要素と線の要素を別々に分離した方法です。

<p>サンドイッチ食べたいぞ！</p>

p{
  position: relative;
  display: inline-block;
  margin-bottom: 3px;
}

p:before {
  content: '';
  position: absolute;
  left: 90%;
  bottom: -10px;
  display: inline-block;
  width: 50%;
  height: 5px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: blue;
  border-radius: 20%;
}