感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

ボックスに対して値を設定する。

<スポンサーリンク>

■HTMLのボックスとは
padding:内容とボーダーとの余白。背景やボーダーに対してテキストなどの内容が接近し過ぎないように設定するため
border:パディングとマージンの堺にある枠線のこと
margin:ボーダーと他の要素の余白のこと

paddingとborderはそれぞれ、
○○-top:値
○○-bottom:値
○○-left:値
○○-right:値

p {
	margin-top: 80px;
	margin-left: 150px;
}

要素の幅を指定する
width: 値

h2, p, a {
	margin-bottom: 20px;
	width: 400px;
	background-color: #ffcc33;
}	

要素の高さを指定する
height: 値

h3, p, a {
	margin-bottom: 30px;
	height: 60px;
	background-color: #ffcc33;
}

・ボックスに影をつける
box-shadow:

  • moz-box-shadow: →Firefox
  • webkit-box-shadow: →Safari/Chrome

DOCTYPE宣言(文書型宣言)とは、

<!DOCTYPE>

から始まる部分のことで、文書がHTMLであり、どのバージョンを利用して、どのDTD(文書型定義)に従って記述しているのかを文頭に宣言すること。

・セレクタの種類
基本セレクタ
→pやdivなどのHTML要素にスタイルを適用させる

p {
	font-size: 16px;
}

クラスセレクタ
→ある段落には緑色の指定を、それ以外は青色し指定したいなど、クラスごとに設定を変えたいときに使う。
適用する要素にクラス名をつける。要素名とクラス名の間には「.」をつける。

p.blue {
	color: blue;
	}
.red {
	color: red;
	}
<h1>クラスセレクタ </h1>
<p class="blue">青色</p>
<p class="red">赤色 </p>

IDセレクタ
→ページ内のある1つの要素にだけスタイルを適用させたい場合に使う。
IDとクラスの違いは、
1つのHTML文書の中で同じID名を複数の要素に指定できないことだ。
IDセレクタでの設定は、1つの要素を特定するために使う。
IDセレクタは要素名とID名の間に「#」を付ける。

p#blue {
	color: blue;
	}
#red {
	color : red;
	}
<h1>IDセレクタ</h1>
<p id="blue">青色にするID </p>
<p id="red">赤色にするID</p>
<p> 指定なしだから色無し</p>

<参考>

HTML&スタイルシート トレーニングブック CSS3増補版

HTML&スタイルシート トレーニングブック CSS3増補版