border と padding を含めないサイズで枠の大きさを指定するコードを紹介します。
概要
border と padding を含めないサイズで枠の大きさを指定する場合は、box-sizing プロパティに "border-box" を指定します。
書式
実装例
コード
.Scale {
border: none;
width: 320px;
background-color: #99decd;
margin: 1rem 1rem 1rem 1rem;
}
.Frame1 {
border:8px solid #009454;
margin:1rem 1rem 1rem 1rem;
padding: 8px 16px 8px 16px;
width:320px;
}
.Frame2 {
box-sizing: border-box;
border: 8px solid #009454;
margin: 1rem 1rem 1rem 1rem;
padding: 8px 16px 8px 16px;
width: 320px;
}
.Frame3 {
box-sizing: content-box;
border: 8px solid #009454;
margin: 1rem 1rem 1rem 1rem;
padding: 8px 16px 8px 16px;
width: 320px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="box-sizing-01.css" />
</head>
<body>
<div class="Frame1">枠1です。</div>
<div class="Frame2">枠2です。</div>
<div class="Frame3">枠3です。</div>
<div class="Scale">基準の枠です</div>
</body>
</html>
解説
枠を3つページに表示します。枠1はbox-sizingを指定せず、枠2はbox-sizingに border-box を指定、枠3はbox-sizingに content-box を指定します。
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
枠2は基準の枠と同じ大きさになり、widthで指定した幅が、borderとpaddingを含めたサイズで表示されます。
box-sizingを省略した枠1は content-box を指定した枠3と同じ大きさになります。この場合は内部のコンテンツの幅がwidthで指定した値になり、
枠全体の幅はwidthの値にborderとpaddingの幅を加えたサイズになります。
outlineを設定した場合の表示
outlineを設定した場合の動作を確認します。
コード
.Scale {
border: none;
width: 320px;
background-color: #99decd;
margin: 2rem 2rem 2rem 2rem;
}
.Frame1 {
border: 8px solid #009454;
outline: 8px solid #f26b37;
margin: 2rem 2rem 2rem 2rem;
padding: 8px 16px 8px 16px;
width: 320px;
}
.Frame2 {
box-sizing: border-box;
border: 8px solid #009454;
outline: 8px solid #f26b37;
margin: 2rem 2rem 2rem 2rem;
padding: 8px 16px 8px 16px;
width: 320px;
}
.Frame3 {
box-sizing: content-box;
border: 8px solid #009454;
outline: 8px solid #f26b37;
margin: 2rem 2rem 2rem 2rem;
padding: 8px 16px 8px 16px;
width: 320px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="box-sizing-02.css" />
</head>
<body>
<div class="Frame1">枠1です。</div>
<div class="Frame2">枠2です。</div>
<div class="Frame3">枠3です。</div>
<div class="Scale">基準の枠です</div>
</body>
</html>
解説
先ほどの例と同じコードですが、outlineプロパティを設定して枠線を表示しています。
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の結果になります。
枠2と基準の枠を比較すると、基準の枠より、枠2のほうがOutlineの線幅だけ大きくなっていることがわかります。
Outlineの線幅は box-sizing プロパティに border-box を指定した場合でも
幅には含まれないことがわかります。
枠の大きさ
box-sizing: border-box; が指定されている場合は、paddingプロパティの値と、border による線幅はwidth, height のサイズには含まれないため、
下図の寸法になります。
枠の全体の大きさは、以下の大きさになります。
outline(left)の線幅 + width の幅 + outline(right)の線幅
outline(top)の線幅 + height の高さ + outline(bottom)の線幅
補足
通常のモードである、
box-sizing: content-box; が設定されている場合の width, height の関係は
こちらの記事を参照してください。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2022-10-27
作成日: 2022-10-27
