モブ君とチンチラの！
文の飾り！ＦＯＮＴタグ！

●モブ君です！
◆チンチラです！
●今日はまず、昨日届いた御手紙からご紹介しましょー
◆こんな講座でも届くんですね
●届かなかったらやめようとか考えていたので幸いでした
まずはペンネームってペンネーム書くところがないんじゃー！！
あだ名を勝手に付けて、色君とでもしましょう
◆失礼な
●色の解説以外は理解できた、
色は頭にイメージがナイ、
自分の場合、イメージがないから制作ツールを使います。
みたいなことが書かれていました。
◆ご意見ありがとうー。
●そうですねー色は結構最初は難しいです、慣れるまで。
◆僕もまだよく分かりません。
●何せ１６進数で現しているところが、ややっこしいところですね。
イメージが沸かないのも無理ありません。
とりあえず、最初の２桁が赤、次の２桁が緑、次の２桁が青、って覚えておくと
後々役に立つかも知れません、
ただ色を作るのは、なれている人でも自分の好みを作ることは難しいんですね。
◆よっぽど慣れてないと無理そうだよね。
●そんな時のために、「色制作」をして、１６進数に変換してくれる
ソフトウェアがあります。
◆それは便利ですね！
●有名なところだと、ＲＧＢエステ、というソフトが使いやすく、
直感で操作しやすいです。
http://www.vector.co.jp/soft/win95/net/se049973.html
ソフトウェア紹介の場ではないので、詳しくは解説しませんが。
◆わー先生、なんだかダウンロードとか、ＦＴＰとか、
この画面よく分からないよぅー。
●それでは次に行きましょうー！！
◆パニックになっている僕はどうなるんだぁー！！

※ソフトウェアの各紹介はまた個別に詳しくやるよ。


１　ブラウザってなあに？
●ふおおおおおお！！！
◆先生！いきなりなにを叫んでいるんですか！
●人はいつでも叫びたいときがあるのだ、例えば昨日！腐ったあんまんを食べたとき！
ふおおおおお！！きたぁあああああ！！
◆きゃーーーー！！ここでほにゃららしないでぇええええ！！！
●今日は、フォント（文章の文）の飾りを覚えます。
◆でも先生、フォントを飾るタグは将来廃止されるんじゃないですか？
●そうです、将来出現するっていうかもう出現しかけている怪人Ｘになると、
スタイルシートで飾ることが主流となり、フォントタグなどは廃止されることになっています。
◆なら覚えても仕方ないんじゃないですか？
●まぁまぁ、今現在激動の中で、
数多くのブラウザは、完璧にスタイルシートを表現できるとは限らないんですね。
◆はーい、ブラウザってなんですか？
●君が今使っているじゃないか。
このＨＰを表示するソフトだよ、ＩＥとかＮＮとかが有名だね、
大抵はこの２つのうちどちらかをみんな使っているよ。
ＮＮを使用している人はだんだん少なくなっているけど、根強い人気があるよ。
だからＨＰを作るときは、必ずこの２つを基準に、作るんだ。
◆そういえば、タグによってはブラウザで表示されないのがあるとか・・・。
●２大ブラウザ、ＩＥとＮＮでも表現によってはかなりきつい差があるよ、
特にスタイルシートを使うと、かなりのばらつきがあります。
◆だからフォントタグを使うんですね。
●そうです、将来的にスタイルシートが落ち着いたら、順々にスタイルシートにうつっていき、
今まだ大抵のブラウザでフォローしているフォントタグを使うことが、お勧めかな。
ただし、将来、ＨＴＭＬが「意味合い」の言語になることを含めて、
ここではきちんとそのタグの意味から説明していきます。
◆意味合いの言語？
●話がどんどん横道にそれていますが、Ｘになると、スタイルシートで飾り付けをし、
タグは「持つ意味」を現すようになるんだ。
例えばタイトルだったらタイトル、強調用語だったら強調、とかね。
◆よく分からないんだけど、それでどうなるの？
●純粋に、タグが持つ意味を現すようになったら、
音声で読み上げるブラウザにも対応できるし、
テキストブラウザと呼ばれる、テキスト表現のブラウザでも意味が分かるように表示されるんだね。
◆全てのブラウザに対応するＨＰが作れるって事？
●まぁ、２大ブラウザであんなに表示状態が違うし、（参考：ららのＨＰ）
理想はまだまだ遠そうだけどね。
でも僕らが作るのは、企業のＨＰじゃない。
◆え？いきなり何を言っているの？
●趣味のＨＰを作ろうとしているんだ、
つまり、自分が楽しくなくちゃ、それは趣味とは言えないということだ。
ＮＮとＩＥ２つを完璧に同じ外見にしようとすると、
ちょっと小難しいことをしたり、使えないタグがあったりするんだ。
◆と、するとどうすればいいの？
●楽しく作る。これが一番だね、
ららの様に、もうはなからＩＥ以外は無視しちゃったりするのも１つの手だし、
細々した作業が好きで完璧主義なら、それこそJavaScriptを完璧に覚えたりして
自分のＨＰを自分の好きなように作るんだ。
ブラウザのことを考えていたら、それこそきりがないよ。
それよりも「きっとこのブラウザも進化してくれるだろう」とか思って
次に進んじゃった方がいい。
◆・・なんかすごい主義主張ですね。
●まいったね。
長く横道にそれたけど、話を戻すよ。



