トップ＞スッキリかんたんスタイルシート

プロパティの一覧
文字	色と背景	ボックス	配置	リスト	表	いろいろ
font-family	color	border-width	display	list-style-type	width,height,padding	scrollbar
font-size	background-color	margin	position	list-style-image	text-align,vertical-align	cursor
font-weight	background-image	padding	z-index	list-style-position	background	page-break-before
font-style	background-repeat	border-style	float		border
font	background-attachment	border-color	clear		border-collapse
text-align	background-position	width	overflow
vertical-align	background	height
line-height
letter-spacing
white-space

CSSの書式

①　「セレクタ」「プロパティ」「値」の３つの組み合わせで定義する。
②　基本的な定義方法と複数プロパティを定義する方法がある。
③　コメントの記述の仕方

基本的な定義方法

h1要素の文字の色を赤に指定する。

複数プロパティを定義する方法

１つのセレクタに対して［;］セミコロンで区切って，定義する。
ここでは，文字の色を赤，文字の大きさを14pxに指定。

コメント

メモ代わりとして使うと便利です。
CSS定義を挟み込むことで，一時的にスタイルの設定を無効にすることもできます。

>>> 記述例・HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>記述の仕方</title>

<style type="text/css">
<!--
h1 {color:red;font-size:14px;}
/*h1 {color:blue;}*/
p {color:#000080;}
-->
</style>

</head>
<body>
<h1>CSSの書式</h1>
<p>セレクタ・プロパティ・値</p>
</body>
</html>

CSSの設定方法

CSSをHTML文書に定義する方法は３種類あります。

１．HTMLのheadタグ内にまとめて設定する

古いブラウザでStyle要素のソースが見えないように，コメントタグとセットで記述する。

<style type="text/css">
<!--
h1 {color:blue;}
--></style>

２．HTMLのタグに直接設定する

一部の要素にだけCSSを使用したい場合に有効。

<h2 style="color:red;">赤！</h2>

３．外部のCSSファイルを読み込む

複数のHTMLファイルに対して，１つのCSSファイルでスタイルが設定できるので，デザインの統一や管理が効率的にできる。

HTMLのheadタグ内に下記リンクを書き込む。

<link rel="stylesheet" href="kihon001.css" type="text/css">

外部CSSの記述内容

body {background-color:#FFE6FF;}
p {font-size:12px;}

>>> 記述例・HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSSの基本</title>
<style type="text/css">
<!--
h1 {color:blue;}
--></style><!-- １．HTMLのheadタグ内にまとめて設定する -->

<link rel="stylesheet" href="kihon001.css" type="text/css">
<!-- ３．外部のCSSファイルを読み込む -->

</head>
<body>
<h1>青！</h1>
<h2 style="color:red;">赤！</h2><!-- ２．HTMLのタグに直接設定する -->
<P>フォントの大きさは，12px</P>
</body>
</html>

セレクタの指定方法

ｐ要素やh1要素などのHTML要素に対して指定できる。class，idを要素に付加して要素内の特定の部分にスタイルを指定することもできる。

１．要素にスタイルを設定する

　（１）基本セレクタ

CSS--------------------------
h1 {color:#008000;}

HTML-------------------------
<h1>基本セレクタの適用</h1>

　（２）複数のセレクタ

,で区切って複数の要素を指定する。

CSS--------------------------
h2,h3 {color:#FF0000;}

HTML-------------------------
<h2>複数セレクタの適用</h2>
<h3>複数セレクタの適用</h3>

　（３）全称セレクタ

すべての要素を示す。

CSS--------------------------
* {background-color:#FEFCDA;}

２．任意の範囲にスタイルを設定する

　クラス名やID名では，最初の文字に数字やハイフンは使用できない。

　（１）クラスセレクタ

「.」から記述する。複数の要素に適用することができる。

CSS--------------------------
.abc {color:#ffffff;background-color:#000000;}

HTML-------------------------
<p class="abc">クラスセレクタの適用</p>

　（２）IDセレクタ

特定の１つの要素に適用させる。要素とID名の間に#を付ける。要素を省略して#から記述することもできる。

CSS--------------------------
p#def {border-style:solid; padding:5px;}

HTML-------------------------
<p id="def">IDセレクタの適用</p>

３．要素の相関関係でスタイルを設定する

　（１）子孫セレクタ

ここでは，p要素内のem要素に適用される。他のem要素には適用されない。

CSS--------------------------
p em {color:green;}

HTML-------------------------
<p>p要素内の<em>（ここが適用対象）</em>em要素に適用</p>

４．疑似クラス・疑似要素

　（１）疑似クラス

CSS--------------------------
a:link {color:#FF0000;}
a:hover {color:#0080FF;}

HTML-------------------------
<a href="#">リンク</a>

>>> 記述例・HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>セレクタの種類</title>
<style type="text/css">
<!--
body {font-size:14px;}
h1 {color:#008000;}/*基本セレクタ*/
h2,h3 {color:#FF0000;}/*複数セレクタ*/
* {background-color:#FEFCDA;}/*全称セレクタ*/
.abc {color:#ffffff;background-color:#000000;}/*クラスセレクタ*/
p#def {border-style:solid; padding:5px;}/*IDセレクタ*/
p em {color:green;}/*子孫セレクタ*/
a:link {color:#FF0000;}/*疑似クラス*/
a:hover {color:#0080FF;}
--></style>
</head>
<body>
<h1>基本セレクタの適用</h1>
<h2>複数セレクタの適用</h2>
<h3>複数セレクタの適用</h3>
<p class="abc">クラスセレクタの適用</p>
<p id="def">IDセレクタの適用</p>
<p>p要素内の<em>（ここが適用対象）</em>em要素に適用</p><!-- 子孫セレクタの適用 -->
<a href="#">リンク</a><!-- 疑似クラスの適用 -->
</body>
</html>

スタイルシート関連書籍