こんにちは、すぐるです
入門２では、htmlとcssの基本的な書き方を学びました。入門３では、htmlのボックスモデルについて学びます
ーーーーーーーーーーーーーーーーー
HTML&CSS入門３で学べること
♢HTMLのボックスモデルが理解できる
♢CSSを使って余白の調整ができるようになる
ーーーーーーーーーーーーーーーーー
HTMLのボックスモデルとは
Htmlのボックスモデルとは、htmlタグで囲われた要素の周りには、目に見えない枠線があって、その枠線の内側と外側は余白があるということです
ボックスモデルを図で表すと次のようになります。要素がボックスに入れられたようなイメージをしてるからボックスモデルと呼ばれています
上の図では分かりやすいように太く描いていますが、実際に要素の周りには目には見えない枠線があります。枠線のことをボーダーと呼んだりします
ちなみにこの枠線はcssのborderプロパティを使うことによって、目に見えるようにすることもできます。そのcssは後ほど書いていきます
ここで大切なことは、<h1>タグによって囲まれた要素の周りには目に見えない枠線があって、その枠線の内側の余白のことをpadding、外側の余白のことmarginと言いうことです
マージンとパディングは、好きなように指定することができます
まだイメージしにくいと思うので、実際にマージンとパディングをcssで指定して、感覚をつかんでいきましょう
余白の調整ができる
①htmlファイルとcssファイルに次のように記述をする
htmlファイルに記述する
cssファイルに記述する
cssファイルには、余白の変化がわかりやすいように、borderプロパティとbackgroundプロパティで枠線と背景を指定しておきます
borderプロパティの値の指定の仕方はちょっと特殊で、値が３つになっています。ここでは、h1タグに対して、太さが１ピクセルで、直線かつ青色の枠線を指定しろという意味を表しています
solidの意味は直線です。直線以外で指定したい場合は、dashed・・・破線、 dotted・・・点線、double・・・二重線などもあります
線の太さの1pxや、枠線の色も好きなように変えてみるのも面白いかもしれません
ここまで書けたら、ブラウザを確認して見ます。次のようになっていたら成功です
ブラウザの横いっぱいに広がった背景と、薄い青色の枠線を確認することができます。今の段階ではまだ余白の指定をしていないので、特に余白はありません。
②枠線の内側に余白を指定してみる
では、上のように準備ができたらcssのpaddingプロパティを指定して、枠線の内側がどのように変化するかをみてみましょう。cssファイルに次の記述を追加してください
h1タグの方は、paddingの値を１つだけ指定していますが、h2タグの方は４つ値を指定しています。
これはどういうことかというと、paddingの値を一つだけ指定した場合は上下右左すべてを表し、４つ指定した場合は、指定した値の左から順に、上、右、下、左と対応します
つまり、上下右左すべてに同じだけの余白を指定する場合は、paddingの値を一つだけ指定すればいいのに対し、上下右左それぞれ違う値をしてするときは４つ値を指定すればいいということです
記述が終わったら、ブラウザを更新して見ましょう
しっかりと反映されています
padding：３０px；と指定した上の方は、枠線の内側に上下右左それぞれ３０pxの余白がしっかりとできています。※右側だけが広がりすぎてしまう理由は、後で説明するので今は無視していてください
一方でpadding：４０px ０px ４０px ０px；と指定した方は、上と下にはしっかりと内側余白ができていますが、左右には余白ができていません。０pxと指定したからです。
③枠線の外側の余白を指定してみる
次に外側の余白を指定してみます。cssファイルに次の記述を追加します
h1タグの方は、上下右左に８０pxのマージンを指定しました。枠線の外側の余白が上下右左に８０px分できていれば成功です
h2タグの方は、上下に８０px、左右に０pxのマージンを指定しました。枠線の外側の余白が上下に８０px分できていれば成功です
しっかりと反映されています
しかしよく見てみると、h1タグの方はしっかりと上下左右に８０px分の外側余白ができていますが、h2タグの方は下に８０px分の外側余白はできていますが、上には８０px分の余白ができていません
これはどういうことかというと、外側の余白マージンを指定すると、隣り合う外側の余白どうしは打ち消しあうという性質があります。つまり、大きい方の余白が小さい方の余白を飲み込むということです
ここではそれぞれ８０pxどうしなので、そのまま片方の８０pxだけが反映された形になっています
ぼくは、ボックスモデルを理解するのにかなり苦労した経験があります。何度も繰り返すことで理解できるようになると思います
最後にもう一度、ボックスモデルの図をのせておきます
入門３はこれで終わりです。おつかれさまでした
本気でWebデザインを学ぶなら
本気でウェブデザインを学ぶなら、Udemyのオンライン講座 
が超おすすめです
ぼくは１９歳のときUdemyでWebデザインの勉強をはじめて、
その半年後にフロントエンジニアとして仕事を取ることができました
こうなることができたのは、完全にUdemyのおかげだと思っています
Udemyのコースはどれも質が高くて、すごい分かりやすいです
しかし、量が豊富なので、勉強するにはかなり骨が入りましたが（笑）
ちなみに、ぼくは今でも複数のコースで学んでいます
もし、キャリアアップしたい。Webスキルをつけて収入を上げたい。という人がいたら、Udemyで学ぶ価値は大いにあると思います
最後に、ぼくが一番はじめに受けていたコースは、「 未経験からプロのWebデザイナーになる！ 」っていうコースです
かなり丁寧に解説されていて、１９歳のポンコツな頭でも理解することができました
ついでにPhotoShopも応用的なところまでこのコースで学べます
他にもたくさんのWeb系のコースがあるので、ぜひ自分にあったコースを探してみてください
Udemy はこちらから！