◆わーああああああいっぱいあるよぅううううううう！！！！
●お、落ち着いて！実際に使うのは１つ２つぐらいだから！
◆なんでこんなにいっぱいあるんだよぅううううううう！
●ふああああー私をがくがくするなぁあああ！！！
ぜいぜい。
ゆっくりやろうね、
上のタグを全部表現してみると、こうなるよ。
1 A
2 A
3 A
4 A
5 A
6 A
7 A
8 A


9 A

10 A
11 A
12 A
13 A
14 A
15 A
16 A
17 A
◆あれ・・・・？なんだか同じ表示になるのがあるよ？
●そう、１行空いているのに気づいたかな？
◆あ、うん、空いているね。
●その１行から下が、「意味合い」のタグ、
上が飾りのタグ、みたいな感じにとらえてくれるといいよ。

◆意味合いと、飾り。
●そう、じゃあ１つずつやっていこうね。


＜ｆｏｎｔ　飾り＞＜／ｆｏｎｔ＞
◆そういえば前から聞きたかったんだけど、
先生はタグを大文字と小文字、ごちゃ混ぜにして書くね。
●う、こ、これはね、悪い癖なんだけど。
タグは本当は小文字で書くものなんだ。
最初は大文字だったらしいけど、次世代のＸがでると、全て小文字じゃないと
エラーになるんだ。
◆うあ、厳しいねぇ。
●うん、ＨＴＭＬの場合は大文字でも小文字でも半角英字なら全然ダイジョブなんだけどね。
今から小文字で書く癖をつけておくといいかもね。
◆うん！僕そうするよ！
●じゃあね、ｆｏｎｔというタグを見ていこうか。
◆あれ、他はないのにこれだけ、先生の言う飾りとかがあるね。
●そう、ｆｏｎｔタグはそれ単体では動作しないんだ。
＜ｆｏｎｔ　飾り＞の飾りの部分が重要なんだよ。
◆ｃｏｌｏｒが文の、色？
前回言っていた色の方式をここで使うことができるんだね。
●そうだよ、そしてｓｉｚｅが文の大きさ。
このｆｏｎｔタグで囲った部分の文に、その飾りが適用されるんだよ。
こんな感じで
ｓｉｚｅは１から７まで指定できるよ。
７が最大。
ＩＥではｓｉｚｅ５以上で太文字になるみたいだね。
◆ｓｉｚｅとｃｏｌｏｒは分かったけど、
ｆａｃｅって何？顔？
●これはね、文の書体を指定するんだ。
◆にゃー書体？
●フォントにはね、フォントの「形」を決める書体と言う物があるんだ。
ＭＳ ゴシック、ＭＳ　明朝、ダサ字とかが有名だね。
あああ
あああ
あああ

Ｆａｃｅ＝”書体１，書体２，書体３”
って指定していくと、ブラウザやコンピューターがぶいいいいーんと、
その書体を探してくれて、書体１を見つけたらその書体で文を表示してくれるんだ。
その書体が見つからない場合、次の書体を探す。
全部見つからなかったら、通常の書体で表示するんだけどね。
◆わー、文章の形が変わったねぇ、印象も随分変わるんだね。
●そうだね、ただ気をつけないといけないんだけど、
書体によっては読みにくい書体もあるし、
妙な書体を指定すると、文字化けの原因にもなるんだ。
◆へぇ・・・そうなんだぁ・・・。


