第8話 『背景色と見出しを付ける』の巻
背景に色をつける 見出しをつけてみよう

背景に色を付ける
A子さんのホームページを作り出してからもう第8話。だいぶ進んだような、進んでいないような・・・。 でもそろそろ『html』にも慣れてきたはず、だからここからちょっとピッチを上げましょう!

背景に色をつけるタグは上記の通りです。『html』の骨組みのなかで、勉強した <body>〜</body>のタグの<body>の方に半角のスペースをあけて、bgcolor=#rgbカラーを入れると OKです。
色は文字の時と同様で『rgbカラーパレット』を参考にしてくださいね。 では、A子さんのホームページにbgcolor=#の指定をしてみましょう。文字の色がピンクだったので、薄紫色にでも してみます。(色については個人の趣味でどうぞ!)
htmlの画面
ということで、背景にも色を付けましたが、ブラウザで表示した画面を見る前に、 次の『見出し』の勉強に入ります。見出しが出来たら、表示した画面を見ましょう。


見出しを付けてみよう

タイトルをつけるの
まずは、見出しのタグを見ていただきましょう。

<h数字>の数字はフォントのサイズを指定するもので1〜6までが利用出来ます。が、<h6>は、 小さすぎるかも。
何となく、フォントサイズを変更するタグと似たような機能なんですが、ちょっと違います。
    第5話で勉強した<font size=数字>のタグと違い
  • <font size=数字>のタグは数字が大きいほど字が大きくなるのに対して、 見出しのタグ<h数字>は数字が小さいほど字が大きくなる。
  • 見出しのタグを利用すると改行タグ<br>を使わなくても自動的に 改行される。
  • 表示されるフォントの書体が違う。


例1.実際にどのくらい違うか見てみましょう。
1.<h1>A子のホームページ</h1>にした場合

A子のホームページ

2.<font size=6>A;子のホームページ</font>
A子のホームページ

例2.見出しのサイズ例

<h1>見出しh1</h1>

<h2>見出しh2</h2>

<h3>見出しh3</h3>

<h4>見出しh4</h4>

<h5>見出しh5</h5>
<h6>見出しh6</h6>
htmlの画面
『ブラウザ』で表示
A子のホームページにリンク

 目次へ 

前のページへ

次のページへ