🐧ボックスモデルの基本🐧

🌟ボックスモデルの基本について

🌱ボックスとは

HTMLタグでマークアップされた要素（タグ＋コンテンツ）

🌱ボックスモデルとは

「HTMLで定義された要素は全て長方形のボックスの中に納められている」という考え方!

🌱ボックスモデルを調整できる主なプロパティ

• margin マージンを調整
• padding　パディングを調整
• border　ボーダー（罫線）を調整
• width　横幅を調整
• height　高さの調整

暗記する必要はなし!

🌱マージンを指定しよう

margin: 50px;

φ(･･
プレビュー確認方法
Googleクロムのデベロッパー機能を使う😃

WEBサイトを右クリック
👇
検証
👇
Elementsタブをクリック
👇
要素をマウスオーバーするとページ上でボックスモデルがハイライトされる！

stylesタブを見ると、
現在のボックスモデルの状況が確認できる！🙆‍♀️

チェックを外すと一時的にファイルに手を加えずCSSを編集することも可能！
元のファイルは変更されない！

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; 

🌱省略する書き方

margin: 10px 20px 30px 40px;

マージンをスペース区切りで上右下左（時計回り）
2.

margin: 10px 20px 30px;

上　左右　下
3.

margin: 10px 20px;

上下　左右

好みで使って良いが、プロジェクトチームでルールがある場合はそれに従う！

🌱マージンの相殺について

marginの相殺とは

要素A
マージン１００px
＋
マージン５０px
要素B

👇

要素A
マージン１００px
要素B

だと、足し算した150pxではなく上下マージンが相殺されて100pxになる！！
初心者は間違いやすいので注意！

⚠️左右のマージンは相殺されない
パディング、ボーダーは上下左右全て相殺されない！

🌱親と子のボックスの上下マージンは相殺される

<div>
  <h1>ボックスモデルの練習</h1>
  <p>ボックスモデルの練習</p>
</div>

👇

div要素
div要素の上マージン　}相殺
h1要素の上マージン　
h1要素
p要素
p要素の下マージン　　}相殺
div要素の下マージン

🌱パディングを設定しよう

padding: 50px;

マージンと同様に省略の記述も可能！

🌱ボーダーを設定しよう

ボックスに罫線を引くことができる

border: solid 10px #f3b94e;

👇上記のように一行で書いた場合と同じ

border-style: solid;
border-width: 10px;
border-color: #f3b94e;

🌱ボーダーの設定を上下左右個別で設定

上だけにボーダーをつけたい場合

border-top: solid 10px #f3b94e;

下記のような記述方法もある🙆‍♀️

border-top-style: solid;
border-top-width: 10px;
border-top-color: #f3b94e;

MDN参照
ボーダーのスタイル
https://developer.mozilla.org/ja/docs/Web/CSS/border-style

🌱ボックスの横幅と高さを設定

h1 {
        width: 400px;
        height: 240px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }

φ(･･
widthとheightの初期値はautoが指定される!!
横幅はブラウザのサイズや親要素に合わせたサイズが設定される
高さはボックス内のコンテンツに合わせたサイズが設定される

🌱ボックスを中央に表示するには左右のマージンをオートに指定する

margin-left: auto;
margin-right: auto;

🌱コンテンツをボックス内で中央揃いにするには

text-align: center;

🌱マージンとパディングの違い

1. 余白ができる位置が違う
   マージンはボーダーの外側
   パディングはボーダーの内側

2. マージンは負の値が使える

margin-top: -60px;

⚠️パディングは負の値は使えない

3. マージンは値にAUTOが使える

margin-left: auto;
margin-right: auto;

幅を指定した要素に上記のように指定すると外側の要素から見て
左右真ん中に要素が配置される！！
要素をセンタリングしたい場合によく使われる👌

---

今日は時間がなくてささっとまとめ😣
眠くても進めたいところまでできたから自分褒める！
明日本当は新しい💻届く予定だけど受け取れなさそうだから
週末かな〜〜それを楽しみに頑張るぞ💪🏻パワー