ホームへ

CSSで外側にあるborderを内側に指定する方法

2020年02月24日

こんにちは。テイクです。ホームページを作り続けて9年になります。

「横並べにするためにwidthをぴったり指定したのにborderやpaddingをつけたら崩れた。」

なぜならborderやpaddingはwidthの外側になるからです。

ではこれらを内側に指定して崩れないようにしたい。

そんなときに使えるCSSで「外側にあるborderを内側に指定する方法」を説明します。

borderやpaddingの基本はこちら

borderは背景の内側にあるか外側か

結論からいうと外側にあります。

枠線なし背景あり

枠線あり背景あり

枠線あり背景なし

heightを100pxと指定したうえでborderを20px指定しているのでborderを含めた高さは140pxとなっています。(widthはautoです。)

枠線の色はオレンジに見えますが実際は「rgba(255,0,0,0.5)」つまり半透明の赤を指定しています。枠線は黄色背景の上に重なっているということです。

borderはheightには含まれないが背景色の上にある、という状態です。

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

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

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

CSSでborderやpaddingを内側に指定する方法

結論:box-sizing: border-box

borderやpaddingはwidthやheightで指定した範囲の外側に描画されます。

これではいちいちwidthを直さないといけなかったり崩れの原因となります。

box-sizing: border-boxを使うとborderもpaddingもwidthの内側に含めた指定にすることができます。

box-sizing: border-boxを指定した例

枠線なし背景あり

枠線あり背景あり

枠線あり背景なし

先述の例ではborderはheightに含まれていませんでしたが、box-sizing: border-boxを指定したことでborderがheightに含まれ、完全に内側に入りました。

まとめ

CSSでborderやpaddingを内側に指定するには box-sizing: border-boxを使いましょう。

以上、CSSで外側にあるborderを内側に指定する方法でした。

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

CSSやhtmlをマンガで学ぶ