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

スポンサーリンク
スポンサーリンク
【CSS】borderの長さを変える方法:アイキャッチHTML/CSS
スポンサーリンク
スポンサーリンク

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

<p>サンドイッチ食べたいぞ!</p>
p{
border-bottom: solid 2px #555;
}
border

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

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

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

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

<p>サンドイッチ食べたいぞ!</p>
p{
display: inline-block;
border-bottom: solid 2px #555;
}
inline-block

先ほどのコードに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-block2

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

<p>サンドイッチ食べたいぞ!</p><a> </a><p>サンドイッチ食べたいぞ!</p><a> </a><p>サンドイッチ食べたいぞ!</p>
p{
display: inline-block;
border-bottom: solid 2px #555;
}
block2

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

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

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

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

<p>サンドイッチ食べたいぞ!</p>
p{
width:500px;
border-bottom: solid 2px #555;
}
wed

実は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%;
}
translate(x)

線をさらに自由に描写したいなら、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%;
}
before2
スポンサーリンク
スポンサーリンク

この方法はposition: relativeを利用して親要素を定義し、擬似要素にてleftやtranslateX()などを利用して微調整が必要です。

しかし、先ほど紹介した、どの方法よりも線の長さや太さ、描写の位置すらも自由に設定できる事が分かると思います。

まとめ

以上、borderの長さを変える方法について書きました。

シンプルにinline-blockを使う方法が、文字の多さに比例して線が描写されるので、ほとんどの場面で活躍すると思います。

ただ、複雑なエフェクトなどを加えるボタンなどを作る場面では擬似要素を使った方法が、威力を発揮すると思います。

今回紹介した方法が、コーディングの役に立てば幸いです。

スポンサーリンク
スポンサーリンク
HTML/CSS
shigureをフォローする
プロフィール
このブログの管理人です

Webライター/Webデザイナー。ダイエット歴10年。保有資格:日商簿記2級。

2021年4月に開設した当ブログも、月間4万PVを達成しました。これからも精進してまいります。

shigureをフォローする
Shigure Factory

コメント

スポンサーリンク
タイトルとURLをコピーしました