Chapter3 スタイルシートの基本

Chapter3 スタイルシートの基本
Chapter3 スタイルシートの基本
1
2
スタイルシートを記述する方法には、大きく分けて3種類の方法があ
3
イルシートを記述するにあたって必要な基本的な記述方法を学習しま
ります。この章では、「Style属性」を利用した方法とこれからスタ
す。
4
Lesson1　スタイルシートの記述方法
5
6
スタイルシートを記述する際の基本的な文法について学習します。
修
スタイルシートでは「○○の××を△△にする」のような形式でデザインを定
義します。例えば、「<h1>の文字色を赤にする」といった形式です。
対象（○○の部分）をセレクタ、特徴（××の部分）をプロパティ、実際の設
定値（△△の部分）を値と呼びます。
スタイルシートでは、通常プロパティと値を次のように記述します。
プロパティ：値；
例えば、「文字の色を赤にする」という場合、文字の色を指定するプロパティ
「color」と赤を表す値「#ff0000」を利用して下記のように記述します。
color:#ff0000;
プロパティの種類によっては、
プロパティ：値1 値2 値3；
のように、値を複数記述する場合もあります。この時、値と値の間は半角ス
ペースで区切ります。
また１つのセレクタに複数のプロパティを記述する場合（例えば、「<h1>の文
字色を赤に、文字のサイズを14pxにする」などの場合）は、
プロパティ1：値；プロパティ2：値；
のように連続して記述することも可能です。
Lesson2　style属性を利用した定義
XHTML+CSSレイアウトでWebページを作成する場合の手順は、まず最初に、
HTMLドキュメントに、XHTMLの記述を行います。その後、スタイルシートを
記述します。
◆◆ XHTMLの記述
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
14
Chapter3 スタイルシートの基本
<html>
<head>
<title>style属性でCSSを定義</title>
</head>
<body>
<h1>CSSを使おう</h1>
Point
使用頻度の高いタグ
・h1 〜 h3　見出し
・p
段落
1
・ul/ol/dl リスト
・table
表
・form
フォーム
2
<p>CSSを利用するとドキュメントとデザインを分離でき、Webコンテンツの
3
開発やメンテナンスがしやすくなります。再利用性も高いので、積極的に使っ
ていきたいですね。</p>
4
</body>
</html>
5
◆◆ スタイルシートの記述
6
スタイルシートの記述方法は大きく分けて3種類ありますが、この章ではstyle属
Point
CSS の定義方法
修
性を利用した記述方法で学習をします。
CSS にはさまざまな定義方法があり
style属性を利用して、スタイルシートを定義する場合は次のように記述しま
ます。
す。
<対象となるタグ style="プロパティ：値；">
例えば、「<h1>タグの文字の色を赤にする」という場合、
<h1 style="color:#ff0000;">と記述します。
この Chapter ではインライン型といっ
て HTML タグに直接記述する方法で
行います。
この方法は、記述しているタグだけに
有効です。今回は対象とする要素を
<h1> としています。
実際に記述を加えてみましょう。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>style属性でCSSを定義</title>
</head>
<body>
<h1 style="color:#ff0000;">CSSを使おう</h1>
<p>CSSを利用するとドキュメントとデザインを分離でき、Webコンテンツの
開発やメンテナンスがしやすくなります。再利用性も高いので、積極的に使っ
ていきたいですね。</p>
</body>
</html>
このHTMLドキュメントをブラウザソフトで開くと次のように表示されます。
15

Download Report