HTML&CSS入門3〜HTMLのボックスモデル〜

 

 

こんにちは、すぐるです

 

 

入門2では、htmlとcssの基本的な書き方を学びました入門3では、htmlのボックスモデルについて学びます

 

ーーーーーーーーーーーーーーーーー

HTML&CSS入門3で学べること

 

♢HTMLのボックスモデルが理解できる

♢CSSを使って余白の調整ができるようになる

ーーーーーーーーーーーーーーーーー

 

 

HTMLのボックスモデルとは

 

 

Htmlのボックスモデルとは、htmlタグで囲われた要素の周りには、目に見えない枠線があって、その枠線の内側と外側は余白があるということです

 

ボックスモデルを図で表すと次のようになります。要素がボックスに入れられたようなイメージをしてるからボックスモデルと呼ばれています

 

上の図では分かりやすいように太く描いていますが、実際に要素の周りには目には見えない枠線があります。枠線のことをボーダーと呼んだりします

 

ちなみにこの枠線はcssのborderプロパティを使うことによって、目に見えるようにすることもできます。そのcssは後ほど書いていきます

 

ここで大切なことは、<h1>タグによって囲まれた要素の周りには目に見えない枠線があって、その枠線の内側の余白のことをpadding、外側の余白のことmarginと言いうことです

 

マージンとパディングは、好きなように指定することができます

 

まだイメージしにくいと思うので、実際にマージンとパディングをcssで指定して、感覚をつかんでいきましょう

 

 

 

余白の調整ができる

 

 

①htmlファイルとcssファイルに次のように記述をする

 

htmlファイルに記述する

 

cssファイルに記述する

 

cssファイルには、余白の変化がわかりやすいように、borderプロパティとbackgroundプロパティで枠線と背景を指定しておきます

 

borderプロパティの値の指定の仕方はちょっと特殊で、値が3つになっています。ここでは、h1タグに対して、太さが1ピクセルで、直線かつ青色の枠線を指定しろという意味を表しています

 

solidの意味は直線です。直線以外で指定したい場合は、dashed・・・破線、 dotted・・・点線、double・・・二重線などもあります

 

線の太さの1pxや、枠線の色も好きなように変えてみるのも面白いかもしれません

 

ここまで書けたら、ブラウザを確認して見ます。次のようになっていたら成功です

ブラウザの横いっぱいに広がった背景と、薄い青色の枠線を確認することができます。今の段階ではまだ余白の指定をしていないので、特に余白はありません。

 

 

②枠線の内側に余白を指定してみる

 

では、上のように準備ができたらcssのpaddingプロパティを指定して、枠線の内側がどのように変化するかをみてみましょう。cssファイルに次の記述を追加してください

h1タグの方は、paddingの値を1つだけ指定していますが、h2タグの方は4つ値を指定しています

 

これはどういうことかというと、paddingの値を一つだけ指定した場合は上下右左すべてを表し、4つ指定した場合は、指定した値の左から順に、上、右、下、左と対応します

 

つまり、上下右左すべてに同じだけの余白を指定する場合は、paddingの値を一つだけ指定すればいいのに対し上下右左それぞれ違う値をしてするときは4つ値を指定すればいいということです

 

記述が終わったら、ブラウザを更新して見ましょう

しっかりと反映されています

 

padding:30px;と指定した上の方は、枠線の内側に上下右左それぞれ30pxの余白がしっかりとできています。※右側だけが広がりすぎてしまう理由は、後で説明するので今は無視していてください

 

一方でpadding:40px 0px 40px 0px;と指定した方は、上と下にはしっかりと内側余白ができていますが、左右には余白ができていません。0pxと指定したからです。

 

 

③枠線の外側の余白を指定してみる

 

次に外側の余白を指定してみます。cssファイルに次の記述を追加します

 

h1タグの方は、上下右左に80pxのマージンを指定しました。枠線の外側の余白が上下右左に80px分できていれば成功です

 

h2タグの方は、上下に80px、左右に0pxのマージンを指定しました。枠線の外側の余白が上下に80px分できていれば成功です

しっかりと反映されています

 

しかしよく見てみると、h1タグの方はしっかりと上下左右に80px分の外側余白ができていますが、h2タグの方は下に80px分の外側余白はできていますが、上には80px分の余白ができていません

 

これはどういうことかというと外側の余白マージンを指定すると、隣り合う外側の余白どうしは打ち消しあうという性質があります。つまり、大きい方の余白が小さい方の余白を飲み込むということです

 

ここではそれぞれ80pxどうしなので、そのまま片方の80pxだけが反映された形になっています

 

 

ぼくは、ボックスモデルを理解するのにかなり苦労した経験があります。何度も繰り返すことで理解できるようになると思います

 

最後にもう一度、ボックスモデルの図をのせておきます

 

入門3はこれで終わりです。おつかれさまでした

 

 

 

本気でWebデザインを学ぶなら

 

本気でウェブデザインを学ぶなら、Udemyのオンライン講座 が超おすすめです

ぼくは19歳のときUdemyでWebデザインの勉強をはじめて

その半年後にフロントエンジニアとして仕事を取ることができました

 

こうなることができたのは、完全にUdemyのおかげだと思っています

Udemyのコースはどれも質が高くてすごい分かりやすいです

しかし、量が豊富なので、勉強するにはかなり骨が入りましたが(笑)

 

ちなみに、ぼくは今でも複数のコースで学んでいます

 

もし、キャリアアップしたい。Webスキルをつけて収入を上げたい。という人がいたら、Udemyで学ぶ価値は大いにあると思います

 

最後に、ぼくが一番はじめに受けていたコースは、「 未経験からプロのWebデザイナーになる! 」っていうコースです

未経験からプロのWebデザイナーになる!

 

かなり丁寧に解説されていて、19歳のポンコツな頭でも理解することができました

ついでにPhotoShopも応用的なところまでこのコースで学べます

 

他にもたくさんのWeb系のコースがあるので、ぜひ自分にあったコースを探してみてください

 

Udemy  はこちらから!