HTMLデータの作り方7

CSSの基本的なプロパティ

color

文字などの色

background

バックの色

background-image

バックに貼る画像ファイル
URLで指定できるので他のマシンの画像も利用できる。

font-size

文字の大きさ

font-family

フォントの種類

serif (明朝)
sans-serif (ゴシック体)

text-align

テキストの位置
left, center, right のいづれかを指定

margin

枠線(ボックス)の外側の余白の幅

padding

枠線(ボックス)の内側の余白の幅

border-width

枠線(ボックス)の線幅

border-color

枠線(ボックス)の色

CSSの単位

長さ

単位	説明
em	現在のフォントサイズを1とした相対的な大きさ
ex	xのフォントサイズを1とした相対的な大きさ
%	全体を1とした相対的な大きさ
px	ピクセル
pt	ポイント 1/72 inch
pc	パイカ 1/6 inch
in	インチ 1 inch = 2.54 cm
cm	センチメートル
mm	ミリメートル

色

指定方法説明

色の名前 red, green などの色の名前

#RRGGBB 16進法で表した色の値

rgb(R,G,B) 10進法で表した色の値

rgb(R%,G%,B%) %で表した色の値

指定方法	説明
色の名前	red, green などの色の名前
#RRGGBB	16進法で表した色の値
rgb(R,G,B)	10進法で表した色の値
rgb(R%,G%,B%)	%で表した色の値

例


BODY {
	color: white;
	background: #FF0000;
	margin-left: 10%;
	padding-left: 1cm;
	margin-right: 15%;
	padding-right: 1cm;
	border-width: 2;
}

H1 {
	color: green;
	font-size: 20pt;
	font-family: sans-serif;;
}

上のCSSを使ったページ。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>
test page of CSS
</TITLE>
<LINK REL = STYLESHEET TYPE = "text/css" HREF = "test-css.css" TITLE = "Default css">
</HEAD>
<BODY>
<H1> Sample of CSS</H1>
このようなページになる。
<HR>
<CENTER>
<A HREF = "css2.html">back</A>
</CENTER>
</BODY>
</HTML>

参考

HTMLのリファレンス
CSSのリファレンス
W3C
HTMLの規格を決めている所。

prev | next
index | home

abe@injapan.net