モブ君とチンチラの！
講義前に習うこと！ＨＴＭＬの基本！

●もぶ君です！
◆チンチラです！
●このたびＨＴＭＬ講座付け焼き刃らら編が始まっちゃったんですが・・・
◆なぞの怪人Ｘとスタイルシートがやってくるって言うのに何やってんでしょうねぇ
えー今時ＨＴＭＬー？って言われるのが落ちですよね
●そうですね，将来的にはＸとスタイルシートにとって変わられるＨＴＭＬですが，
◆さっきからＸ，Ｘって，言っていますが，もっとちゃんとした名前があるんじゃ・・・
●名前ど忘れしたんじゃー！！
気にするなぁーい！！！
◆もーう，こんなんで本当に大丈夫なんですかぁー？
●大丈夫です！多分・・・
◆たぶんがつくんですかあー！！！


●ジギョウにはいる前に，
このジギョウを聞く心得をお教えします．
１／わかんなかったらとばす
わかんない単語がある場合は，気にせずに分かったふりをしてとばして下さい．
もうママまで騙されるぐらい演技して！
「必ず分かる日が来る」という信じる心を持っていれば，これは軽いもんです．
えーわかんないよぅ，えーっとどうなんのーどうなんのぉーもーやめたぁ
となるより，分からずに先に進んだ方がずっとましです．
分からない自分を愛してあげて下さい，信じてあげて下さい，
大丈夫です，ここでは分からなくても，やっているうちにヘレンケラーが「うおーたああー！！」と雄叫びをあげるぐらい
分かる日が必ず来ます．
言語ってそういうものですから．
◆ららはいつだってわかんないまま先に進んでますよね
●猪突猛進も考え物ですがね
●２／ここはこうした方がいい，こうしてくれ，というアドバイスがあったら教える
ららはなにせアマチュアの下段にいるカバです，ヒポポタマスです
ヒポちゃんと呼んであげて下さい
◆ヒーポチャーン
●ほーら喜んでる
◆先生，そんな話じゃないんじゃないですか・・・・
●とかにく！
ららが誤字脱字をしても，教え，こうした方がいいのになぁ・・・くすっってところがあったら
教え，教えまくってください，
ヒポちゃんは君たちにむしろ教わるつもりでごーごーです
◆チンチラもね！
●もぶ君もね！
●３／焦らない
焦ったって人生いいことありません
ららは焦りすぎていつだって脱線路さ！
焦るって事は軽自動車で電車に突っ込むようなものです
火の玉となりたいなら焦っても良し！
それもまた立派な人生でしょう
◆先生何言っているんですか．

●さぁ，３つの神器をきちんと装備したかな？
◆ではいってみまちょう！

※　ＨＴＭＬ　・・・・　ＨＰを作る言語
※　スタイルシート、Ｘ　・・・　ＨＴＭＬの次世代
※　ＨＰ　・・・・　ホームページの略語
続く・・・


１　メモ帳を用意しろ＆基本用語説明

りーんりーん
◆はい、もしもし
●チンチラか！？チンチラを誘拐した！メモ帳を用意しろ！
◆ええ！？僕誘拐されちゃったの！？
●ああ、ここにいてもがいている！！
◆ええ！僕に酷いことしないでよ！！
●安心しろ、いざとなったらその角で俺をつつくと言っているから！
◆あんた何を誘拐したのさ！！
●ってわけで・・・、チンチラ君が誘拐されたのでメモ帳を用意して下さい。
◆これ鹿じゃん、きゃー鹿臭い！
●「どこでもいつでもできる」ということを教えたいので、メモ帳以外の便利なツールは教えてあげない！
◆きゃーこの鹿がつついてくるよう。
●この講座が人気が出たら外伝でもつくって「推薦ツール」「ツールの使い方」など、できちゃうかも知れない。
◆いたいよう、いたいようー！！
●チンチラ君はチンチラと戦うのに必死です。

