webページをデザイン（レイアウト）する上で重要なのがスタイルシート(CSS)です。
デザイン的な要素を取り込もうとすると、ＨＴＭＬだけでは限界があります。CSSはデザイン的要素がより細かく設定できます。最近はCSSをメインにレイアウトされたwebサイトが主流になってきています。
【スタイルシートの記述のしかた】
セレクタ｛属性 ： 値｝
セレクタ ：スタイルを設定する要素
属性：セレクタで指定した要素に設定するスタイルの種類
値：スタイルごとに決められている値
ちなみに複数の属性を設定する場合は
セレクタ｛属性 ： 値 ； 属性 ： 値｝ と書きます。
【スタイルシートの記述方法の種類】
スタイルシートの記述方法には、3通りの方法があります。
1. インラインで記述する方法
2. ＨＴＭＬ全体に反映させる方法
3. 外部ファイルを読み込む方法
【記述例】
1. インラインで記述する方法・・・・・特定のタグに直接記述します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ＣＳＳについて</title>
</head>
<body>
<p style="color : #FF3333 ; ">CSSインライン記述</p>
</body>
</html>
2. ＨＴＭＬ全体に反映させる方法・・・・・<style>タグを<head>タグの間に記述します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ＣＳＳについて</title>
<style type="text/css">
<!--
p{
color :
#FF3333 ;
}
-->
</style>
</head>
<body>
<p>CSSインライン記述</p>
</body>
</html>
※<!-- -->
はコメントタグで、ＨＴＭＬ文書を記述するときに文書中にわかりやすくするため説明文などを記述する時に使います。従ってコメントタグの間に挟まれたテキストはブラウザ上には反映されません。CSS未対応のブラウザで表示するとスタイルを設定した文書まで表示されていまいます。それを回避するためにコメントタグを用います。
3.外部ファイルを読み込む方法・・・・・スタイルを記述したファイルを作成し、
HTML文書の中でそのファイルを読み込みます。スタイルを記述したファイルはファイル名 .cssで保存します。ＨＴＭＬ文書の中の<head>タグの間に読み込む .cssファイル名を記述し指定します。
■cssファイルの記述
.red {
font-size: 12px;
color: #ＦＦ0000;
}
このファイルに「text1」と名前を付けて保存します。
■ＨＴＭＬファイルの記述
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ＣＳＳについて</title>
<link href="text1.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="red">CSS外部ファイル読み込み</p>
</body>
</html>
このようにしてＨＴＭＬファイル上で
text1.cssを読み込み、その中の.redというスタイルを適当な場所に適用させます。
|
| << ファイルの階層意識 |
スタイルシートの考え方 >> |
 |
|
|
|
|
| |
■WEBデザインの基本 |
 |
|
|
