モブ君とチンチラの！
がんばれ絵だよ！イメージタグ！

●モブ君です！
◆チンチラです！
今日はこんな御手紙が来ました。

●これはねぇ、私も悪かったです。
昨日はタグの＜＞を省略してＢとかＰＲＥとかそのまま書いちゃった部分があって
それもまた混乱の基だったのかなぁーと、ごめんねー
今はなおっているよー
◆そういえば、タグは英語っぽいですよね
一般的に英語を使う人は覚えやすいのかな？
●モブ君も英語はさーっぱりなのできっぱりとは言えないけど、
Ｈｔｍｌだけじゃなく、そういう言語（※俗に言うプログラム言語）は、
世界共通言語である英語を基に作っている見たいです。
ただモブ君だって英語はさーっぱりですが、やっているうちに慣れました。
確かに最初は全然分からなくて、もどかしい部分があると思うけど、
作っていくうちにだんだん分かるようになっていくから、安心して！
◆うーん、僕もまだ自信がないよ、これからも難しい英語がいっぱい出てくるのかなぁ。
●１つ、モブ君から。
タグは全て英語の略語です、
だからと言って意味を考える必要は全然ありません。
むしろ意味なんか分からなくていいの、
プレーンテキストって何？って状態でいいの。
そういう物なんだなと思ってればいいんです、
例えば＜Ｂ＞だったら、文字を太くするんだな、
文字を太くする命令は＜Ｂ＞なんだな、でいいのです、
１つ１つ意味を分かろうとしたらきりがないよ。
モブ君が講義をする中で、英語が出てきても、
「これは英語をだした方が覚えやすいかな」ってだけなんで、
その意味が分からないーとかなって考え込まないで全然いいんだよ。
◆でも意味が分からなくて霧がかかった状態だと、気持ち悪いよ、
自分が劣っているみたいに想えてくるんだ。
●大丈夫、モブ君だって意味なんて全然分かっていません、
言語を覚えるこつは、言語→意味を知る、じゃなくて、
言語→動きを知るってことが大事なんだよ、
タグはただの命令なんだ、こう表示してくれっていう命令なんだ、
その命令がどんな動き（ここで言う表示）をかもしだすかってところがポイントなんだよ。
◆うーん、よく分からないけど、先生がよく言っている
「体で覚えろ」ってこと？
●よく言ってないけどね（誰が言ったのか気になっている）
あ、それとね、読んでくれている人にお願い、
モブ君の講義は、作ってみることを前提にしています。
最初はモブ君のタグをコピー＆ペースト（※１）でいいから、
毎回必ず作ってみてね。
チンチラ君じゃないけど、体感することが一番の早道だからね！
◆今日は反省気味でスタートですね！（※２）

※１　貼り付けのこと。
マウスをドラッグして（貼り付けたい文の一番上でマウスの左ボタンを押して、
文の下までぎゅーっと引っ張ったら放す、そうすると「選択状態」になるんだ。
マウスをぎゅーっと引っ張って放すのをドラッグって言うんだよ。）
右クリック、「コピー」を選ぶとコピーされるんだ。
そのままメモ帳とかで右クリック、「貼り付け」を選ぶと、文が素のまま貼り付けされるんだよ。
※２　作者も英語は苦手だから、英語はあまりださないようにするよ、安心してね。
だしたとしてもこれからはちゃんと意味まで書いておくからね。
ご意見ありがとう、最後の部分、アドバイスとして受け取ったよ。
親しみやすい言葉をタグにつけていってみようと思うよ！
余計ややっこしくなるかな？
※３　この講座は初心者のために開かれています、
ご意見や分からないところがあったらどんどん言ってね。
作者が暇な今のうちにどんどん言うのが好。


