今日、やったこと

今日のホワイトボード

余白(余白だけではないけど)はデフォルトの設定値があります。

なので、「左右の余白を10px」と指定された場合は、

　padding : 0 10px;

と指定すると、デフォルトの上下の余白が0に上書きされてしまいます。

めんどくさいですが、以下のように左右だけを設定してください。

　padding-left : 10px;

　padding-right : 10px;

図　デフォルトの設定を上書きしない！

以下のHTMLは<body>タグの中にid=titleの<div>タグ、id=dataの<div>タグがあります。

以下のCSSでは<body>タグにはフォントサイズを10pt、フォント色は#00ee00を設定しています。

id=titleの<div>タグはフォントサイズを20ptに設定しています。

id=titleの<div>タグは<body>タグの中にあるため、<body>タグの設定を適用されます。が、id=titleの<div>タグにはフォントサイズを20ptに設定しているため、<body>タグの設定が上書きされます。

設定	<body>タグの設定	id=titleの<div>タグの設定	id=titleの<div>タグの中では
フォントサイズ	10pt	20pt	20pt
フォント色	#00ee00	->	#00ee00

同じように<body>タグの中にあるid=dataの<div>タグも<body>タグの設定が適用されますが、id=dataの<div>タグでフォント色を#630063に設定しているため、フォント色は上書きされます。

設定	<body>タグの設定	id=dataの<div>タグの設定	id=dataの<div>タグの中では
フォントサイズ	10pt	->	20pt
フォント色	#00ee00	#630063	#630063

図　階層化されたタグ内のデザイン設定

階層化(ネスト)されている場合、

です。

ぼちぼちテストをします。