CSS ボックス（width/height/margin/padding/border）

幅・高さ width/height、余白 margin/padding、境界線 border、角丸 border-radius

フォルダ：css_sample_05

ボックスのサイズの規定、余白、境界線などの設定に関するCSSプロパティです。

ボックスモデル

ブラウザはWebページを表示する際、標準的な CSS 基本ボックスモデルに基づいた長方形のボックスとして表現します。

【準備】

共通で使用するindex.htmlとstyle.cssを用意し、css_sample_05 フォルダの中に入れます（共通のデータとは、CSSの基本で使用したデータです。GitHubからもダウンロードできます）
index.htmlは編集せずそのまま使います

▼style.cssへの追記

#wrap  {
  width: 960px;
  margin: auto;
  background-color: white;
  border: 2px solid black;
  padding: 20px;
}

nav {
  padding: 8px 40px;
  background-color: black;
  color: white;
  border-radius: 10px;
}

header、mainなどに、書き込み済みのwidth、height、margin、paddingについても、数値を変更してみてください。どの部分がmarginで、どの部分がpaddingなのか…など、どこに機能しているのかが分かりやすくなります

各プロパティの意味

width 幅
height 高さ

widthやheightの指定には、px、%などの単位が使えます。

margin 境界線（border）より外側の余白
- margin-top : 上側の余白
- margin-right：右側の余白
- margin-bottom：下側の余白
- margin-left：左側の余白
padding 境界線（border）より内側の余白
- padding-top : 上側の余白
- padding-right：右側の余白
- padding-bottom：下側の余白
- padding-left：左側の余白

marginやpaddingの指定には、px、rem、%、auto などが使えます。
（rem…ルート<html>要素のフォントサイズ）

margin-top、padding-bottomのように、方向を決めて指定する方法と、margin、paddingプロパティを用いて、まとめて指定する方法（ショートハンド）があります。

margin: 0 10px 0 10px;

と記述した場合、

margin-top: 0;
margin-right: 10px;
margin-bottom: 0;
margin-left: 10px;

の意味になります（上→右→下→左の順）。通常0のときは単位は入れずに書きます。

上と下、右と左が同じ値の場合は、更に省略可能です。次の例のように、値が2つしかない場合は、topとbottomが0、rightとleftが10pxを意味しています。

margin: 0 10px;

次の例のように、値が1つであれば、4方向とも10pxであることを表しています。

margin: 10px;

border 境界線。下記の例のように、太さ、色、線の種類の３点を指定します。
border : 1px black solid;
線の種類は次のようなものがあります。
- solid 直線
- dotted 点線
- dashed 破線
- double 二重線
border-radius 角丸。半径を指定します。
半径 + 半径 = 幅 = 高さのときは「円」になります。

【応用】画像を円形にトリミングする

border-radiusを使えば、元の画像を加工せずに、円形にトリミングができます。

▼index.htmlへの追記

<div class="circle">
  <img src="images/sample2.png" alt="画像">
</div>

正方形サイズの画像は、下記からダウンロードしてください

→ダウンロード

▼style.cssへの追記

.circle img {
  border-radius: 50%;
  width: 300px;
}

作成例：https://ngsm-syr.github.io/css_sample_05/
コード：https://github.com/ngsm-syr/css_sample_05

参考リンク