CSSによるテキストの装飾
スタイルの適用
HTML タグにCSS が適用されると、フォントの大きさや色を指定通りに変更することが出来る。
HTML タグに CSS でスタイルを設定していく。
まず、h1、h2、h3 の見出しタグに、フォントサイズとフォントの色を設定する。
次に、p タグにもフォントサイズを設定する。
また、指定しなかったプロパティは、その HTML タグが持っている標準のスタイルが適用される。
つまり、変更したいプロパティだけを記述すれば良い。
h1 { font-size: 24pt; color: red; }
h2 { font-size: 20pt; color: blue; }
h3 { font-size: 16pt; color: green; }
p { font-size: 12pt; }HTMLヘッダに、CSSファイルを読み込む
HTML ヘッダに、link タグで CSSファイル(ファイル名を001.cssとした)を読み込む記述をする。
また、h1 から h3 タグで見出しを、p タグで文章を記述する。
この HTML ソースには、テキストの装飾に関する記述が一切ない。
これは、CSS によって HTML タグに直接スタイルを設定しているからである。
このように、CSS を使うと HTML による文章の構造化と、見栄えに関する設定とを別々に整理することが出来、とても効率的に Web ページ制作を進めることが出来る。
<link href="001.css" rel="stylesheet" type="text/css">
<h1>大きな見出し</h1>
<h2>中間の見出し</h2>
<h3>小さな見出し</h3>
<p>ここは文章が入ります。</p>部分的なテキストの装飾
文章に対して、部分的にスタイルを適用してみる(CSSファイル名は002.cssとした)。
その場合には、セレクタに「クラス」という設定を追加する。
クラスは、スタイルを適用したい HTML タグに続いて、ドット「.」を 1 個記述し、その後自由にクラス名を付ける。
自由と言っても、使える文字は半角の英数字とハイフンなど一部の記号だけである。
ここでは「fire」というクラス名で赤い文字を、「water」というクラス名
で青い文字を定義している。
そして、それぞれのスタイルが目立つようにフォントサイズを 16pt と、少し大きめに設定している。
p タグのフォントサイズは、fire と waterのスタイルよりも小さく 12pt に設定する。
.fire { font-size: 16pt; color: red; }
.water { font-size: 16pt; color: blue; }
p { font-size: 12pt; }HTMLタグでテキストを記述
HTML では、作成したスタイルを部分的に適用するために「span タグ」を記述する。
span タグの「class 属性」で、作成したスタイルを指定する。
なお、span タグはインライン要素のため、ブロックレベル要素である p タグの内側に記述する必要がある。
<link href="002.css" rel="stylesheet" type="text/css">
<p>文章に<span class="fire">赤い色</span>と<span class="water">青
い色</span>が入ります。</p>