ＣＳＳ（Cascading Style Sheets）の基本
ＣＳＳ（Cascading Style Sheets）の基本
1. ＣＳＳの基本的な考え方は、ＨＴＭＬの構造を表す要
素（タグ）に対しスタイルを定義するというもの
素（タグ）に対しスタイルを定義するというもの。
2. ＣＳＳでは、「セレクタ」「プロパティ」「値」の3つを組み
合わせてスタイルを設定する
合わせてスタイルを設定する。
3. 「セレクタ」は、<p>,<h1>,<a>や<img>要素などコンテ
ンツ内のどの要素にスタイルを適用するかを指定す
ンツ内のどの要素にスタイルを適用するかを指定す
る。
4 セレクタの次の{ }内に「プロパティ」と「値」を記述す
4. セレクタの次の{ }内に「プロパティ」と「値」を記述す
る。 「プロパティ」と「値」の間には「：」で区切る。
5 「プロパティ」は 色 長さ 大きさといったスタイルの
5. 「プロパティ」は、色、長さ、大きさといったスタイルの
種類で、「値」はプロパティの実際の色や長さの値で
ある。
6. セレクタ ｛プロパティ：値；｝ 例） h1 ｛color: blue;｝
7 h1 {
7. h1 {
color: blue;
}
述例 タ 素 文字色 を
8. 記述例はセレクタ（ｈ1要素）の文字色（color）をｃｓｓ
で青(blue)に指定している。こうすることにより、ＨＴＭ
Ｌファイル内のすべてのｈ１要素（<h1>）の色が青に
Ｌファイル内のすべてのｈ１要素（<h1>）の色が青に
変わる。
9. 値の後ろに「；」を付けているが、プロパティが1つだ
けの場合はなくても構わない。
10. 半角スペースやタブを入れたり改行するのは、ソー
スを見やすくするためであ て ソ ス自体の意味に
スを見やすくするためであって、ソース自体の意味に
変化はない。
11 ＣＳＳでは １つの「セレクタ」に対して複数の「プロパ
11. ＣＳＳでは、１つの「セレクタ」に対して複数の「プロパ
ティ」を定義することができる。複数の「プロパティ」を
定義するには、スタイルの設定の間を「：」で区切る。
16 要素名 要素名 ｛プロパティ:値；｝
16. 要素名、要素名 ｛プロパティ:値；｝
17. h1,h2 {
color: blue;
color: blue;
}
18. コメントをつける
「/* と「*/ の間に メント記述することができる また
「/*」と「*/」の間にコメント記述することができる。また、
一時的にスタイルの指定を無効したい場合にも使用で
きる。
きる。
19. body {
color: #333333; /* 文字色を濃いグレーにする */
}
20. /* h1 {
font size: 30px;
font‐size: 30px;
} */ 一時的にスタイルの設定を無効にする
クラスセレクタ
1. ある段落のテキストには緑色の指定を、それ以外の
段落には青色の指定をしたいという場合には「クラス
セレクタ か「ＩＤセレクタ を使う
セレクタ」か「ＩＤセレクタ」を使う。
2. 適用する要素にクラス名を付け、要素名とクラス名
の間に「 」を付ける また 要素名を省略して先頭を
の間に「.」を付ける。また、要素名を省略して先頭を
「.」から記述することもできる。
3. 要素名.クラス名{プロパティ:値;}要素名 クラ 名{ ティ 値;}
（省略）.クラス名{プロパティ:値;}
4. p.blue {
l bl
color: blue;
}
.red {ed {
color: red;
}
IDセレクタ
1. ページ内のある1つの要素だけにスタイルを適用させたい
場合には「ＩＤセレクタ」を使う。
文書 中 を複数 素 指定 き
2. １つのＨＴＭＬ文書の中で同じＩＤを複数の要素に指定でき
ない。ＩＤセレクタでの設定は1つの要素を特定するために
使う。
使う。
3. ＩＤセレクタは要素名とＩＤ名の間に「＃」を付ける。また、要
素名を省略して先頭を「＃」から記述することもできる。
4 要素名#ID名{プロパティ 値 }
4. 要素名#ID名{プロパティ:値;}
（省略）#ID名{プロパティ:値;}
5. p#blue {
5. p#blue {
color: blue;
}
#red {
#red {
color: red;
}
CSSをHTMLファイルへ組み込む方法
1. 組み込む方法は、以下の３通りの方法があ
る。
<html>
る。
2. Style要素を使って
h d
/h d 内に
<html>
<head>
<style>
</head>
<head>～</head>内に
指定する。
</head>
<body>
</body>
</html>
3. Style属性を使って要素に
直接指定する
</html>
<html>
<head>
</head>
直接指定する。
4. Link要素で外部のＣＳＳファイルを
さ
</head>
<body>
<要素名 style属性>
</body>
リンクさせる。
ＨＴＭＬ文書 </body></html>
<link>タグ
CSS
フ イル
ファイル
Style要素を使ってhead内に指定する
Style要素を使ってhead内に指定する
<html>
<html>
<head>
<title>style要素を使ったCSS定義
</title>
</title>
<style type="text/css">
h1 {
color: #66cc66;
color: #66cc66;
}
p {
color: #336666;
co o : 336666;
}
</style>
</head>
<body>
</body>
</html>
Style属性を使って要素に直接指定する
Style属性を使って要素に直接指定する
<html>
<html>
<head>
<title>style要素を使ったCSS定義</title>
</head>
</head>
<body>
<h1 style=“color: #ff6633”>インラインスタイル
シート</h1>
シ ト</h1>
<p>このように、<span style="color:
#ff0000">HTML要素に直接スタイルを定義</span>
します。</p>
します。 /p
</body>
</html>
Link要素で外部のcssファイルをリンクさせる
以下のように、まずcssファイルを作成する
ファイル名は style 01 css
body {
background‐color: #cff187;
l
以下のように、まずcssファイルを作成する
h1 {
ファイル名は、style_01.css
ファイル名は、style_02.css
color: #333333;
}
h1 {
b k d l #ff9933
h1 {
color: #666699;
}
p {
background‐color: #ff9933;
color: #ffffff;
padding: 5px;
}
p {
color: #669933;
}
}
h2 {
color: #339966;
}}
p {
border: dashed 3px #339966;
padding: 10px;
padding: 10px;
}
address {
font‐style: normal;y ;
font‐size: 12px;
}
外部cssファイルをリンクさせる
<html>
<head>
<title>cssのリンク</title>
<title>cssのリンク</title>
<link href="style_01.css" rel="stylesheet" type="text/css" />
</head>
<body>
<body>
<h1>Cascading Style Sheets</h1>
<p>
の基本は「セレクタ」「プロパティ」「値」を組み合わせてスタイルを
cssの基本は「セレクタ」「プロパティ」「値」を組み合わせてスタイルを
設定します。
</p>
<p>
cssのスタイル設定は、同じ要素であれば、このように繰り返し使うこ
とができます。
</p>
</body>
</html>/
Cssファイル作成
Cssファイル作成
body {y
color: #666666
}
h1 {
font-size: 50px;
color: #943434;
}}
h2 {
font-size: 20px;
color: #ff9900;
}
address {
f i ll
font-size: small;
}
