CSSのborderの長さの決まり方

border自体に長さを指定することはできません。
borderとは要素の上下左右に表示されるものなので、
どうやって決まるかというと「borderの長さ」＝「要素の長さ」となります。

以下の例で説明していきます。
【例1】

/* HTML */
<p>
NMB48(これは要素です。)
</p>

/* CSS */
p{
border-bottom: solid 2px #000;
}

【例1:表示例】

⬆︎上記のようにborder-bottom（下線を引くためのプロパティ）を使うと、
このように要素の下の部分全体に下線が引かれます。
つまり、線の長さを変えたければ、要素自体の大きさを変えれば変えることができます。

要素自体の大きさを変えることで線の長さを変える

以下の例で説明していきます。
【例2:divタグの上に線を引きます】

/* HTML */
<div class="sample">
  <p>AKB48(これは要素です。)</p>
</div>

/* CSS */
p{
.sample {border-top: solid 5px #000}
}

【例2:表示例】

divタグというのは、何も指定しないと横幅最大に広がってしまいます。
これでは長すぎるので、対策として「divタグの横幅を指定する」という方法があります。

divタグで横幅指定

【例3:divタグの上に線を引きます】

/* HTML */
<div class="sample">
  <p>HKT48(これは要素です。)</p>
</div>

/* CSS */
.sample {
  width: 500px;
  border-top: solid 5px #000;
  }

【例3:表示例】

⬆︎divタグに対して、width:500pxを指定することにより、border-topの長さも500pxになりました。

最後に

以上がborderの長さを調整する方法になります。このようにdivタグに対してwidthを指定することでborderの長さを変えることが可能になります。
borderの長さを変えたい時はこの方法で変えると良いと思います。

他にもHTML、CSSには多くの要素があります。これからもHTML、CSSについて記事を掲載していきます。

投稿者プロフィール

kinukawahiroyasu
投稿タグ
, ,