CSS基礎講座2 プロパティ、値について

CSS基礎講座1ではセレクタの解説をさせて貰ったので、次は「プロパティ、値」についての解説をしていこうと思います。

…ここからが続き

プロパティとは

プロパティはスタイルシートで設定する数々の規定された書式を記述します。
例えば、横の長さ「width」、文字の大きさ「font-size」、マージン「margin」などです。プロパティ名は日本語ではなく、基本的に予め決められた英字です。

値とは

一方、「値」とは各プロパティが持つそのプロパティの設定値です。各プロパティには一つ一つにこの値とデフォルト値が定められています。例えば、文字サイズを12ピクセルにしたいとき、プロパティは「文字サイズ(font-size)」、その値が「12ピクセル(12px)」になります。

プロパティによっては、値の指定の仕方が数種類ある場合もあります。例えば、サイズを指定する場合でも絶対値で指定することもできれば、相対値で指定できることもできます。

CSSの書式は以上、セレクタ、プロパティ、値を組み合わせて記述していきます。

実践編

簡単なレイアウトのサンプルページ

サンプルページで指定しているCSSは下記の通りです。

body	{
	background: #000;
	text-align: center;
}
div#wrapper	{
	width: 950px;
	margin: 0 auto;
	border: solid 1px #333;
}
div#header	{
	width: 930px;
	padding: 10px;
	border-bottom: solid 5px #2A82AB;
}
div#contents	{
	width: 910px;
	padding: 10px 20px;
	background: #FFF;
	color: #333;
}
div#contents p	{
	text-align: left;
}
div#contents p.back	{
	text-align: center;
}
div#footer	{
	width: 910px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 10px 20px;
	text-align: right;
	font-size: 12px;
	color: #FFF;
}

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article