【CSS】borderの線を内側に描く方法

スポンサーリンク
スポンサーリンク
【CSS】borderの線を内側に描く方法:アイキャッチHTML/CSS
スポンサーリンク
スポンサーリンク

borderは基本的に要素の外側に線を描くものです。しかし、内側に描く方法があるので、今回はご紹介したいと思います。

【CSS・border・内側】box-sizing: border-boxを使う

色々とやり方はありますが、要素の内側に線を描きたければ、基本的にはbox-sizing: border-boxを使ってください。

スポンサーリンク
スポンサーリンク

【CSS・border・内側】なぜbox-sizing: border-boxなのか?

なぜbox-sizing: border-boxを使うのかと言うと、box-sizingを使わないと、要素の横や縦の高さがバラバラになってしまうからです。

<div class="example">
赤飯焚くのが趣味特技♪赤飯焚くのが趣味特技♪
</div>
<br>
<div class="example2">
赤飯焚くのが趣味特技♪赤飯焚くのが趣味特技♪
</div>
.example{
  border: 10px solid gray;
  width:50%;
  padding:10px;
}
.example2{
  border: 10px solid gray;
  width:50%;
  padding:10px;
  box-sizing: border-box;
}
box-sizing: border-box;

上の例ではbox-sizingを使わないexampleとbox-sizingを使うexample2を用意してみました。

両者を比較してみると要素の横の長さが違うことが分かると思います。

widthやheightは、そのままだとpaddingは含まないで計算されます。これでは要素の高さがバラバラで修正が大変です。

一方でbox-sizing: border-boxを使うとpaddingを含めて計算してくれるので、要素の大きさを他のモノと均等(シンメトリー)に保ちやすいです。

要素の大きさはpaddingを含めた大きさにした方がコーディングは楽になるので、とりあえずはbox-sizing: border-boxをチョイスしておくのが良いと思います。

【CSS・border・内側】具体例

<div class="example2">
赤飯焚くのが趣味特技♪赤飯焚くのが趣味特技♪
</div>
.example2{
  border: 10px solid gray;
  width:50%;
  padding:10px;
  box-sizing: border-box;
}

borderを内側に描くのに特別な事は必要ありません。box-sizing: border-boxを加えるだけです。

【CSS・border・内側】その他の方法は、どんなモノがあるのか?

borderを内側に描く方法は他にもあります。outlineプロパティなどがそうです。

<div class="example">
赤飯焚くのが趣味特技♪赤飯焚くのが趣味特技♪
</div>
.example{
  outline: 10px solid gray;
  padding:10px;
  width:50%;
  outline-offset: -10px;
}
outline-offset

outlineプロパティは要素を縁取りするためのプロパティです。outlineを使い、その後outline-offset: -10pxなどとすると内側に描写できます。

<div class="example">
赤飯焚くのが趣味特技♪赤飯焚くのが趣味特技♪
</div>
.example{
  outline: 10px solid gray;
  width:50%;
  outline-offset: -10px;
}
outline-offset2

こちらは要素の大きさに合わせて縁を取ってくれるので、その意味でboderと似ていますが、paddingで調節などをしないと中の要素が隠れてしまうことがあります。

スポンサーリンク
スポンサーリンク

outlineプロパティも使いどころによっては便利ですが、box-sizing: border-boxでは中の要素は隠れることは無いので、修正に手間はありません。

borderの線を内側に描写したければ、box-sizingを利用しましょう

以上、CSSのboderで内側に線を描く方法を紹介してみました。

やはり要素の大きさを均等に保つといった観点から、box-sizingは非常に便利です。他のモノは微調整が必要なので、修正コストもかかると思います。

是非、今回紹介した方法を試してみてください。

スポンサーリンク
スポンサーリンク
HTML/CSS
shigureをフォローする
プロフィール
このブログの管理人です

Webライター/Webデザイナー。ダイエット歴10年。保有資格:日商簿記2級。

2021年4月に開設した当ブログも、月間4万PVを達成しました。これからも精進してまいります。

shigureをフォローする
Shigure Factory

コメント

スポンサーリンク
タイトルとURLをコピーしました