ホーム(記事一覧)へ

CSSのborderの太さを可変する方法

「borderの太さをブラウザ幅やデバイスによって可変させるにはどうするんだろう?」

というあなたへ、CSSのborderの太さを可変する方法について解説します。

borderの長さならwidth

borderの長さはその要素のwidthまたはheightと同じです。

長さを変えたいならwidthに対して%指定かvw指定しましょう。

↓ブラウザの幅を変えると可変します。

borderの長さ
<style>
.example{
    width: 50%;
    padding: 10px;
    border: 3px solid #e30000;
    background: #f2f2f2;
}
</style>
<div class="example">borderの長さ</div>

border-widthをvw指定かvh指定

本題のborderの太さつまりborder-widthを可変するにはvw指定かvh指定を指定します。

vwはブラウザの横幅、vhはブラウザの縦幅(高さ)に対する比率の指定になります。1vhはブラウザ幅の1/100です。

border-widthに%指定はできません。

vw、vhについて詳しくはこちら↓

↓ブラウザの幅を変えると可変します。

borderの太さ
<style>
.example2{
    width: 200px;
    padding: 10px;
    border: 1vw solid #e30000;
    background: #f2f2f2;
}
</style>
<div class="example2">borderの太さ</div>

メディアクエリで段階的に指定

vw指定かvh指定では太くなりすぎたり細くなりすぎたりします。

一般的にborderは補助的なものですからそこまで極端な変化は不要でしょう。

PCのとき、タブレットのとき、スマホのときで段階的に指定してみましょう。

メディアクエリを使います。

↓ブラウザの幅を変えると可変します。

borderの太さ(段階的に)
<style>
.example3{
    width: 200px;
    padding: 10px;
    border: 15px solid #e30000;
    background: #f2f2f2;
}
@media(max-width:950px){
    .example3{
    border-width: 7px;
    }   
}
@media(max-width:600px){
    .example3{
    border-width: 1px;
    }   
}
</style>
<div class="example3">borderの太さ(段階的に)</div>

まとめ

  • borderの長さを可変させたいならwidthで要素の横幅を%指定しましょう。
  • border-widthを可変させたいならvw指定かvh指定しましょう。%は効きません。
  • デバイスによって太さを変えたいならメディアクエリで段階的に指定しましょう。

以上、CSSのborderの太さを可変する方法でした。

関連記事