【CSS】超簡単!ボックスの内側にborder(枠線)を入れる方法を解説【プログラミング】

CSS, ボックスデザイン, border, 枠線, プログラミングプログラミング

CSSでボックスの内側にborder(枠線)を入れたいんだけど、方法わかる?

分かりやすく解説するね!

おはこんばんにちは!ノボルです。

今回は、CSSでボックスの内側にborder(枠線)を入れる方法を解説します!

こんな人に読んでほしい

・CSSでボックスの内側にborder(枠線)を入れる方法を知りたい人

・CSSを勉強している人

・プログラミングに興味がある人

CSSでボックスの内側にborder(枠線)をサクッと入れる方法

CSSに「box-sizing: border-box;」を追加するだけで、ボックスの内側にborder(枠線)を入れることができます

See the Pen BaKvRoL by ZeroRequiem126 (@zerorequiem126) on CodePen.

しかも、「box-sizing: border-box;」を指定してあげることで、

・要素の大きさが変わらない
・枠線と要素内のテキストが被らない


といったメリットもあり、レイアウト崩れが起きにくいです。そのため、レスポンシブデザイン対応にも役立ちます。

以下のイラストから分かるように、borderの値を変更してもwidthのなかに含まれているので、ボックスの大きさが一定となり、要素幅が設定しやすくなります

いちいち、borderの大きさを考慮しなくていいのはラクですね!

最後に

今回の記事では、ボックスの内側にborder(枠線)をサクッと入れる方法を解説しました。

最後まで読んでいただき、ありがとうございました(o^^o)

コメント

タイトルとURLをコピーしました