トップ ＞ 画像を入れてみよう
★何事にも例外。HTMLタグの原則――それは、囲むと言うことです。しかし、画像を入れるタグは、閉じるタグのつけようがありません。 ですから、原則を超越した、例外のひとつに上げられます。 そのほかにも、線をひくと言う <hr> と言うタグがあります。 ★画像を挿入する。画像のことを、｢イメージ｣と言います。これは英語の Image から来ていますので、タグも簡単に覚えられると思います。 さて、画像を挿入するタグ、行きましょう。 <image src="画像のパス・ファイル名"> パスの説明は前回のページにあるので、よく分からない人は、見ながらやってみましょう。 さて、出来ましたか? 表示されました。これでおしまい。というわけにはいきません。 このタグには、もっとすばらしい機能があるのです。 それは、表示させる大きさを変えるということです。 とはいっても、無理やり大きさを変えているのでジャギー(ギザギザ)になったりしますが。 imageタグの属性には、次のような物があります。 src : 表示させる画像のパス・ファイル名 これが無くてはお話になりませんね。必須！ lowsrc : 低解像度画像 あまり使われていない。用途は｢NOW LOADING｣とか書かれた軽い画像を指定しておくと、 読み込むまでその画像が表示される。 あまり使われない理由はインターレースGIF・インターレースPNG・ プログレッシブJPEGなどという少しずつ読み込んで表示するシステムがあるから。 alt : 画像の説明 マウスのポインタを重ねたときに表示される説明。 画像が表示されない場合、ここに入力された文字が ×印(Netscapeでは破れた紙のマーク)の隣に書かれる。 align : 文字位置 画像の次に、文章を改行せずに書く場合、指定しなければ下のほうに書かれる。 しかし、真中、上も指定できる。 上：top 真中：middle 下：bottom 蛇足：bottomって｢下｣じゃ無くて｢底｣って言う意味ですがね。 width : 横のサイズ 画像の横のサイズ。指定しないと画像が読み込まれるまで小さく見積もられるので、 表示されてからいきなり文字がずれたりするのがいやな場合とか、指定するといいでしょう。 指定は ｢ ピクセル ｣ です。 height : 縦のサイズ 横のサイズと同じです。これら本当のサイズより小さくしたり、大きくしたりまできます。 画像の大きさは、こんなツールがあるみたいです。 検索すればもっと見つかるでしょう。 hspace : 横スペース 画像の左右のスペースを指定。 画像がぎゅうぎゅう詰めになるのが嫌な場合、5くらいを指定するとよいでしょう。 逆に、明けたくない場合は 0 と入力すればいいと思いますが、 指定が無ければかってに 0 になる模様。 vspace : 縦スペース 横スペースに同じ。 border : 周りの縁の線 ボーダー。 0 なら無し。 画像にリンクが貼れているのがわかりやすくなる場合も。 ただ、ダサく見える場合も。指定無しでは 2 になるようです。 どうですか？ 説明を打ち込むだけで疲れます。 ★重い画像を表示させる場合の注意重い画像がページにあると、表示に時間がかかってしまいます。 その場合、サムネイルといって、元の画像を100×100ピクセルくらいの軽い画像に 編集してからそれに元の画像へのリンクを張るとよいでしょう。 かなり面倒ですが、サーバの負担が軽くなる上、この方が かっこいい です。 ★画像の作り方ここで説明するのは厄介です。Windowsについている｢ペイント｣では、*.bmp形式で保存されます(例外あり)。 それで、このbmp形式はとても重いんです！ ですから、これをインターネット上で使うと迷惑になります。 では、どうすればいいのか…。 圧縮です。圧縮形式にはいろいろありますが、おすすめはPNG形式(ピングと読むらしい)。 フリーソフトで多くの変換(圧縮して形式を変換する)ツールがあります。 検索で見つかった物を多少紹介します。 G・こんばーちゃ♪: Windows系用。説明がわかりやすい。 Bmp2Png : Windows系用。比較的簡単な操作で変換可能。 BMP to PNG : Windows系用。ドラッグアンドドロップで変換するらしい。 その他、Windows系用はこちら。 MAC系はフリーソフトがなかなか見つかりません。 更に詳しい事はこちらにあります。 ★GIFファイル問題圧縮形式で、最も一般的に使われているのはGIFとJPEGです。GIFは256色しか使えません。しかし、軽いので人気。 GIFの人気の理由のもうひとつはアニメーション。 ちょっとした飾りからストーリー重視の大作まであります。 それと、透過(透明化)です。 指定した1つの色を透明に出来ます(させない事も出来ます)。 しかし、このGIF形式には問題が！ じつは、圧縮のときに使うプログラムに特許があるのです。 この特許は｢米国Unisys社｣が持っていて、そろそろ期限切れになるんですが、 アメリカの特許法では多少手を加えれば特許が復活するのです。 アメリカ国内ではすでに2003年6月に特許が切れましたが、 過去の経歴からして 汚 い 会 社 なので、どんな手段で特許を回復させるかわかりません。 最初は｢タダでいいよ｣と言っていた。 人気が出てから｢金取るよ｣と主張。 みんなお金を払わない。すると｢罰金50万ドル｣とか言い出しました。 恐ろしい金額です。 で、肝心の日本国内ですが、 2004年6月に特許が切れる予定です。 こういう理由で、フリーソフトでGIF対応と言うのは少ないのです。 たとえソフトの作者が特許料を全額払うからフリーソフトを作ると言っても、 それさえも駄目と米国Unisys社は言っているようです。 画像編集をたくさんしたい人は、損はしないと思いますので、 ソフトを買ってみては？ 私のお勧め：ねこのキャンバス 値段：\2,000 コンビニで支払い可。 ペイントで書いた絵を GIF , PNG , JPEG に変換するならもってこいです。 トップ ＞ 画像を入れてみよう |