CSSの基本

基本書式

style属性

任意のタグ内に記述し、そのタグだけにスタイルを設定する方法

書式	解説
<タグ名 style="プロパティ:値;"></タグ名>	属性値として、スタイルの項目名と値を「プロパティ:（コロン）値;（セミコロン）」の順に記述します。複数の設定項目を並べて記述できます。

<style>タグ

セレクタ（タグ名やid、class）を指定してページ全体にスタイルを設定する方法

書式	解説
<style type="text/css"> タグ名 {項目名:値;} タグ名#id名 {項目名:値;} タグ名.class名 {項目名:値;} </style>	複数のスタイルをまとめて記述する。適用するタグ、id名、class名を指定し、それらに設定する項目と値を{}内で指定する。設定値は複数記述することが可能。

id名の前には「#（シャープ）」を、class名の前には「.（ピリオド）」が必要で、タグ名は省略できる。classは複数のタグでスタイルを共有できるので、タグ名を書かずに使うことも多い。

外部ファイル

複数のHTMLファイルで読み込んで利用できるように、スタイルをテキストファイルで作成し、読み込んで設定する方法

書式	解説
<link rel="stylesheet" type="text/css" href="../basic.css">	外部ファイルはテキストファイルで作成し、書式は上記<style>タグ内に記述する場合と同じです。

タグがない場合

セレクタで指定したい場所にタグがない場合は、次のようなタグを使って対象を決めます。
また、id名かclass名のどちらかを設定しておくと良いでしょう。idは対象が１つの場合、classは複数箇所を対象にすることができます。スタイルシートの場合、classを使えば判りやすいかも知れません。

書式	解説
<div id="id名" class="class名">設定対象</div>	<div>タグは行単位のタグなので、前後で改行されます。２つ並べて記述すると改行されて2行になります。
<span id="id名" class="class名">設定対象</span>	<span>タグは文字単位で設定可能で、前後には変化がありません。２つ並べて記述すると、続けて同じ行で表示されます。

数値の単位

スタイルシートで使う数値には単位が必要です。下記のような単位を使用します。

px	ピクセル
cm	センチメートル
mm	ミリメートル
in	インチ
pt	ポイント
pc	パイカ（1pc=12pt）
em	1emは現在のフォントサイズ
ex	1exは現在の「x」の高さ

この他に現在の高さや幅との比較で「%」を使うことも可能です。

文字のスタイル

文字のサイズ

プロパティ	値	例	表示例	表示例
font-size:	数値	20pt	文字のスタイル	Font Style
	%	50%	文字のスタイル	Font Style
	xx-small		文字のスタイル	Font Style
	x-small		文字のスタイル	Font Style
	smaller		文字のスタイル	Font Style
	small		文字のスタイル	Font Style
	medium		文字のスタイル	Font Style
	large		文字のスタイル	Font Style
	larger		文字のスタイル	Font Style
	x-large		文字のスタイル	Font Style
	xx-large		文字のスタイル	Font Style

フォントの種類

プロパティ	値	例	表示例	表示例
font-family:	フォント名	Arial	TEXT STYLE	Font Style
		Arial Black	TEXT STYLE	Font Style
		Comic Sans MS	TEXT STYLE	Font Style
		Courier New	TEXT STYLE	Font Style
		Impact	TEXT STYLE	Font Style
		Times New Roman	TEXT STYLE	Font Style

上記の例はWindows用です。フォントはOSによっても違いますし、自分とは違う環境の人には表示されないこともあります。

文字の太さ

プロパティ	値	表示例	表示例
font-weight:	normal	TEXT STYLE	Font Style
	bold	TEXT STYLE	Font Style
	bolder	TEXT STYLE	Font Style
	lighter	TEXT STYLE	Font Style

文字の色

プロパティ	値	例	表示例
color:	色番号色名	#ff0000	TEXT STYLE
		#00ff00	TEXT STYLE
		#0000ff	TEXT STYLE
		#ffff00	TEXT STYLE
		#ff00ff	TEXT STYLE
		#00ffff	TEXT STYLE

色番号、色名はこちらで調べられます。→カラーチャート

文字の位置

プロパティ	値	表示例
text-align:	left	TEXT STYLE
	center	TEXT STYLE
	right	TEXT STYLE
	justify	TEXT STYLE TEXT STYLE TEXT STYLE TEXT STYLE TEXT STYLE TEXT STYLE TEXT STYLE TEXT STYLE

justify では自動的に文章が改行されるときに両端を揃えて表示します。（最後の行には適用されていない）

背景とブロック枠のスタイル

