HTML&CSS 「ボックスモデルについて」

アイキャッチ画像 ネットビジネス
スポンサーリンク

この記事はHTML&CSS「ボックスモデルについて」を紹介しています。

こんにちはカピドンです。

今回の興味はプログラミングです。

progateで学んだことをまとめて、不足している部分を追加したりしています。

復習や補足として使ってください。

私も学習中の身なので、間違っている箇所があるかもしれません。

もし間違っていたら、教えていただけると嬉しいです。

カピドン(プログラミング勉強中)(@kapidon_reads)さん | Twitter
カピドン(プログラミング勉強中) (@kapidon_reads)さんの最新ツイート。web小説、アニメ、ゲーム、最新テクノロジーなどが大好きです。 便利なプログラムを作ったり、AIを作ったりして、家でゴロゴロするのが夢です。 夢を実現するため、プログラミングとブログを頑張っています。 it企業に就職して、フルスタッ...
スポンサーリンク

HTML&CSS「ボックスモデルについて」

ボックスモデルとは、HTML&CSSのレイアウトの基本構造です。

アイキャッチ画像

 

ボックスモデルは上記のように四つの層に分かれており、それぞれ下記のような役割があります。

content:内容です。heightとwidthで幅と高さを決められます。

padding:contentとborderの間の余白です。

border:paddingとmarginの間の境界線です。

margin:一番外側の余白です。

これらの四つの層にはそれぞれに、大きさの値を指定できるプロパティがあります。

heightとwidthプロパティ

heightプロパティはcontentの高さを、widthプロパティは幅を指定できます。

単位は%やemなどたくさんあるのですが、基本的にはpxを使います

See the Pen
height&width
by カピドン(プログラミング勉強中) (@kapidon_reads)
on CodePen.

paddingプロパティ

paddingプロパティはcontentとborderの間の余白を指定できるプロパティです。

See the Pen
padding
by カピドン(プログラミング勉強中) (@kapidon_reads)
on CodePen.

paddingでは「top」、「right」、「bottom」、「left」とそれぞれ方向を指定して、余白を設定することが出来ます。

しかし全方向に値を指定する場合には、この方法だと超めんどくさいので、上記のコードのように違う方法を使います。

  • 全方向同じ値を指定するなら、padding:値;
  • 上下と左右が同じ値なら、padding:上下の値 左右の値;
  • 全方向違う値なら、padding:上の値 右の値 下の値 左の値;

という感じですね。

borderプロパティ

borderプロパティは、marginとpaddingの間の境界なのです。ですが境界というよりも境界線と覚えた方がわかりやすかもしれません。

See the Pen
border
by カピドン(プログラミング勉強中) (@kapidon_reads)
on CodePen.

paddingではpadding:大きさの値;と記述しましたが、borderでは

  • 大きさの値:borderの太さ
  • スタイルの値:borderの種類(二重線や点線など)
  • 色の値:borderの色

という三つの値(順不同)を指定することが出来ます。

ちなみにborderではpaddingのように、一気に上下左右バラバラの指定をすることはできません。

border-topやborder-leftを用いて、一つ一つ設定していく必要があります。

marginプロパティ

marginプロパティは一番外の余白です。

 

See the Pen
margin
by カピドン(プログラミング勉強中) (@kapidon_reads)
on CodePen.

marginはpaddingと値の指定方法が同じです。

marginとpaddingの違いを解説

wordやexcelなど今までの経験では、余白が一つしかなかったと思います。

同じ余白が二つあるというのは、意味が分からないですよね!

私も勉強した当初は全く分かりませんでした。(´;ω;`)

なので私が理解した範囲でpaddingとmaginの違い(特徴)を紹介したいと思います。

paddingの特徴

  1. 背景(background-color)の範囲内の余白
  2. paddingとpaddingは相殺しない(上の要素のpadding-bottomと下の要素のpadding-topが加算されます。
    padding-bottom:20px;+padding-top:10px;=30pxという感じです。)
  3. autoの値が無い。
  4. 負の値が無い。

marginの特徴

  1. 背景(background-color)の範囲外の余白
  2. marginとmarginは相殺される。(上の要素のmargin-bottom、下の要素のmargin-topのどちらか大きい方の値にる。
    margin-bottom:20px;+margin-top:10px;=20px)
  3. autoの値がある。(autoは要素を中央に配置します。)
  4. 負の値がある。(負の値を指定するとはみ出します。)

HTML&CSS 「ボックスモデルについて」のまとめ

この記事では

  • CSSレイアウトには、content,padding,border,marginの四つの層がある。それらのことをボックスモデルという。
  • contentは要素の内容で、heightとwidthプロパティで幅と高さを指定できる。
  • paddingは背景内の余白で、全方向の値をまとめて指定できる。
  • borderはpaddingとmarginの境界線で、一つの方向ずつ値を指定しなければならない。
  • marginは背景外の余白で、全方向の値をまとめて指定できる。
  • marginには「相殺する」、「autoの値がある」、「負の値を指定できる」という三つの特徴がある。

という感じのことを紹介しました。

プログラミング大国を目指してカピドンでした。

ではでは。

 

コメント

タイトルとURLをコピーしました