◆あ、おはよう、先生
●ぷう
◆きゃーなんで朝っぱらから屁をこくんですか！！臭い！すごく臭い！
●モブ君は昨日変な夢を見ちゃったよ。
◆そりゃ今関係ねぇだろ！！くせぇぞ親父！！
●なんかねぇ、海の中で声が通じないからお屁で会話してるんだ。（屁の上品語ってなんだ？）
チンチラとねぇ。
ぷぅぷぷぅって。「が、ん、ば、れ」って屁で１つずつだしたよ。
◆あんたなんか部屋が臭いと思ったら屁ばっかりしてやがったなぁー！！！
●それでねぇ、今もなんかそんな気分なんだ。
◆そんな気分って！屁で会話する気かーーー！！！
−少々お待ち下さい−
◆チンチラです！
●モ・・・モブぐんでず・・・。
◆さぁ、先生、よれよれになってないで。
もう下品なことは言わないでね！
●モブ君ちゃんと屁も上品語で言ったじゃないかー！！（泣
◆さ、ちゃっちゃっと次に行っちゃいましょう、
今日はイメージタグですね。
●そうです、イメージって分かりますか？
◆えっと、想像とか、あの、なんかそういうの。
●うんうん、でもそれは違うんだ、
ここで言うイメージは、僕らが描いた絵の事なんだよ。
コンピューターで読み込んだ、ＣＧ（コンピューターグラフィック）の事。
◆えーなんでそれをイメージって言うの？
普通はグラフィックって言うんじゃないの？
●うんとね、タグはコンピューターへの命令なんだ。
やっていると分かるんだけどね、
言語を書くって言うのはコンピューターと会話しているようなものなんだ。
それでね、コンピューターじょうの絵って、
コンピューターの頭の中にあるでしょう？
◆うん・・・でもそれがどうしたの？
●コンピューターは手足がない、だからその「絵を見せてくれ」って言うわけにはいかないだろう？
絵はコンピューターの頭の中にあるんだし、それをコンピューターが手足を使って
紙に描きだしたら大事だよ。
◆チンチラそういうコンピューターすげぇ欲しい。
●だからね、コンピューターに言うんだ。
「イメージ（想像）してくれ」って。
そうすると、コンピューターは僕らの見ているブラウン管にぶいいいいーんと
超能力で微熱に表示してくれるんだ。
あ、ブラウン管って画面のことだよ。
◆微熱のところがよくわからんが、そうなのかぁー
●だからコンピューター上の絵はイメージととらえるとイインダ。
前置きが長くなったけど、
そうすると、絵の表示のタグはこうなるんだ

◆あ！またａｌｉｇｎ＝ｃｅｎｔｅｒがでてきた！
＜Ｐ＞タグでもでてきたよね！
●うん、Ａｌｉｇｎっていうのは、位置づけのたぐだからね。
詳しくは後でやろうね。
じゃ、上のタグを表示してみるよ。
モブ君
◆へぇー先生がでてきましたねぇ
●でてきましたねぇ
◆先生！なんだか僕わくわくしてきたよ！早く教えて！


１／ｓｒｃとパス
◆ふにゃー
●どうしたんだい？チンチラ。
◆ｓｒｃの後にいっぱいなんだか訳の分からないものが並んでいるよぅ。
●落ち着いて、１つずつ見ていこうね。
ｓｒｃっていうのは、イメージの位置、「このイメージを表示しろ」っていう命令なんだ。
するくって覚えるといいよ。
イメージを表示するくぅ！！！（興奮）
ｓｒｃ＝の後に、イメージファイル名を書くと、そのイメージを表示してくれるんだよ。
ファイル名は「""」で囲むんだ。
っていうかタグは要素（※１）を""で囲むのが正しいんだけど、
僕は良く""を省略しちゃうよ。
◆イメージファイル名・・・？
ファイル名ってmama.gifとかmobu.htmlとかだって分かるけど、
確か「./」とかいう記号はつけられないんじゃ・・・？
●ああ、ごめんね、モブ君の言い方が悪かった。
イメージファイル名じゃなくて、そこに書くのはイメージの「パス」なんだ。
◆パス・・・？？？？？
●例えばね、僕の住所はメルトンセイの３丁目１２番地でしょう、
それと同じように、ファイルには全部「どこにある」っていうパスがあるんだ。
◆あ、分かった、ＨＰのアドレスみたいなものだね！
../　とか！
●そう、パスとか住所とかアドレスとか言っているけど、
それは全部同じ意味なんだ。
つまり「誰がどこにいるか」ってことだね。
◆分かったよ、先生！つまり「./」っていうのは、
番地みたいなものなんだね。
●ううん、「./」っていうのは「ここにいますよ！」っていう意味。
番地からやると、../mobu/mobu03.gif　がそうなるかな？
これだと、「モブ君のホームページのmobu03っていうイメージを呼びだして下さい」って言っているんだ。
番地から書くのを「絶対パス」って言うんだよ。
絶対的にそこにいるんだ！お前は信用ならねぇ！！って感じかな。
◆絶対パス・・・メモメモ。
番地からやっても、絵は表示できるんだね？
●うん、番地からやってもイメージは表示できるよ。
それでね、「./」っていうのは、番地からじゃなくて、宣言なんだ。
◆宣言・・・？
●そう、「僕はここにいます！」って宣言。
表示したい絵が、表示させたいｈｔｍｌファイルと同じ位置にある場合は
「./」をつけるんだ。そうするとコンピューターは、
「はいはい、ここと同じ場所ね」って言ってくれるんだ。
◆へぇー・・・・！
●これをね、相対パスっていうんだよ。
相対パスは便利でね。
例えばディレクトリの中にある・・・・
◆はいはい！！ディレクトリってなにー！？
●あ、ごめんごめん、ディレクトリはフォルダ（※２）の事だよ。
それでね、相対パスを使うと、上のフォルダに行ったり、下のフォルダに行ったりすることができるんだ。
◆ええ？？
●想像ができないかな？？
つまりね、こういうこと。
ＡというフォルダにＤとＢというフォルダがあって、Ｂの中にＣというフォルダがあるとする。

