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


●モブ君です!
◆チンチラです!!!
●この頃とみに寒くなってきました、いかがお過ごしでしょうか。
◆世間では「千と千尋の神隠し」や、「ハリーポッター」や、
映画がすごく活性化していますね。
●すっげぇ混でてモブ君は見れませんでした。
特にカップル!
幸せなカップルめ!!(どんっ)
いちゃいちゃするぐらいだったら家でしろーーーーーーーーーーーーーーーっっっっ!!!
うらやましいぞこんちくしょうっっ!!!
◆モブ君・・・・フローレさんとうまくいってないんですか。
●フローレちゃんはこの頃ケンタのことばかりかまってモブ君がにゃーと鳴いても
ちっとも撫でてくれなくて(うっうっう)
◆よしよし、チンチラが撫でてあげますからね。
●ニクキュウで撫でられたっぷにぷにー!!
◆ぷにぷにー!!

◆わー今回はいっぱい御手紙がありますねぇ
●さぼっていたからね(だばだばだばっだー♪)
◆その中の一通です、ゴンちゃんからの御手紙ですね。
●ぐっさー!!!!
◆おお、いきなり先生にダメージがっっ!!
●まちがってたぁあああ!まちがってたぁああああ!
◆先生!落ち着いて下さい!!!
●くぉおおおおおおー(悔し涙)武士としてこのような恥をかくとは・・・っっ
一千晩秋のオモいなり。
◆変な言葉作らないで下さい、だいたい武士じゃないでしょう、武士じゃ。
●ゴンちゃん、指摘、ありがとうでした、もう直っているよ!

モブ君 ●今日は「3」の続きです。 ◆絵を表示する奴ですね、Srcはやったから・・・ ●そう、前回はちょっと難しかったんだけど、大丈夫だったかな? ◆今回は簡単ですか? ●前回よりは簡単だよーそれじゃ、いってみよう!ビバビバ!
<img alt=”代理テキスト”> ◆先生、「alt」って奴には、テキストがついているね。 ●そうです、「alt」は、「代理テキスト」なんですね。 ◆代理テキスト? ●ちょっと絵の上に、マウスを持っていってしばらくじっとしてみて下さい。 ◆ああっっ!!!「モブ君」ってちっちぇのがでた!! ●「alt」は、絵の代わりに表示するテキストの指示なんでしゅ。 絵が表示されなかったり、テキストブラウザで見ていたりするときに、 絵の代わりに「alt=””」の””中のテキストが表示されるんですね。 ◆長い文でも大丈夫ですか? ●もちろん、長い文でも大丈夫です。 ただあんまり長すぎる文はマウスを置いたときにでる、ちっちぇ奴、 ポップアップヘルプというんですが、 すぐ消えちゃうでしょう?あれだと読めなかったりするので、 なるべく一言二言の方がいいね! ◆へぇーそうなんだぁーこれは必ず指定しないといけないんですか? ●いえ、<img>タグは、「src」以外は全部指定しなくても動作します。 ただ指定した方がユーザーには親切だよーってことで。 ◆うにゃー面白いにゃー
<img width=”幅” height=”高さ”> ◆この「width」と「height」は、数字が入っていますね。 ●それは絵の幅と高さです、パーセンテージ(%)で指定することもできるんだよ、 %の基本は、ブラウザの高さと幅だから、 100%すると、ブラウザいっぱいに表示されるよ。 それ以下だとブラウザより小さめに、以上だとブラウザをはみ出て表示されるよ。 コーンな風に。 (※ブラウザの大きさを変えてみてね、それによってサイズが変わるよ) ◆わっ!モブ君の顔がっ これは簡単だなぁ、ぐはっぐはっ ●変な笑い声だようー だけどね、数値を指定するときはちょっと困るかも。 なぜなら幅も高さも基本は「ピクセル」っていう単位だから。 ◆え?「センチ」じゃないの? ●前も言ったとおり、HTMLは英語で作られている言語だからね、 単位も英っぽいんだ。(っぽいってなんだよ) だからピクセルなんだよ。 ◆ふにゃーこまったにゃー ●絵の高さと幅は、「%」でも指定できたり、省略できたりするけど、 なるべくピクセルで、基の絵のサイズを指定していた方がいいよ。 ◆にゃんで? ●そうすると読み込みが速いんだ。 ブラウザはまず絵の高さと幅をぐいいいいーんと取得してから絵を表示するんだけど、 その「まず」の手間が省けるんだね、サイズをきちんと指定していると。 ◆でも、でも、「ピクセル」でやるのはよくわからにゃいにゃ! ●うーん、単位ピクセルで絵の幅と高さを取得するのは大変だよねぇ。 使っているお絵描きソフトを見せてご覧。 ◆これにゃ・・・・。Windowsのペイントにゃ。 ●ああ、これだったらね、 「変形」→「キャンバスの色とサイズ」で幅と高さが確認できるよ。 単位がピクセルになっているかどうか、気をつけてね。 ◆ああ!ほんとにゃ! ●ペイントだけじゃなくて、普通のお絵描きソフトなら、 絵のサイズを取得するのは簡単にできると思うよ、 「変形」や「解像度」と書かれているところを徹底的に探してみてね。 ◆ちょっと先生無責任ー ●うふふふ、つかまえてごらんなさーい ◆やばっ
<img border=”絵の回りの線の幅”> ●borderは簡単だよ、絵の回りを囲っている線の幅だからね。 0にすると線は表示されないよ。 ◆どんなになるにゃ? ●こんなになるにゃ border=0 border=1 border=10 ◆これは簡単にゃー! でも、線の色はかえられないのかなぁ? 黒じゃお葬式みたいだよー! ●うーん、スタイルシートを使えば変えられるんだけどねぇ。 あとリンクをはったときとか、色が変わるよ。 ◆んにゃ!リンクってなんだ! ●おおっと、これはまだ秘密♪ それじゃ、線はこれぐらいにして、次に行ってみようか。 色の変え方はまたね。
<img align=”絵の回り込み”> ◆先生ー絵の回り込みってなんですかー? ●これは言うより実際やってみた方がいいと思うから、やってみようね。

