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

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

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ファイルについてお話します。

スポンサーリンク
HTML・CSS
yui

趣味が高じてフリーランスWEBデザイナーになり早10年。2児の母
ホームページ作りの楽しさと、作ったHPから申込・問合せがどんどん入ってくる楽しさを共感できる人を増やしたくてコツなどを発信しています。

フォローする
速度&安定性が人気のレンタルサーバー
国内最速!『ConoHa WING』
ConoHa WING

初期費用無料最低利用期間無し(日割りOK)、独自SSL無料。

高速・高機能・高安定性はもちろん、分かりやすい管理画面なので初心者でも使いやすい。

「WordPressかんたん移行」機能で他サーバーからの引越しも楽々!特にwordpressの表示が重くて困っている方にオススメのレンタルサーバーです。

高速&初心者でも安心『エックスサーバー』

初心者でも安心の電話サポート付きの高速サーバー。独自SSLも無料。

安定性とセキュリティ対応の早さは特筆!国内高速バックボーンと、独自の高速化機能でwordpressもサクサク動きます。

WordPress簡単インストールや、他サーバーから簡単に引越せる「WordPress簡単移行」、自動バックアップなど全部揃っています。

カゴヤのレンタルサーバー

堅実・安心、サポート力で人気があるサーバーです。高速環境のほか、自社所有のデータセンターで管理・運営されているほか、wordpress専用サーバーなどニーズに併せたプランが豊富なところも魅力。

ホームページの作り方
タイトルとURLをコピーしました