文字装飾やレイアウトをCSSで書くメリット

How-to

前回はとりあえず、メモ帳でも作れる「超初心者向けホームページの基本講座」でしたが
文字を大きくしたり、文字を太くしたり、文字に色を付ける方法をお伝えします。

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>

何だか、どこに本文が書いてあるのかも分かりづらいと思いませんか?
これが、1ページに数回出てくるとなると、書くのも大変ですし、ファイルサイズも大きくなってしまいます。
ページの「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ファイルについてお話します。

タイトルとURLをコピーしました