記事内に商品プロモーションが含まれる場合があります
今回はCSSのborderで表示させる線の長さを調整する方法を解説します。いくつかのパターン別に解説していくので、目的に合った方法を選んで頂ければと思います。
前提：CSSのborderの長さの決まり方
まずはborderの長さがどのように決まるのかをさくっと解説しておきます。
border自体に長さを指定することはできない
まずもってborder自体には長さを指定するような書き方はありません。
border-length:60pxのような書き方はないのです。
borderとは要素の上下左右に表示されるもの
じゃあ、どうやって決まるかというと「borderの長さ」＝「要素の長さ」となります。
<p>これは要素です</p>
例えば、 このような要素があるとします。グレイの部分が段落要素（pタグ）の占める範囲を表しています。
<p>これは要素です</p>CSS
p{
border-bottom: solid 2px #555;
}
例えばborder-bottom（下線を引くためのプロパティ）を使うと、このように要素の下の部分全体に下線が引かれます。
つまり、線の長さを変えたければ、要素自体の大きさを変えれば良いのです。要素の大きさと違う長さにする方法も後ほど説明します。
その1：要素自体の大きさを変えることで線の長さを変える
例えば、divタグの上に線を引くとします。
BEFORE
<div class="test"> <p>これは要素です</p> </div>CSS
.test {border-top: solid 4px gray}
divタグというのは、何も指定しないと横いっぱいに広がってしまいます。「これじゃあ長すぎる！」という場合もあるかと思います。1つの対策として「divタグの横幅を指定する」という手があります。
ちなみに
display:blockが初期値の要素だと、何も指定しないと横いっぱいに広がります。詳しくは下の記事をどうぞ。
AFTER
.test {
width: 200px;
border-top: solid 4px gray;
}
divタグ（クラス名.test）に対して、width: 200pxを指定しました。これにより、border-topの長さも200pxになりました。widthの書き方についてはこちらの記事で解説しています。
要素の最大幅を指定する
ここで問題になるのが「はみ出てしまうこと」です。例えば、上の方法でwidth:600pxを指定したとします。これをもし幅350pxのスマホで見たら、はみ出てしまうのです。
とくに要素を320px以上の大きさにする場合には要注意です。iPhone5は320pxです。これ以上大きくするとiPhone5で見たときに、はみ出てしまうことがあります（余白や親要素の幅もあるので320px以下であれば、大丈夫というわけでもありません）。
そこでおすすめなのが、max-widthにより要素の最大幅を指定することです。widthは指定せずに、例えばmax-width:650pxとだけ指定すれば、 通常は横いっぱいに要素が広がる（はみ出ない）
ただし、デカイ画面で見ても、要素は650px以上には広がらないということになります。
最大幅の指定例
1つ例を見てみましょう。ここではmax-width:500pxと指定してみました。
.test {
max-width: 500px;
border-top: solid 4px gray;
}
このときの表示は以下のようになります。
デカイ画面で見ても、max-width（500px）以上には広がらない
小さい画面で見ても、ピッタリおさまる
このように最大幅を活用することで、要素（線）が横に長くなりすぎるのを防ぐことができます。
その2：文字の長さに応じて、borderの長さを可変
「文字の上下左右にborderで線を引きたい」ということもあるかと思います。
そんなときに要素の幅を◯◯pxと固定値で指定してしまうと、中身の文字の長さが変わったときにはみ出てしまうかもしれません。
inline-blockを使えば解決
そんなときはdisplay:inline-blockという指定をするのがオススメです。この指定をすると、中に含まれる文字や画像の大きさに応じて、要素の大きさが自動で変わるのです。
BEFORE
今回は見出しのh2タグに対して、上線をつけてみました。
<h2>これは要素です</h2>CSS
h2 {
border-top: solid 4px gray;
}
AFTER
これを文字の上にだけ表示させるようにします。やることは線をつけるh2タグに対してdisplay: inline-blockを指定するだけ。
h2 {
display: inline-block;
border-top: solid 4px gray;
}
これだけで、文字の上の部分にだけ線が付くようになります。
文字が長くなれば、その文だけ線も長くなります。「inline-blockを使うとなぜこうなるか」ということについてもこちらの記事で解説しています。
全体を線で囲う場合
inline-blockを指定しつつ、上下左右にborderをつけた場合にはどうなるのでしょうか。
<h2>これは要素です</h2>CSS
h2 {
display :inline-block;
border: solid 4px gray;
}
このように要素全体がborderで囲われます。
余白指定
文字と線の間の余白はpaddingで調整できます。こちらはpadding: 10px 20px 15px 20px;を指定した場合です。それぞれの値が指定する余白部分はこの図の①〜④の通りです。
paddingについてはこちらの記事で詳しく解説しています。
その3：要素の幅とborderの長さを変えるには
「要素の幅」と「線の長さ」を別々に指定したい、という場合ですが、残念ながらborderではできません。仕方がないので「疑似要素」を使うのが良いでしょう。
borderではなく、疑似要素で「線の形をした要素モドキ」を作るという方法です。この方法なら要素の大きさに関係なく、好きな長さの線を表示させることができます。
好きな長さの下線をつける
このように要素よりも短い下線を引いてみましょう。
<h2>これは例文です</h2>CSS
h2{
position: relative;
display: inline-block;
margin-bottom: 1em;
}
/*以下で線を表示*/
h2:before {
content: '';
position: absolute;
left: 50%;
bottom: -15px;/*線の上下位置*/
display: inline-block;
width: 60px;/*線の長さ*/
height: 5px;/*線の太さ*/
-webkit-transform: translateX(-50%);
transform: translateX(-50%);/*位置調整*/
background-color: black;/*線の色*/
border-radius: 2px;/*線の丸み*/
}
h2:before{~}で線を表示させています。線の長さや太さなどは、コメントを参考にお好みに調整してくださいませ。
好きな長さの上線をつける
下線ではなく上線を表示させたい場合、さきほどのコードをほんの一部だけ変えるだけでOKです。
具体的には、さきほどの下線コードの中のbottom: -15px;の部分をtop: -15pxに変えます。これで上線になります。
上下ばさみにする
上下ばさみにしたいときには、疑似要素のbeforeとafterを使います。
<h2>これは例文です</h2>CSS
h2{
position: relative;
display: inline-block;
margin-bottom: 1em;
}
/*上線*/
h2:before {
content: '';
position: absolute;
left: 50%;
top: -15px;/*線の上下位置*/
display: inline-block;
width: 60px;/*線の長さ*/
height: 5px;/*線の太さ*/
-webkit-transform: translateX(-50%);
transform: translateX(-50%);/*位置調整*/
background-color: black;/*線の色*/
border-radius: 2px;/*線の丸み*/
}
/*下線*/
h2:after {
content: '';
position: absolute;
left: 50%;
bottom: -15px;/*線の上下位置*/
display: inline-block;
width: 60px;/*線の長さ*/
height: 5px;/*線の太さ*/
-webkit-transform: translateX(-50%);
transform: translateX(-50%);/*位置調整*/
background-color: black;/*線の色*/
border-radius: 2px;/*線の丸み*/
}
このようにborderの代わりに疑似要素を使って、好きな長さの線を表示させることができるわけですね。こちらの記事でも疑似要素による線を使った表現をいくつか紹介しています。ぜひ参考にしてみてください。