背景色

プロパティ	値	例	表示例
background-color:	色番号色名	#ff9999	TEXT STYLE
		#99ff99	TEXT STYLE
		#9999ff	TEXT STYLE
		#ffff99	TEXT STYLE
		#ff99ff	TEXT STYLE
		#99ffff	TEXT STYLE

背景画像

プロパティ	値	例	表示例
background-image:	url(ファイル名)	image/kogara_6023L.gif	TEXT STYLE
background-image:	url(ファイル名)	image/kogara_6023D.gif	TEXT STYLE

枠線の種類

プロパティ	値	表示例	表示例	表示例
border-style: border-top-style: border-left-style: border-right-style: border-bottom-style:	none	TEXT STYLE	TEXT STYLE	TEXT STYLE
	dotted	TEXT STYLE	TEXT STYLE	TEXT STYLE
	dashed	TEXT STYLE	TEXT STYLE	TEXT STYLE
	solid	TEXT STYLE	TEXT STYLE	TEXT STYLE
	double	TEXT STYLE	TEXT STYLE	TEXT STYLE
	groove	TEXT STYLE	TEXT STYLE	TEXT STYLE
	ridge	TEXT STYLE	TEXT STYLE	TEXT STYLE
	inset	TEXT STYLE	TEXT STYLE	TEXT STYLE
	outset	TEXT STYLE	TEXT STYLE	TEXT STYLE

上記の表示例では、枠線を見やすくするため、枠線外側に2ptの余白を設定しています。以下の表示例でも同様です。

枠線の太さ

プロパティ	値	例	表示例	表示例	表示例
border-width: border-top-width: border-left-width: border-right-width: border-bottom-width:	数値	5px	TEXT STYLE	TEXT STYLE	TEXT STYLE
	数値	10px	TEXT STYLE	TEXT STYLE	TEXT STYLE
	thin		TEXT STYLE	TEXT STYLE	TEXT STYLE
	medium		TEXT STYLE	TEXT STYLE	TEXT STYLE
	thick		TEXT STYLE	TEXT STYLE	TEXT STYLE

上記の表示例では枠線の種類に「border-style:solid;」を指定しています。

枠線の色

プロパティ	値	例	表示例
border-color: border-top-color: border-left-color: border-right-color: border-bottom-color:	色番号色名	#ff0000	TEXT STYLE
		#00ff00	TEXT STYLE
		#0000ff	TEXT STYLE
		#ffff00	TEXT STYLE
		#ff00ff	TEXT STYLE
		#00ffff	TEXT STYLE

ブロックの幅と高さ

プロパティ	値	例	表示例
width:	数値	200px	TEXT STYLE
height:	数値	80px	TEXT STYLE

ブロックの余白

プロパティ	値	例	表示例	図解
margin: margin-top: margin-left: margin-right: margin-bottom:	数値	10px	TEXT STYLE	TEXT STYLE margin padding
padding: padding-top: padding-left: padding-right: padding-bottom:	数値	5px	TEXT STYLE	TEXT STYLE margin padding

marginは枠線外側の余白。paddingは枠線内側の余白。

１行で4項目指定する場合「margin: 上右下左;」の順にサイズを指定する。

<hr>の設定

プロパティ	値	例
width:	数値	100px
height:	数値	10px
background-color:	色番号色名	#ff9999
color:	色番号色名	#ff0000
border-style:	(上記参照)	double
border-width:	(上記参照)	5px
border-color:	(上記参照)	#0000ff

border-style, border-width, border-colorの表示例では、height, background-colorと同じ表示例を使って更にスタイルを付け加えています。

リンクのスタイル

リンクの書式

書式	解説
a {項目名:値;}	セレクタにはもちろん、idやclassも指定できます。
a:link {項目名:値;}	訪問前のリンクの書式
a:visited {項目名:値;}	訪問後のリンクの書式
a:hover {項目名:値;}	マウスを上に載せた時の書式
a:active {項目名:値;}	リンク先を読込中の時の書式

<body>タグ内でリンクの色を変更することができますが、CSSを使うと色以外のスタイルを指定することができます。
文字のスタイルで使った各プロパティを使用することができます。

プロパティ	値	例	表示例
color:	(上記参照)	#ff0000	TEXT STYLE
background-color:	(上記参照)	#ff9999	TEXT STYLE

マウスを載せた時の書式

実際にマウスを動かして変化を見てみましょう。

プロパティ	値	例	表示例
color:	(上記参照)	#ff0000	TEXT STYLE
background-color:	(上記参照)	#ff9999	TEXT STYLE

戻る