9.CSS


スタイルシート入門

CSSはcascading style sheetsの略。CSSは、HTMLで記述されたWebページの見栄え・スタイルを効率的に定義するための技術です。HTMLで文書の意味を定義し、CSSで見栄えを定義することにより、意味と見栄えを分離することが可能となります。

各部の名前は覚えなくてもいいです。構成を覚えてください。

セレクタ { プロパティ:値; }

セレクタはタグまたはクラス指定などで(どの部分を)を指します。
プロパティは(何を)を示します。
値は(どうする)を示します。

最も基本的なCSSの使用例を下記に示します。この例では、<h2>~</h2>で囲まれたタイトル部が赤字で表示されます。「h2 { color: red; }」は、「h2の部分の色(color)を赤(red)にする」という意味を持ちます。この例の「色」のような見栄えなどの情報を「スタイル」と呼びます。また、タグを指定したのでこのページにあるすべてのh2に対して適用されます。

このように書くと <h2>スタイルシートとは</h2>
<p>CSSはcascading style sheetsの略で・・・・</p>
スタイルシートにはこのように書くと h2 {
 color: red;
}
このように表示されます

スタイルシートとは

CSSはcascading style sheetsの略で・・・・

css内では、セレクタの中と値の中以外は、半角スペース、改行、タブは無視されます。途中で改行してもしなくても変わりありません。
先ほどのh2 { color: red; }は、
h2 {
 color:red;
 }
と改行して書いても同じです。


CSSの指定方法

<style>~</style>で指定する方法

<head>~</head>に書き入れる方法で文書全体(1ページ)に適用されます。<!-- ~ -->でコメントアウトしているのは、CSS未対応ブラウザへの配慮です。

<head>
 <meta charset="utf-8">
 <title>CSSの指定方法</title>
 <style>
 <!--
 h1 {
 color:red;
 }
 -->
 </style>
</head>
<body>
 <h1>CSSとは</h1>
 <p>CSSはcascading style sheetsの略で・・・・</p>
</body>

<link>を用いた外部CSSファイルで指定する方法

<link>タグにより、外部CSSファイルを読み込むことができます。外部CSSファイルを用いることで、複数のHTML文書で共通のCSSを共有することができます。
<head>~</head>間に
<link href="abc.css" rel="stylesheet">
と1行書き入れます。これでabcという外部のCSSを使いますよという宣言になります。

この方法だとHTMLは普通に作り、別のCSSで装飾することになります。abc.cssには、
h2 {
 color:red;
}
と書いています。


CSSの書き方(1)

タグを指定すると、そのタグすべてに適用されます。それでは困る場合、クラス(class)指定で指定されたところだけ適用させます。

クラス指定の例:

このように書くと <p>今日は暑くて<span class="aka">猛暑に</span>なります。</p>
スタイルシートには先頭に「.」をつけて .aka {
 color:red;
}

HTML側にクラス指定でakaと名付けた場所のみ適用されます。

このように表示されます

今日は暑くて猛暑になります。


CSSの書き方(2)

上の図の部は数学の集合でいう「and」になります。「div」かつ「span」ということです。
  →cssではセレクタの「 」(半角スペース)区切りです。
上の図の部と部を足した全部が「or」になり、「div」または「span」ということです。
  →cssではセレクタの「,」(半角カンマ)区切りです。


一度に複数個所を指定することもできます。
div,span {
 color:red;
}
「,」区切りで書いた場合、divタグとspanタグすべてに適用されます。(の部分)

div span {
 color:red;
}
「 」(半角スペース)区切りで書いた場合、divタグの中にあるspanタグすべてに適用されます。なので、ただspanタグがあるだけでは適用されません。(の部分)

class指定との組み合わせでは、
div .aka {
 color:red;
}
divタグ内にあるclass="aka"と指定された箇所に適用。

このケースは少ないですが、
div,.aka {
 color:red;
}
divタグすべてとclass="aka"と指定された箇所に適用。