🐧ボックスモデルの基本🐧
🌟ボックスモデルの基本について
🌱ボックスとは
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参照
ボーダーのスタイル
🌱ボックスの横幅と高さを設定
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;
🌱マージンとパディングの違い
-
余白ができる位置が違う
マージンはボーダーの外側
パディングはボーダーの内側 -
マージンは負の値が使える
margin-top: -60px;
⚠️パディングは負の値は使えない
- マージンは値にAUTOが使える
margin-left: auto;
margin-right: auto;
幅を指定した要素に上記のように指定すると外側の要素から見て
左右真ん中に要素が配置される！！
要素をセンタリングしたい場合によく使われる👌
今日は時間がなくてささっとまとめ😣
眠くても進めたいところまでできたから自分褒める！
明日本当は新しい💻届く予定だけど受け取れなさそうだから
週末かな〜〜それを楽しみに頑張るぞ💪🏻パワー
Discussion
いいですね