●モブ君です! ◆チンチラです!!! ●この頃とみに寒くなってきました、いかがお過ごしでしょうか。 ◆世間では「千と千尋の神隠し」や、「ハリーポッター」や、 映画がすごく活性化していますね。 ●すっげぇ混でてモブ君は見れませんでした。 特にカップル! 幸せなカップルめ!!(どんっ) いちゃいちゃするぐらいだったら家でしろーーーーーーーーーーーーーーーっっっっ!!! うらやましいぞこんちくしょうっっ!!! ◆モブ君・・・・フローレさんとうまくいってないんですか。 ●フローレちゃんはこの頃ケンタのことばかりかまってモブ君がにゃーと鳴いても ちっとも撫でてくれなくて(うっうっう) ◆よしよし、チンチラが撫でてあげますからね。 ●ニクキュウで撫でられたっぷにぷにー!! ◆ぷにぷにー!! うはん。ごんです。 イメージの使い方が載ってたわけでうが、 「現在のモブ君のHP」に具体例の絵があったほうが わかりやすくていいかもと思いましたょ。 今日はこれだけ。 実はかなり楽しみにしてるので、がんばって下さいです。 つーかモブ君のHPなのに「ここはチンチラのホームページです!」なの? ◆わー今回はいっぱい御手紙がありますねぇ ●さぼっていたからね(だばだばだばっだー♪) ◆その中の一通です、ゴンちゃんからの御手紙ですね。 ●ぐっさー!!!! ◆おお、いきなり先生にダメージがっっ!! ●まちがってたぁあああ!まちがってたぁああああ! ◆先生!落ち着いて下さい!!! ●くぉおおおおおおー(悔し涙)武士としてこのような恥をかくとは・・・っっ 一千晩秋のオモいなり。 ◆変な言葉作らないで下さい、だいたい武士じゃないでしょう、武士じゃ。 ●ゴンちゃん、指摘、ありがとうでした、もう直っているよ! ●今日は「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=”絵の回り込み”> ◆先生ー絵の回り込みってなんですかー? ●これは言うより実際やってみた方がいいと思うから、やってみようね。
◆わー、「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にしてみようか。 ◆絵がついてきたから結構面白くなってきたよ♪ ●それはよかった。 僕らもそろそろ絵になった方がいいのかなぁ。 ◆重くなるからヒポポタマスは嫌がってるみたいだけど。 ●そうだねぇ。軽いのを目指しているからねぇ。 次のステージへ 前のステージへ 最初に戻る