※　メモ帳で書いたものを「名を付けて保存」「ほにゃらら.html」と作ると、ＨＰの基ができるんだよ
ＨＰの基は、拡張子（ファイル名の「.」の次の文字のこと）がhtmlかhtmになっているんだよ。
逆に言えば、htmlかhtmにすれば、ＨＰとして読み込んでくれるんだ。
マックの人は、拡張子を忘れずにつけてね。
※　もう分からない人は分からない単語がでてきてそうだが、あまり気にせずに次に進もう

２　まずは基本タグ
●それでは、ＨＴＭＬの勉強を開始します。
まずは鹿のてなづけ方です。
見て下さい、この鹿。立派な角でしょう。
◆そんなことがホームページでできるんですか？
●大丈夫です、こんな凶暴な鹿も、これがあれば大丈夫！
さぁ食え！
◆それは鹿煎餅だー！！！
●いいえ、これは魔法の煎餅です。鹿がてなづきます。
◆てめぇやる気あんのか
●全くないデース！！（アメリカ人のように大げさなジェスチャー）
−少々お待ち下さい−
◆チンチラです！！
●殴られたら疣ができたモブ君です！
◆先生、それは瘤って言うんです、今度はちゃんとやりましょうね★
●それではＨＴＭＬの基を作りましょう。

◆先生、いっぱいタグがでてきましたねぇ
●ええ、でも焦ることはありません、少しづつ解説していきます。
あ、最初にことわっておきますが、解説はモブ君の自己流です。
本当の知識ではないので、「こういう考え方」ぐらいに思って下さい。
◆うさんくさぁー
●まず、＜ＨＴＭＬ＞です。（モブ君の言葉では全角になっていますが、
実際打つときは、タグは全部半角です。）
最後の方を見て下さい、＜／ＨＴＭＬ＞というのがあるでしょう、
このふたつはセットなのです。
◆＜ＨＥＡＤ＞も＜ＴＩＴＬＥ＞、＜ＢＯＤＹ＞も／がついたものがありますね、
セットなんですか？
●その通り、全部セットです。
タグには／で最後を締めくくり、その中に具を挟む
「サンドイッチセット」のものと、
単独で動く、「フライドチキン」のものがあるのです。
◆サンドイッチセットは分かりますが、なんでフライドチキンなんですか？
●モブ君が好きだからです。
◆僕は鳥肌が嫌いです。
●んなもん好きな人いるんかい。
モブ君の首を擦るな！！
タグが２種類あることを覚えなくてもいいから、
次に行きましょう。
あのですね、自然にこういうことは覚えるから今覚えなくていいんだよ。
◆難しそうだなぁ・・・。
●ぜーんぜん、ＨＴＭＬなんて超簡単だよ、安心して。
ルールが分かれば野球が面白くなるように、すぐに面白くなるよ。
ららはちなみに野球が全然わかんねぇ。
次にサンドイッチの個々の説明にうつります、
＜ＨＴＭＬ＞＜／ＨＴＭＬ＞ですが、
これは人間で言う皮膚みたいなものです。
一番外周を必ず覆うことが大切です。
これを忘れると、そのＨＰは皮膚を忘れて血だらけです。
◆イッタァー
●次に＜ＨＥＡＤ＞＜／ＨＥＡＤ＞です、これは人間で言う、頭のようなものです。
英語からもわかりやすいでしょう。
謎の怪人Ｘになると、この頭でスタイルシートを使い、指示をするようになりますが、
ＨＴＭＬではメターとタイトルをいれるぐらいに使います。
最初に宣言しちゃうんですね、「僕はどこどこに住むなになにと言う者です！」って。
◆メターっていうのがよく分かりません。
●メターは宣言するためのタグです。
著作権は誰々、作ったツールは何々、そいでこのＨＰを見るときはこういう奴で見てね。
とかいれるのです。
最初は難しくなるので、最後の方になったら教えます、
今は「宣言魔法」と覚えて置いて下さい。
◆宣言魔法・・・。
●頭の中にはタイトルを入れることもできます。
＜ＴＩＴＬＥ＞＜／ＴＩＴＬＥ＞がそうです。
このタグの中に、表示したいタイトルを挟むと、
スターテスバーに表示されたり、そのページを保存するときやお気に入りに入れたとき、
そのタイトルになります。
◆便利ですね。
●あまり長いタイトルはいけませんよ。あと、タイトルの中にはタグは使えません。
◆＜ＢＯＤＹ＞は体ですか？
●そうです、人間の体です。
ここの中の飾り付けが本骨頂です。
言うなれば頭と皮膚は前菜のような物。
全てはＢＯＤＹに挟む具にかかっています。
◆どんな風に入れるんですか？
●まぁ焦らないで。
それよりもまずは、ＢＯＤＹの飾り付けからいきましょう。
◆え？飾り付け？


