CSSのborderの太さ・長さを変える方法

「borderの太さや長さ変えるにはどうするんだろう？」

というあなたへ、CSSのborderの太さ・長さを変える方法を解説します。

borderの太さを変える:border-width

borderの太さはborder-widthで指定します。

<style>
.example{
    border: 1px solid #333;
    border-width: 10px;
    padding: 5px;
}
</style>
<div class="example"> border-width: 10px</div>

border-widthは特定の線の太さを指定することができます。

<style>
.example2{
    border: 1px solid #333;
    border-width: 15px 5px 1px 0;
    padding: 5px;
}
</style>
<div class="example2"> border-width: 15px 5px 1px 0</div>

<style>
.example3{
    border: 1px solid #333;
    border-width: 5px 20px;
    padding: 5px;
}
</style>
<div class="example3"> border-width: 5px 20px</div>

<style>
.example4{
    border: 1px solid #333;
    border-width: 5px 20px 1px;
    padding: 5px;
}
</style>
<div class="example4"> border-width: 5px 20px 1px</div>

「border」では1行で太さ、デザイン、色を指定できます。

<style>
.example5{
    border: 10px solid #333;
    padding: 5px;
}
</style>
<div class="example5"> border: 10px solid #333</div>

borderについて詳しくはこちら↓

CSS border(枠線)の使い方と種類一覧

CSS borderおよびborderに関連するCSSプロパティの種類一覧を実例とともに紹介します。

この記事を読む

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

borderの長さを変える：width

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

横線ならwidth、縦線ならheightです。

長さを変えたいならwidthやheightやpaddingを指定しましょう。

<style>
.yokosen{
    border: 1px solid #333;
    width: 200px;
}
</style>
<div class="yokosen"></div>

<style>
.tatesen{
    border: 1px solid #333;
    width: 0px;
    height: 200px;
}
</style>
<div class="tatesen"></div>

まとめ

borderの太さはborder-widthを指定。

borderの長さはその要素のwidthまたはheightを指定。

以上、CSSのborderの太さ・長さを変える方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む