CSSはcascading style sheetsの略。CSSは、HTMLで記述されたWebページの見栄え・スタイルを効率的に定義するための技術です。HTMLで文書の意味を定義し、CSSで見栄えを定義することにより、意味と見栄えを分離することが可能となります。
各部の名前は覚えなくてもいいです。構成を覚えてください。
セレクタ { プロパティ:値; }
セレクタはタグまたはクラス指定などで(どの部分を)を指します。
プロパティは(何を)を示します。
値は(どうする)を示します。
最も基本的なCSSの使用例を下記に示します。この例では、<h2>~</h2>で囲まれたタイトル部が赤字で表示されます。「h2 { color: red; }」は、「h2の部分の色(color)を赤(red)にする」という意味を持ちます。この例の「色」のような見栄えなどの情報を「スタイル」と呼びます。また、タグを指定したのでこのページにあるすべてのh2に対して適用されます。
css内では、セレクタの中と値の中以外は、半角スペース、改行、タブは無視されます。途中で改行してもしなくても変わりありません。
先ほどのh2 { color: red; }は、
h2 {
color:red;
}
と改行して書いても同じです。
<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;
}
と書いています。
タグを指定すると、そのタグすべてに適用されます。それでは困る場合、クラス(class)指定で指定されたところだけ適用させます。
クラス指定の例:
HTML側にクラス指定でakaと名付けた場所のみ適用されます。
上の図の部は数学の集合でいう「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"と指定された箇所に適用。