３　飾り付けができるタグとできないタグがあるんだよ
●タグの中には、飾り付けができるタグとできないタグがあるんですね。
◆へー、色とか、大きさとか、のこと？
●そうです、飾り付けは、
＜タグ　飾り付け＞という風に書きます。
タグの後に半角スペースを入れて「こういう飾りを入れたい」って感じで付け足していくのね。
◆そんなわけわかんないうんちくはいいから、現物を見せて下さい。
●やーん。

◆これはボディの飾り付けをしているんですね。
●そうです、
ＢＧＣＯＬＯＲが、ボディの背景色、
ＴＥＸＴが、ボディの文字の色、
ＬＩＮＫが、リンクされている時の色
ＶＬＩＮＫが、リンクされていて、なおかつまだいってない時の色、
ＡＬＩＮＫが、リンクを選んだときの色。
◆わー混乱してくるよう
●落ち着いて！きゃー私を囓らないで！！
ゆっくりやっていけばいいから！
◆色は、色名で指定すれば良いんですか？
●ちょっとまた混乱するかも知れないから、落ち着いてね。
色は色名で指定することができますが、
色名だけだと自分の作りたい色が分からないときがあります。
◆うー（構えている）
●・・・・；（逃げる構え）
そんなときは自分で色を作ることができるんです、
”＃赤緑青”って数で指定すればいいの。
自分で色を作るよーって時は、「＃」を先につけて、
作成宣言をするんだよ。
◆なんだー数かぁー
●ほっとするのはまーだーはーやーいーぞー
実はＨＴＭＬは、色を１０進数で現していないんです。
◆１０進数？
●僕らがいつも使っている、０から９までの数。
１０個めで位が上がるから、１０進数っていうんだよ。
◆・・・う、なんかぅ
●お、おつつけぇ・・・
それでね、ＨＴＭＬは１６進数で色を現すの。
◆１６個めで位があがるの？
それじゃ、数が足りないんじゃない？
●そのために、１６進数では、０から９の次は、
ＡからＦを使うんだよ。
◆うあー鳥肌がぁ！！！
●きゃー擦り付けないで！！
すぐに覚えるから！
じゃ、やってみようか、黒色の色を作ってみて。
◆黒・・は簡単だよ、赤も緑も青もなければいいんだから、
えっと、＃０００？
●うん、ちょっと違うんだな。
赤、緑、青、各色は、必ず２桁にならないといけないんだ。
◆ふたけたぅー
●足りないときは先頭に０を足すの、
つまり黒は、＃００００００になるんだよ。
◆えー３桁とかじゃだめなのー？
●うんだめ。かならず２桁。
それでね、最初は１６進数で色を作るのは大変だと思うんだ。
そんなときは、中間色は「８８」って覚えておくと便利だよ。
◆８８？
●そう、一番きつい色が「ＦＦ」一番黒い色が「００」、
そして中間色が「８８」
この三つを覚えておくと、最初はなんとかなるよ。
◆えっと、赤とちょっと青を混ぜたいときとかは、
「＃ＦＦ００８８」とか？
●そうそう！できるじゃん！
下の色を、その方式であらわすとこうなるよ。



４　今までのおさらいです。
●実はね、今まで習ったことで、なんにも表示させないタイトルだけのホームページはもうできるんだ。
◆ええ！作ってみたいよ。
●自分で考えてみてね、どうやるか。必ずできるはずだから。
今日はここまで。いよいよ明日から、ボディに挟む具を作っていくよ。
◆あーいっぱい覚えてふらふらするよ・・・
●じゃ、がんばろうねーバイバーイ！！


次のステージへ
最初に戻る
感想・要望・意見▽
(C)奇花