何も指定しなかったとき
aaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaa


align=left
aaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaa


align=center
aaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaa


align=right
aaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaa


◆わー、「left」、「center」、「right」で
全部絵の表示の仕方が違うねぇ
●そうなんだ、
「left」、「center」、「right」は、それぞれ、
「左」「真ん中」「右」っていう意味があるんだ。
だから「left」を指定したとき、
絵が、テキストの左に来る。
「center」の時は・・・
◆あれ?絵が真ん中に来ると思ったのに・・・
●「center」だと、絵の回り込みじゃなくて、テキストの回り込みになるようだね。
◆テキストの回り込み?
●そう、「center」の、文章を見てご覧、1行が、
絵の真ん中に来ているだろう。
◆あ、本当だ。
でもなんで絵の回り込みにならないんだろう。
●うーんこれはね、実はモブ君にもよく分からないんだ。
絵で「align」を指定すると、
絵の回り込みになるときもあるし、場合によってはテキストの回り込みなることもあるんだ。
モブ君はとっても不安定に感じるよ。
◆そうなのかー、
「right」だと、絵が文章の右に来ているね。
●そうだね、これは絵の回り込みになっているね。
絵の「align」はとても不安定だから、あんまり指定しない方が
逆に綺麗に配置できたりするんだ。
◆ならどうやって絵を、真ん中に持ってきたりするの?
●それは、後でのお楽しみ。
必ずできるようになるから、心配しなくていいよ。
◆ふにゃーそうなのかにゃー
●最後に、絵を表示させるときの注意点。
「絵のサイズには気をつけましょう」
◆ふにゃ?「width」とかのこと?
●違う違う、絵の容量のこと。
絵は絶対gifかpngかjpegに圧縮して、
1MBいかないようにしようね、ってこと。
◆ペイントで作れる、「BMP」じゃだめってことかにゃ?
●そう、ネットでは「BMP」だと重すぎるんだ。
絵の圧縮形式である、gifかpngかjpegにして、
最高でも100KBぐらい、
理想は10KBぐらいに絞った方がいいんだよ。
◆よくわからないにゃー。
●これはソフトが関係してくるから、フローレちゃんの領域だね。
またフローレちゃんに聞いてご覧。
私が言えることは、「gif」はやばいってことだけだよ。
◆そうするにゃ!
●じゃ、今日やったことを全部まとめてHPにしてみようか。

◆絵がついてきたから結構面白くなってきたよ♪ ●それはよかった。 僕らもそろそろ絵になった方がいいのかなぁ。 ◆重くなるからヒポポタマスは嫌がってるみたいだけど。 ●そうだねぇ。軽いのを目指しているからねぇ。 次のステージへ 前のステージへ 最初に戻る
現在のチンチラのHP▽

感想・要望・意見▽
(C)奇花