今回のポイント
<style>タグの書き方
コメントは/* ～ */形式で記述する
|
前回，CSSの書き方には3種類あると書きました。今回から書き方を順番に説明していくことにしましょう。まずベースになるHTMLを作ります。今回はHTML中の<p>に対して，フォントの色を赤くするという単純な装飾でCSSの書き方を学習します。
<p>があるHTMLを作ります。説明画面が寂しくないように，若干のボリュームがあるテキストを本記事からコピーして作ってみました（リスト1）。
リスト1●ベースになるHTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>ページタイトル</title>
</head>
<body>
<p>
説明が少し遅れてしまいましたが，学習環境について書いておくことにします。
本稿でHTML/CSSを学習する場合，必要になるのはテキスト・エディタとブラウザ
だけです。対象読者層をエンジニアの皆さんに絞り込んでいるので細かい説明は
省略しますが，「UTF-8を使いましょう」という前提なので，エディタはUTF-8の
読み書きができるものを使っていただく必要があります。Windows XP/Vistaに標
準で搭載されているエディタ「メモ帳」でもUTF-8での保存が可能です（図1）。
もちろんエンジニアである皆さんですから，手になじんだエディタがあれば，
それを使っていただくのが一番です。
</p>
</body>
</html>
|
何の装飾も無い状態でブラウザで見てみると図1のようになります。
 |
| 図1●ベースになるHTML。テキスト内容は何でもOK |
このHTMLの<body>には<p>しかありません。この<p>に対してCSSを付けます（リスト2）。<style>タグを利用する方法です。
リスト2●<p>にCSSで装飾を付ける
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>ページタイトル</title>
<!--ここからCSS-->
<style type="text/css">
p{ color:#ff0000; }
</style>
<!--ここまでCSS-->
</head>
<body>
<p>
説明が少し遅れてしまいましたが，
…中略…
それを使っていただくのが一番です。
</p>
</body>
</html>
|
結果は<p>で括られているすべてのテキストが赤くなります（図2）。
 |
| 図2●フォントが赤く装飾された |
CSSの宣言部は<!--ここからCSS-->から<!--ここまでCSS-->の間です。まずHTMLに対してCSSを適用するには<style>タグを書きます。<style>でCSSを利用するには次の三つの条件を満たさなくてはなりません。
- <style>は<head>から</head>の間に書く
- <style type="text/css">で始める
- </style>で閉じる
|
type="text/css"というプロパティの設定を忘れてはいけません。実はCSSのほかにもJSS（JavaScript Style Sheet）というものが存在します。JSSの場合はtype="text/javascript"と書きます。JSSは動的に装飾を変化させることができたりして面白い技術です。CSSの基本を学習し終わった頃に解説を試みる予定でいますので，今は<style ときたらtype="text/css">と書くものだと覚えてください。
