Last Update : 03/13/2003
HTML基礎講座 :: ページの設定とページの改造
ページ全体の設定
背景に変化をつけるぞ
<body bgcolor="色指定" background="画像URL">
- 背景色を指定
- BODY要素にbgcolor属性をつけると、背景色を指定できる。“色指定”の所には、white や black なんかの色の名前や、#ffffff や #000000 のような16進数表記をいれよう。
- 背景画像を指定
- BODY要素にbackground属性をつけると、背景画像を指定できる。
背景色と背景画像の両方を指定したときは、背景画像が優先されるぞ。でも、背景画像を表示しない（できない）ヒトのためにも、背景色と背景画像は両方設定しておこう。
ページ全体の文字の色とサイズを決める
<body text="文字の色" link="リンクの色" alink="クリック中のリンクの色" vlink="訪問済みリンクの色">
<basefont size="数値">
- 文字色を設定
- BODY要素に text属性、link属性、alink属性、vlink属性をいれる。bgcolor属性とおなじく、中の値には色の名前か16進数表記を入れる。
- 文字サイズを設定
- BODY要素のすぐ下に、<basefont> ってタグを入れる。“数値”の所には、1から7の数字を入れようぜ。
ちょい難しい話：HTML4とCSS
上で紹介した <basefont> ってタグや <body> のそれぞれの属性は、実は、HTML4ではすべて「非推奨」とされてる。これは、『文書構造とスタイルは別にしよう』っていうことで、HTML基礎講座：第2回で説明した、ヒトの体を思い出せば、たぶん分かりやすい。
「<body> </body>」の中に書かれるものは、“内臓”だって言ったよな。内蔵だから、ちゃんと健康に働いててくれれば、見た目なんか関係ないじゃん。で、見た目（スタイル）をカッコよくしたいなら、服を着替えたり、エステ行ったりして肌を磨けよ、と。
HTMLで、その見た目（スタイル）を変えるのは、スタイルシート（CSS）って技術を使う。詳しい使い方は別な記事で紹介するけど、とりあえず上のをスタイルシートで設定する場合、「<head> </head>」の間に、下みたいな指定を入れるぞ。
<style type="text/css">
body { font-size : 10pt ; color : #000000 ; }
a:link { color : #336699 ; }
a:active { color : #994444 ; }
a:visited { color : #996633 ; }
</style>
ページの改造
見出しをつける
<h1> 見出し </h1>
新聞なんかの見出しと同じく、ページにいろいろ見出しをつけたいこともある。そんなときに使うのが「<h数字> </h数字>」ってヤツだ。
これは「<h1>」から「<h6>」まであって、基本的に、数字が大きくなるほど文字は小さくなる。
文字のサイズが変わるだけじゃなくて、普通のブラウザなら、左のサンプルみたいに、太字になって、前後が改行されるぞ。
ただ、「<h数字>」ってのは、あくまで“見出し”に使うものだから、文字の大きさを変えたりするため“だけ”に使っちゃダメだぜ。
改行と段落
<p> 段落段落段落段落の文章文章文章文章<br>
改行されて、次の行の文章が始まる。 </p>
長文なんかを段落ごとに分けて書く場合、その段落ごとに「<p> </p>」を使う。
いちおう、Internet Explorer や Netcape なんかのブラウザでは、段落の前後が改行されて、一行分くらい空白が空くように表示してくれる。
段落の中（外でもオッケーだけど）なんかで、一行改行するには、「<br>」を使うぞ。
右寄せ・左寄せ・中央寄せ
<div align="left"> 左寄せ </div>
<div align="center"> 中央寄せ </div>
<div align="right"> 右寄せ </div>
文章なんかをページの右側や中央に寄せるには、align属性を使う。
この属性は色々な要素に入れられるけど、上のサンプルみたいに「<div>」や「<p>」なんかに入れるのがよくあるかな。ちなみに、これも、HTML4では「非推奨」で、スタイルシートを使えって言われてるぞ。で、CSSを使う場合は下みたいにするぜ。
<div style="text-align : left"> 左寄せ </div>
<div style="text-align : center"> 中央寄せ </div>
<div style="text-align : right"> 右寄せ </div>