CSS基本講座4 ボックス

こんにちは！
今回は、CSSのレイアウトの基本となる 「ボックスモデル」 について解説します！

HTMLの要素は、すべて 四角いボックス（箱） として扱われます。
この「ボックス」のサイズや位置をコントロールするのが今回のテーマです。

CSS基本講座4 ボックス

ボックスモデルとは？

📌 使いどころ
ボックスモデルは、要素の 余白や枠線 をコントロールするための考え方です。

📖 構造のイメージ

このような感じで、ボーダーの内側と外側にそれぞれ余白があるのが特徴です。
内側をパディング（padding）、外側をマージン（margin） といいます。

では、具体的にどのように使えるのか。

例えば、以下のボタンを例とすると

「ボタン」という文字が真ん中に表示されてますよね。
文字とボーダーの距離、つまり余白を広げたい（もしくは縮めたい）ときにパディングを使って調整できます。

次にマージンです。
これは、ボタンが２つある場合などに、そのボタン同士の余白を調整したいときに使えます。

💡 例：ボックスに余白と枠線をつける

margin

margin: 20px;

マージンの上下左右に20pxの余白をあけました。

以下のように上下左右それぞれ指定することも可能です。

margin-top: 5px;
margin-bottom: 10px;
margin-left: 15px;
margin-right: 20px;

padding

padding: 10px;

パディングの上下左右に20pxの余白をあけました。

padding-top: 5px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 20px;

border：枠線

border: 1px solid black;

要素のまわりに線を引きます。
左から順に太さ・線の種類・色を指定できます。

まとめ

プロパティ	内容	よく使う値の例
margin	外側の余白を指定	margin: 20px;
padding	内側の余白を指定	padding: 10px;
border	枠線を指定	border: 1px solid #000;
box-sizing	幅の計算方法を指定	border-box, content-box
position	要素の配置方法を指定	static, relative, absolute など
top, left など	positionと組み合わせて位置を指定	top: 0;, right: 10px; など

ボックスの扱いは、CSSレイアウトの土台となる部分です。
この仕組みをしっかり理解することで、デザインの幅が大きく広がります！まずは基本から少しずつ試してみましょう 💪