🐧

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

2022/11/30に公開・約2,500字・1件のコメント

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

🌱ボックスとは

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
マージン100px
+
マージン50px
要素B

👇

要素A
マージン100px
要素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;

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

  1. マージンは値にAUTOが使える
margin-left: auto;
margin-right: auto;

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


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

Discussion

ログインするとコメントできます