CSS

CSSとは

スタイルシートとは、WEBページ上の「見栄え」を定義するための新しい技術です。「HTML は本来文書の意味だけを定義するべきで、文書の見栄えは定義するべきではない。見栄えは HTML ではなく、スタイルシートで記述しよう」というのが開発の理由です。

CSSの基礎

最も簡単なスタイルシートは次のように指定します。<span> はインライン要素（前後で改行されない）、<div> はブロック要素（前後で改行される）を囲む一般的なタグとして使用されます。

<span style="color:red;">あいうえお </span>
<div style="color:red;">あいうえお</div>

CSSの記述場所

  1. タグ内に記述
  2. HTML内に定義
  3. リンクとして読み込む

1.HTML内に記述

<html>
<head>
<title>Style Sheet Sample</title>
<style TYPE="text/css">
<!--
h1 { color: red; }
-->
</style>
</head>
<body>
<h1>あいうえお</h1>
<h1>かきくけこ</h1>
</body>
</html>

2.リンクとして読み込む

スタイルシートの定義部を他のファイルから読み込む事ができます。こうすることにより、複数の文書でスタイルシートを共有することができます。

style.css

h1 {
color: red;
}
.kakomi{
padding-top : 5px;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 5px;
border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;
border-color : black black black black;
}

sample.html

<html>
<head>
<title>Style Sheet Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

タグと要素とセレクタ

  1. タグ
  2. クラス
  3. ID
  4. 定義済みクラス

1.タグ

HTMLに定義されているタグにスタイルを設定することができる。

例）h1、p

2.クラス

クラスを定義することで複数の場所に同じスタイルを指定することができます。

.red { color: red; }

<h1 class=red>これはredクラスです。</h1>
<p class=red>これもredクラスです。</p>

3.ID

クラスの代わりに ID を指定することもできます。クラスはスタイルの集合につける名前で、複数のタグに同じクラス名を指定することが可能ですが、ID はそれぞれの要素につける名前で、ひとつのドキュメント中に、複数の要素が同じ ID を持つことは許されません。

#elm123 { color:red; }
h1#elm124 { color:green; }

<span id=elm123>あいうえお</span>
<h1 id=elm124>かきくけこ</h1>

4.定義済みクラス

A要素にはいくつかの定義済みクラスを指定することができます。定義済みクラスはピリオド（ . ）ではなくコロン（ : ）で指定します。link, visited, active はそれぞれ、通常のリンク、読み込み済みのリンク、クリックされた瞬間のリンクの状態を示します。

a:link { color: green; }
a:visited { color: blue; }
a:active { color: red; }