【プログラミング】HTML と CSS で理解しづらいところ【理解のきっかけ】

HTML と CSS を学んでいる中で、理解しづらいところがあるけど、どう理解したらよいのだろう？

昨日の記事の続きです。
この記事はこんな疑問にお答えします。

本記事の内容
・HTML と CSS で理解しづらいところはどこか？
・ボックスモデルの解説
・ソースコードの公開

■HTML と CSS で理解しづらいところはどこか？

「HTML と CSS を学び始めたけど、理解しづらいところってどこかな？」
「わかりづらいことの一つにボックスモデルという考え方があるね」
「それはどんなものなの？」
「昨日のプログラムと合わせて処理できるようにしよう」

HTML と CSS 役割は分かったけど、これからさらに学んでいくにあたって、理解しづらいことの一つに「ボックスモデル」という考え方があります。

このボックスモデルは、通常HTMLやCSSでコーディングしていても、画面上に明確に見えるように現れないので、理解しづらいのかもしれません。

HTML や CSS を一から学んでいくと、このボックスモデルというものにぶつかりますが、最近はあまり聞かないですが、ホームページビルダーのように画面上に直接入力したり、レイアウトを設定・変更できたりするものを使っていた人はなんのこと？って感じかもしれません。

また、僕のようにWeb系のシステムを学んでこなかった人や、ワードやエクセルなどを利用してきて HTML や CSS を学ぶとこのボックスモデルの考え方を理解するのに苦労するのではないでしょうか。

簡単にいうと、例えば文字を<p>タグで囲った場合、その<p>タグにはボックスといって、箱のようなものが勝手につくられるようになっているのです。

■ボックスモデルの解説

入力文字（要素といいます）を中心に線の内側の余白のエリア、線のエリア、線の外側のエリア、が作成されています。

それを用語でいうと・・・
線：border
線の外側の余白：margin
線の内側の余白：padding

図で表すとこんな感じです。

margin と padding はそれぞれ top bottom right left があります。
margin-top margin-bottom margin-right margin-left
padding-top padding-bottom padding-right padding-left

それに px や % で余白の大きさを指定していきます。

border は margin と padding の間にある線で、px で指定するとその幅の線が表示されます。

このブロックが作られるタグはいろいろありますが、主なものは以下のものです。

HTML

このボックスモデルの解説は以下のページがわかりやすいので参照してください。

CSSのmarginとは？paddingとは？余白の指定方法まとめ

■ソースコードの公開

ソースコードはこんな感じです。
イマイチ上手くコーディングできていません・・・。
イメージだけでも持ってください。

HTML

css


#box1 {
  background-color:skyblue;
  width:100px;
  height:100px;
  padding:10px;
}

#box2 {
  width:50px;
  height:50px;
  border:solid 3px black;
  font-size:20px;
  padding:10px;
  margin:5px auto;
  background-color:pink;
}

スポンサードサーチ

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん