実技編

向かい合う（あるいは親子）要素どうしのmarginは、重なり合って数値の大きい方のみ挿入される（相殺される）場合と、両方が同時に挿入される（相殺されない）場合とに分かれます。今回はその2つのケースの違いについて学習します。

複数の要素をページに配置していくと、それら要素間の『間隔』の処理が多く発生します。ページの『空間的な余裕』あるいは『圧迫感』に繋がる『間隔』というものをうまく制御して、見やすいホームページ作りに役立てましょう。

要素にpadding（あるいはborder）を挿入したことで起こる『padding（あるいはborder）がwidthに合算されて要素が大きくなる』という事象とその回避策、利便性についてくわしく解説します。

paddingプロパティその1に引き続き、内余白のお話です。その2では、親要素から子要素への内余白の指定について解説します。親子の関係にある要素間の内側四方（あるいは任意の方向のみ）に余白を挿入するケースです。

要素とその内容との間に挿入する『内余白』はpaddingプロパティで指定します。要素のレイアウトに『ゆとり』が生まれ、ホームページが読みやすくなります。『その1』では基本的な記法と反映結果を解りやすく解説します。

何も指定していなくとも標準的なスタイルを割り当ててくれる『デフォルトスタイルシート』についての解説です。ホームページを作成するうえでデフォルトスタイルシートとどのように付き合っていけばよいのか考えていきましょう。

要素の幅を『親要素の何パーセント』という相対値で指定します。幅を指定したい要素の『親要素の幅』を知る、あるいはそれを前もって指定することが大切です。ピクセル指定にはあに『メリット』についても解説します。

div要素を利用して要素のまとまりを作り、任意の『グループ』として定義することができます。要素ひとつひとつに個別にプロパティを設定するのではなく、グループ単位にプロパティを設定することも可能となりレイアウトの幅が広がります。

要素に罫線を付けることで『枠線』として利用したり、一部（左だけ、下だけなど）に罫線を付けてその要素を見た目に強調するなど、レイアウトの引き締めに役立つborderプロパティについて解説します。

ページのレイアウトデザインに欠かせない要素の大きさの指定。今回はその大きさの中でも『幅』の概念について。併せて要素の親子関係がレイアウトの調整に及ぼす影響と、そのルールについても基礎部分に絞って解説します。