それぞれはそれぞれファイルを持っている。
そして現在位置はＢだ。
◆うんうん。
●Ｂの中のファイル「４」にアクセス（※３）するには？
◆うん・・・、さっきのここにいますを宣言すればいいんでしょ？
「./４」？
●そう、そしてＣの中のファイル「５」にアクセスするにはどうすればいいと思う？
◆う・・・えーっとえっと、
分かんない・・・。
●うんとね、「ここからどこどこですう」って言えば良いんだよ、
コンピューターに道を教える感じでね。
つまり、「./Ｃ/５」ってやればいいんだ。
「ここからＣのフォルダに入った５君ですぅ」って言えば良いんだよ。
◆そうなのかぁー！！
●それでね、Ｂを包んでいるＡの中に戻ることもできるんだ。
コンピューターに道を戻って下さいって言えば良いんだね。
そういうときは、「../」ってやればいいんだよ、
.を２つに増やすんだね。
◆それだけでいいの？
●そう、それだけでいいんだ、じゃ、Ａの中のファイル「１」にアクセスするには？
◆もう大丈夫だよ！
「../Ａ/１」！
●おおーっと、間違い！
「../」はＢの中から１つ上にうつる事なんだ。
../ってやれば、現在位置が移動するんだ。
つまりコンピューターが移動するんだね。
だからＢの中からＡの中に移動して、ファイル「１」にアクセスするには、
「../１」になるんだよ。
◆あうあうあうーチンチラが悪いんじゃないやい！！！
●誰も責めてないよ！！！
んじゃ、次はがんばろうね、Ｂの中からＡの中のＤの中のファイル「６」にアクセスするには？
◆ふー・・・ふー・・・
●・・・・（がんばりゅーお）
◆えっと、戻って下さい、って言って、Ａの中に行って・・・、
Ａから「Ｄのフォルダに入った６君ですぅ」って言うんだから・・・！
「../Ｄ/６」！！！！
●ピンポーン！！！
やったじゃないかうう！！！！
◆きゃー抱きしめないで！！
●ちなみにＣからＡの１にアクセスするには、「上の上の階」って事だから、
「../../１」になるんだよ、上の上の上の階は「../../../」だね。
どんどん上にのぼっちゃうー♪
◆先生って壊れることが多いよね。
●これでパスの話は終わり。
じゃ、次に行こうね。

※１　＝の次の数値や文、a=BだったらBが要素
※２　ファイルを包んでいる袋（箱でもよし）のような物。
※３　ファイルと接触すること。ファイルを開いたり、ファイルを保存したりファイルへの働きかけを言う。
※「./」について
./は「戻る命令」以外、省略可能です。
だけどつけた方がいい感じ、好みですね。


●ふあー疲れた、ちょっと疲れちゃった。
今日はここまでにしようか。
◆そうだねーパスの話し、長かったし・・・。
●続きはまた明日ね〜〜

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