Web プログラマになる

:: be web programmer ::

３つの言語 その２　CSS

見た目やデザインは、スタイルシート（CSS）の役目です。
スタイルシートを使うと、文字の色や大きさを自由に変えることができます。

例えば、文字色とフォントサイズを指定する場合は、次のように書きます。

h2 {
  color: #000099;
  font-size: 120%;
}

この場合は、h2 要素の「スタイル」を指定しています。

color は文字色を表し、#000099 が実際の色（青）になります。
font-size はフォントサイズを表し、120% が実際のサイズ（割合）になります。

---

●スタイルの書式

スタイルの基本的な書式は、次のとおりです。

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

━━━━━━━━━━━━━━━━━━
セレクタ   … スタイル適用対象
プロパティ … 適用するスタイルの種類
値         … 適用する値

プロパティが１つの場合は、セミコロン（ ; ）を省略できます。

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

セレクタには、要素名、クラス名、ID などの適用対象を指定します。

(1) 要素名

要素名を指定すると、その要素にスタイルを適用します。

h2 { font-size: 120% }
p { font-size: 90% }

(2) 複数の要素名をカンマで区切る

複数の要素名をカンマで区切って指定すると、それらの要素に同じスタイルを適用します。

h2, p { font-size: 100% }

(3) 複数の要素名を半角スペースで区切る

複数の要素名を半角スペースで区切って指定すると、その階層に当てはまる要素にスタイルを適用します。 スタイルは一番右側の要素に適用されますが、その要素が左側の要素に含まれる場合に限ります。

p code { font-family: monospace }

この場合は、p 要素に含まれる code 要素にスタイルが適用されます。

(4) クラス名

クラス名を指定すると、そのクラスを指定した要素にスタイルを適用します。
クラス名の前には、ドット（ . ）を付けます。

ドットの前に要素名を付けると、その要素の中で対象のクラスが指定されている要素のみにスタイルを適用します。

.comment { color: #006600 }
span.keyword { color: #000099 }

HTML ファイルでは、class 属性に対象のクラス名を指定します。
（class 属性は全ての要素に対応しています）

<pre>
<span class="keyword">char</span> str[] = "スタイルシート";
<span class="keyword">int</span> len;

<em class="comment">/* 文字列の長さを求める */</em>
len = strlen(str);
</pre>

(5) ID

ID を指定すると、その ID を指定した要素にスタイルを適用します。
ID の前には、シャープ（ # ）を付けます。

シャープの前に要素名を付けると、その要素の中で対象の ID が指定されている要素のみにスタイルを適用します。

#header {
  border-top: 4px solid #6666ff;
  border-bottom: 1px solid #6666ff;
}

div#fooder {
  border-top: 1px solid #6666ff;
  border-bottom: 8px solid #6666ff;
}

HTML ファイルでは、id 属性に対象の ID を指定します。
（id 属性は全ての要素に対応しています）

<p id="header">ページのヘッダ</p>
<p>ページの内容</p>
<div id="fooder">ページのフッダ</div>

---

●コメントの書き方

スタイルシートのコメントは、C言語と同じく「 /* 」と「 */ 」の間に書きます。

h2 {
  color: #000099;   /* 大見出しの色 */
  font-size: 120%;  /* 大見出しのフォントサイズ */
}

Next ３つの言語 その３　JavaScript

---