css（cascading style sheets）の基本css（cascading style sheets）の基本 1....

ＣＳＳ（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. ＣＳＳでは、１つの「セレクタ」に対して複数の「プロパティ」を定義することができる。複数の「プロパティ」を定義するには、スタイルの設定の間を「：」で区切る。

12.要素名｛プロパティ:値; プロパティ:値;｝13.h1 {

color: blue;color: blue; font‐size: 30px; }}

14.記述例では<h1>～</h1>の文字列を青に、サイズを30ピクセルにしている。

15 セレクタのグループ化15.セレクタのグルプ化ＣＳＳは複数のセレクタ名を「,」で区切り、複

数の要素に度に同じスタイルを指定する数の要素に一度に同じスタイルを指定することができる。

16 要素名要素名｛プロパティ:値；｝16.要素名、要素名｛プロパティ:値；｝17. h1,h2 {

color: blue;color: blue;}

18.コメントをつける「/* と「*/ の間にメント記述することができるまた「/*」と「*/」の間にコメント記述することができる。また、一時的にスタイルの指定を無効したい場合にも使用できる。きる。

19. body {color: #333333; /* 文字色を濃いグレーにする */}

20. /* h1 {font size: 30px;font‐size: 30px;} */ 一時的にスタイルの設定を無効にする

「セレクタ」の種類「セレクタ」の種類1. 比較的よく使用するセレクタとしては、「基本セ

レクタ」「クラスセレクタ」「ＩＤセレクタ」「疑似セレクタ」「子孫セレクタ」などがある。

2. 基本セレクタ：要素名｛プロパティ:値;｝p {p {

font‐size: 16px;}

3. 基本セレクタは<h>や<p>などのＨＴＭＬ要素にスタイルを適用させる。たとえば、pセレクタを設p定し、スタイルを指定すると、ＨＴＭＬファイル内のすべてのｐ要素にスタイルが適用される。

クラスセレクタ1. ある段落のテキストには緑色の指定を、それ以外の

段落には青色の指定をしたいという場合には「クラスセレクタか「ＩＤセレクタを使うセレクタ」か「ＩＤセレクタ」を使う。

2. 適用する要素にクラス名を付け、要素名とクラス名の間に「」を付けるまた要素名を省略して先頭をの間に「.」を付ける。また、要素名を省略して先頭を「.」から記述することもできる。

3. 要素名.クラス名{プロパティ:値;}要素名クラ名{ ティ値;}（省略）.クラス名{プロパティ:値;}

4. p.blue {l blcolor: 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;}

疑似クラス

1. 疑似クラスは、「：」の後ろにあらかじめ決められた状態を示す予約語を組み合わせて定義するた状態を示す予約語を組み合わせて定義する。

2. 疑似クラスは、リンクを指定するa要素のリンク状態別の色指定などに使われる A要素では態別の色指定などに使われる。A要素では、「:link」「:visited」「:hover」「:active」の４つの疑似クラスが利用できるラスが利用できる。

3. 要素名：疑似クラス名｛プロパティ:値;｝li k { l d } リンク部分の未アクセス状態を示すa:link { color: red;} リンク部分の未アクセス状態を示す。

a:visited { color: green;}リンク部分のアクセス済み状態を示す。

a:hover { color: yellow;}リンク部分の化ソルを乗せた状態を示すa:hover { color: yellow;}リンク部分の化ソールを乗せた状態を示す。

a:active { color: blue;}リンク部分のアクセス中の状態を示す。

子孫セレクタ子孫セレクタ1. 特定の要素の子要素、または子孫の要素にスタイ

ルを適用させる要素名との間に「半角スペース」ルを適用させる。要素名との間に「半角スペース」で区切って設定する。

2 たとえば「p em」とセレクタを設定すると p要素内2. たとえば、「p em」とセレクタを設定すると、p要素内のem要素にだけスタイルが適用され、他のem要素にはスタイルは適用されない素にはスタイルは適用されない。

3. 親要素名子要素または子孫要素名｛プロパティ:値｝値;｝

4. p em {l ff0066color: #ff0066;

}

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 llfont-size: small;}

css（cascading style sheets）の基本css（cascading style sheets）の基本 1....

Documents