＜ｂ＞、＜ｉ＞、＜ｓ＞、＜ｔｔ＞、＜ｕ＞、＜ｂｉｇ＞、＜ｓｍａｌｌ＞
◆あれ？いっぱいまとめて？
●うんとね、実はｆｏｎｔの下のタグは説明することがないんだ。
こういう表示状態になるよ、ぐらいに思ってくれるといいな。
◆あ、今先生＜Ｂ＞を使ったね。
●＜Ｕ＞とか＜Ｂ＞は結構使うよ。
これも将来廃止されるタグなんだけどね。
◆＜ｔｔ＞って言うのは、どこも変わらないように見えるんだけど。
●これは「等幅」のタグなんだ。
◆等幅？
●フォントっていうのは、「、」とか「。」とかをわざとつめたりするんだ。
＜ｔｔ＞で囲むと、その文は「、」とか「。」等、記号も
きちんとつめないで、等倍で表示してくれるんだ。
◆へー・・・でもそれってなんの役に立つの？
●今は関係ないけどね、記号や文字で絵を描くときとか、便利だよ。
◆え？記号や文字で？
●アスキーアートって言われているんだけどね、

 ▲ ▲
( . . )
( 3   )/  猫！

とかね
◆うわ、それ猫？
●うーん・・作ったことがないんだってばぁ・・・


＜ｈ１＞＜／ｈ１＞
●これは意味合いのタグの中でも結構使うタグです、
「見出しタグ」と言います。
◆あ、分かっちゃった、見出しの意味を持っているんだね。
でも、ｈの隣にある数字は何？
もしかして・・・ドキドキ。
●期待しているとおりか分からないけど、これは、見出しの「レベル」だよ。
◆見出しのレベル？
●そう、１が最上位レベル。
６まで下がっていって、６が最下位レベル。
だんだん文字が小さくなっていくよ。

＜ｈ３＞


＜ｈ４＞


＜ｈ５＞


＜ｈ６＞

ほらね。見出しの前後には改行が自動的に入るよ。
◆え！？ｆｏｎｔだとサイズは大きくなると大きくなるのに、
見出しはサイズが大きくなると小さくなるの？！
●混乱してるっぽいな。
サイズじゃないんだって。レベルなの。
１が、「一番立派な見出しですよ」って意味で、
６が「これは最下位の見出しですよ」って意味なの。
◆あーん、よく分からないよぅ。
●意味合いのタグと、飾りのタグの違いだね。
覚えなくてもいいよ、自然にやっているうちに分かってくるから。
◆ふいーん


＜ＥＭ＞，＜ＳＴＲＯＮＧ＞，＜ＣＩＴＥ＞，＜ＣＯＤＥ＞，
＜ＤＦＮ＞，＜ＫＢＤ＞，＜ＳＡＭＰ＞，＜ＶＡＲ＞
●これらの意味合いのタグはやっぱり説明することがないんだよね、
ざっと「こういう意味合いで使う」っていうことを言って行くから
ざっと流してね
◆はふい
●下の２つは強調用語に使うよ、音声ブラウザだと強く読み上げられる。
＜ＥＭ＞　強調
＜ＳＴＲＯＮＧ＞　より強調
●下は全部意味合いのタグだよ
＜ＣＩＴＥ＞　引用文や本のタイトルなどを囲む
＜ＣＯＤＥ＞　引用されたコンピュータープログラムのサンプルなどを囲む
＜ＤＦＮ＞　定義された文字として囲む
＜ＫＢＤ＞　キィボードに入力してもらう文字として囲む
＜ＳＡＭＰ＞　コンピューターの状態を示すメッセージとして囲む
＜ＶＡＲ＞　任意に値を入れ替えてもらう文として囲む
ふあー疲れた、こんな感じだよ。
◆へぇー今は使う事ってあるのかなぁ・・・って思うなぁ・・・。
●将来Ｘに支配されたらいっぱい使うかもね？


●どうだい？少しは分かったかな？
◆うーんまだ、不鮮明・・・。
●だけどこれで、昨日教えたタグを組み合わせると、
ＨＰの中に文章を表示することができるんだよ。
◆えっと、そうなの？
ｆｏｎｔタグとかはどこで使えばいいのかな・・・。
●ボディに挟む具って言ったでしょう？あれ言わなかったっけ？
これから教えることはメター以外は全部ボディに挟む具のタグなんだ。
つまり、＜ＢＯＤＹ＞タグの中に挟めばいいダネ。
◆えっと、こう？

あれ？先生おかしいよ、改行がされないよ！
●そう、ＨＴＭＬは改行を指定しないといけないんだ。
じゃ、明日は改行について、勉強していこう！
じゃーねー！
◆はーつかれたーう。


次のステージへ
前のステージへ
最初に戻る
現在のチンチラのＨＰ▽
感想・要望・意見▽
(C)奇花