前回はとりあえず、メモ帳でも作れる「超初心者向けホームページの基本講座」でしたが
文字を大きくしたり、文字を太くしたり、文字に色を付ける方法をお伝えします。
HTMLで文字に色をつける場合、font(フォント)タグで、色を変えたい文字列を挟みます。
例えば、赤色の文字にしたい場合は下記のように書きます。<font color="#ff0000">#ff0000は赤色です</font>
最近は装飾部分はCSS（スタイルシート）に書き出してしまうのがスマートなやり方。
「CSSは苦手。fontタグで間に合ってます！」という方はちょっと損してるかもしれませんよ？！
CSSを使うメリットをご紹介します。
CSSを使うメリット
1回書けば十分！繰返しを省略する。
長い指示でも、cssなら一度書けば、2回目以降は「短い言葉で呼び出す」事ができるので、HTML内で何度も繰り返し同じことを書かずに済むようになります。
例えば「太字で、赤文字で、フォントサイズは大きめで、中央寄せ」をfontタグを使って書くと下記のようになります。<p align="center"><font color="#ff0000" size="+2"><b>#ff0000は赤色です</b></font></p>
何だか、どこに本文が書いてあるのかも分かりづらいと思いませんか？
これが、１ページに数回出てくるとなると、書くのも大変ですし、ファイルサイズも大きくなってしまいます。
ページの「head」内にCSSを書くときは下記のようにします。<head>
<title>CSSのテストページ</title>
<style type="text/css">
<!--
.red {
font-weight:bold; /*太字*/
color:#ff0000; /*赤色*/
font-size:1.5em; /*文字サイズ1．5倍*/
text-align:center; /*中央寄せ*/
}
-->
</style>
</head>
と一度書いておけば、ページ内に10回同じ「太字で、赤文字で、フォントサイズは大きめで、中央寄せ」が出てきたとしても、その都度<p class="red">書式を変えたい文字列</p>
上記のように「class=”xxx”」と短い指示を追加するだけでOK。
さらに、外部に独立したCSSファイルを作って「呼び出す」事で、もっとHTMLをスッキリさせ、管理を楽にして、検索エンジンにも好まれるホームページにする事ができます。
次回は、外部CSSファイルについてお話します。
