ウェブ木箱：HTML講座-表示される文字を打ってみよう

☆文字の大きさや色を指定しよう - クイックガイド

		腹減り日誌♪ - donguri browser
	眼に飛びこんできたのは『冷やし中華始めました』の文字。やはりこれを観ると夏を感じてしまうものだけど・・・でもちょっと待て・・・今は冬だ。・・・夏の初めに潰れたんかぁ！！張り紙はちゃんと外しましょう(￣▽￣； (この日誌はフィクションです(笑))


		１．	文字の大きさを指定しよう <font>，size


		２．	文字の色を指定しよう color


		３．	太字や斜体に指定しよう <b>，<i>


		４．	タグの包含関係


		５．	コラム：スタイルシートについて

←前回『背景や文字の色を指定してみよう』へ

次回『ソースを書く時のポイント』へ→

では部分的に文字の大きさを指定する方法を紹介。

文字の見栄えを指定するタグはだよ

の場合、このタグだけで文字を囲っても何の変化もない。必ず属性と組み合わせて使うよ。ここではまずそのうちの１つ・・・。

文字の大きさを指定する属性名はsizeだよ。

属性値は1～7の半角数字で指定する。普通の大きさは通常3。それより小さい数を指定すれば文字が小さくなるし、大きい数を指定すれば大きくなる。この他にも-2～+4での指定も出来るよ。規定値は通常0。一応こちらは現在の大きさに対しての相対値を指定するらしいんだけど、実際ブラウザで確認する限り前者と後者の違いってない気がするんだけど・・・。


<html> <head> <title>腹減り日誌♪</title> </head> <body> <font size="4"> カレー、始めました。</font> </body> </html>

腹減り日誌♪ -

カレー、始めました。


			観ている人のブラウザの設定によって大きさは前後するのであまり極端に大きくしたり小さくしないことをお勧め。

＊ブラウザでの表示はこちら(別ウィンドウ)

前回<body>のtext属性でページ全体の文字色を指定する方法は紹介したね。今度はを使って部分的に色を変更してみよう。これにはに色を指定する属性を付けるよ。

文字の色を指定する属性名はcolorだよ。

属性値はtextの時と同じく色の指定なのでRGB値または１４０色の色名を使うよ。


<html> <head> <title>腹減り日誌♪</title> </head> <body> <font color="#ff0000">カレー</font>、始めました。 </body> </html>

また複数の属性を同時につけることもできるよ。


<html> <head> <title>腹減り日誌♪</title> </head> <body> <font color="#ff0000" size="4">カレー</font>、始めました。 </body> </html>

今度は太字や斜体に指定する方法。これにはそれぞれタグが用意されている。

『ここからが太字』という意味のタグは、
『ここからが斜体』という意味のタグはだよ。

この２つのタグは単純に開始タグと終了タグで文字を囲ってやればそれぞれ太字や斜体に指定できるよ。


<html> <head> <title>腹減り日誌♪</title> </head> <body> どこかにないかな？<br> メニューに<b>レバニラ</b> と <i>ニラレバ</i> があるお店 </body> </html>

講座の第５回で<html>と<head>と<body>の関係を箱に例えて説明したね。これはこの３つのタグに限らず、すべてのタグの包含関係は箱に例えることができる。では、まずおさらいとしてその３つのタグの包含関係を見てみよう。

この通り箱の中に箱が入っているような形だね。今までに紹介したなども同様に、 <body>～</body>の箱の中に入っていてさらに～の箱の中に文字が入っている状態と考えていいよ。

タグ同士の包含関係はこのように必ず入れ子の状態でなければいけない。例えば次のような表示にしたい時、どんな風にタグを書くかな？

単純に次のように書いてしまうかもしれないけど、これだと間違い。一応一部のブラウザを除いてはちゃんと表示されるけどね。

どうしてこれが間違いかってことを説明するね。図にしてみると解りやすいかもしれないけど、 との入れ子関係が崩れている。 の中で開始したは の中で閉じなきゃいけないのに、この例の場合はタグの有効範囲が交わった状態にあるでしょ？

正しい書き方はいくつかあるけど、一例として次のように書けば入れ子関係が成り立つよ。

<b>ウェブ木箱飯店自慢の</b><font size="4"
 color="#ff0000"><b>レバニラ</b>炒め</font>


		<font>の前で一度<b>を閉じて<font>の中で改めて開く例。


		<b>を２つに分ける事で入れ子を成り立たせているね。

ウェブ木箱飯店自慢の


		<b> レバニラ </b>

炒め

スタイルシートって言葉を耳にしたことがある人もいるだろうけど、スタイルシートとはHPの見栄え(見た目に関すること、色や大きさなど) を指定するための言語。つまりは、今まで紹介したような背景色や文字色の指定を HTMLに代わってスタイルシートで指定させようと言うもの。実際HTMLよりも細かい指定が出来るようになっている。

っとまぁ、ここまでなら便利になっていいねぇって話なんだけど、見栄えの指定はスタイルシートに任せて HTMLからは見栄えの指定を無くしてしまおうという動きがある。つまりはこれまで紹介した<body>のbgcolorだとかtextの属性や今回紹介したなどのタグは廃止される予定にあるってことなんだ。『せっかく憶えたのにそりゃないよ』とか『なら最初から紹介するなよ』とかって声も聞こえてきそうだけど、今現在はちゃんと使えるから大丈夫。仕様から廃止されてもブラウザがサポートしてればそれはそれで使えるわけでもあるしね。それに主観ではあるけど、スタイルシートってのも HTMLと組み合わせて使うものだし、スタイルシートを覚えようって時にも HTMLでの見栄えの指定を知っていた方がだんぜん覚えやすいと思うんだ。いずれにせよ、憶えて損はないのでは？ってことでこの講座ではこういったタグや属性も紹介していくよと言うお話。

	次はHTMLを書く時のポイントを紹介だよ。次へ→
	前回はページ全体の背景色や文字色の指定と色の指定の仕方だったね。 ←前へ

	文字編－２
	HTML講座第８回

		文字の色を指定してみよう

		太字や斜体にしてみよう