FujiPro「ウェブマスター」

FujiMan Production - ウェブマスター -

ホームページ制作講座 for Windows
画像の表示

トップページ＞ウェブマスター＞ホームページ制作講座＞画像の表示

■扱える画像ファイル

JPEG形式

(Window Meのサンプルより)

GIF形式

(Microsoft Wordクリップアートより)

　ホームページで使える画像ファイルの形式は、基本的に「JPEG形式」と「GIF形式」のふたつと考えて差し支えありません。ちなみに、JPEGは「ジェイペグ」、GIFは「ギフ」とよびます。

　JPEG形式はフルカラー(約1678万色まで)に対応している上、高い圧縮率をもっていますので写真に向いている保存形式です。
　GIF形式は256色ですが、圧縮によりサイズが小さくなり、さらにアニメーションなどイラスト向きの保存形式です。

■まずは素材の用意

　オリジナリティを発揮したいのであれば、ご自身で用意されるのがよいと思いますが、ライセンスフリーの素材がいろいろなサイトから入手できますので、なれないうちは、それらを利用するといいと思います。

　いずれにしても、まず画像ファイルを用意することが肝心ですね。

　ここでは右のようなものを用意してみました。
　「chara2.gif」というファイルですが、これをローカルドライブ(C:)の「wwwフォルダ」に移します。

　この画像を使いたい場合は、画像の上で右クリックを押して「名前を付けて画像を保存」を選択します。保存場所を「c:\www」にして[保存]ボタンを押せばＯＫです。

■画像の表示は<IMG>タグ

sample07.html

<HTML>
<BODY>
<IMG SRC="chara2.gif">

FujiMan Productionのホームページ

</BODY>
</HTML>

画像を表示するタグは<IMG>を使います。このタグには終わりの</IMG>というのはなくて、単独で使用します。

右の赤字のように追加してみてましょう。文字のサイズは「5」にしています。

　ファイル名の指定には「SRC」オプションを使います。SRC は source(ソース)を略したものです。

　ファイル名は、"(ダブルクォーテイション)で囲みます。このとき、インターネットでは英字の大文字と小文字を区別するので、ファイル名に使われている通りの文字で指定します。

　どうでしょうか。うまく表示されましたか？

■いろいろなオプション

●サイズ指定(WIDTH,HEIGHT)

　画像の表示サイズをオプションで指定しておくと、レイアウトを崩さずにページを表示させることができます。

　"chara2.gif"のサイズはピクセル（点の数）で、幅(横)100×高(縦)100ですので、次のように指定します。　幅は「WIDTH」、高さは「HEIGHT」オプションで指定します。

　この機能を逆手に利用して、こんな風な使い方もできます。

　WIDTHとHEIGHTのサイズをいろいろに変えて試してみて下さい。

●文字列位置指定(ALIGN={TOP/MIDDLE/BOTTOM})

　サンプル(sample07.html)のタイトルを画像の右上にくるように表示したいなんて思いませんか？

　このようなときに使うオプションが「ALIGN」です。実は、このオプションをsample07.htmlのように省略した場合は、「ALIGN=BOTTOM」を指定したのと同じことになります。
　ちなみに「TOP」は「上」、「MIDDLE」は「中央」、「BOTTOM」は「下」です。

　次の３つのオプションを試して、sample07.htmlと比べてみて下さい。

●文章の回り込み指定(ALIGN={LEFT/RIGHT})

　これは文字列位置指定と同じオプションですから、一緒に説明しても良かったんですが、機能が少～し違ってますので、敢えて分けて説明することにします。

　文章の回り込みは、長～い文章を画像に回り込ませたいときに使うオプションです。

　ちょっと下のサンプルを見てください。これはオプションの指定がない場合です。

sample08.html

<HTML>
<BODY>
<IMG SRC="chara2.gif">
「ホームページなんて、それ用のソフトを使えば簡単にできちゃう」・・・これは確かにそうなんですよねぇ。ページに貼り付けたい写真なんかを適当に編集しちゃえば、画像形式なんて知らなくても、専用ソフトが勝手に形式変換してくれるし、そのファイル名なんか気にせずに、ウェブ・サーバーに送れたりもするわけですから・・・こんな面倒くさい講座なんかやめちゃえ・・・て、思われたら無理にやらなくてもいいからね。ホームページの仕組みが知りたいときだけ見てくれたら、それでＯＫ。でもね、実はホームページひとつ作るにしても、カラー表示の仕組みとか、画像形式とか、ネットワークのこととか、いろ～んな技術とか、知識とかが集大成のように出てきて驚いたり、ビビったりするからねぇ。パソコンの学習にはもってこいの教材と言えるかも知れませんね。さあ、なんとか長い文章を入れたけど、こんなもんでイメージつかめるかな・・・。(^^)
</BODY>
</HTML>

　画像の右側に、この文章を回り込ませたいとき、画像の右上を指定すればいいと思って、次のように指定しても文字は回り込みません。

　「TOP」「MIDDLE」「BOTTOM」は、短い文字列を画像とセットにしたいときに指定するものなんです。

　文章を回り込ませたい場合は、次のように指定します。

　画像を右側にしたい場合は、次のようにします。

　さあ、どうでしょうか。お分かりいただけましたでしょうか。

●余白指定(VSPACE,HSPACE)

　文章の回り込みをしたのはいいが、どうも窮屈に見える・・・、こういう場合、画像のまわりに余白があるといいですね。

　そこで登場するのが余白指定オプションです。画像の上下に余白を作りたい場合は「VSPACE」、左右に作りたい場合は「HSPACE」を使い、ピクセル数で指定します。

　sample08.htmlの画像タグを次のように変えてみましょう。余白は上下左右20ピクセルずつに設定してみました。

　さあ、どうでしょうか。違いが分かりますか？

●代理名称指定(ALT)

　サーバーにあるはずの画像ファイルが無くなっていたり、壊れていたり、あるいは転送に失敗したりすると、ブラウザにうまく表示されず、左上のようにIEなら「×」マークが付いて「いったい何の画像なんだろ」と気になったりします。

　そこで右上のように、「×」マークが付いてしまっても、その画像が何であるか説明が付けば、「ああ、これは写真なんだ。」とか「これは次のページに進むためのバナーなんだ。」とか、とりあえずは分かるわけです。

　それを「代理名称（チップ表示）」といい、「ALT」オプションを使います。名称は"(ダブルクォーテイション)で囲みます。
　画像が無事に表示された場合でも、マウスカーソルを合わせるとポップアップしてきますよね。それもこの代理名称で指定したものなんです。

　sample08.htmlの画像タグを次のように変えて、指定した名称がポップアップするか確認してみましょう。

■<IMG>タグのまとめ

オプション	属性値	用法
SRC	ＵＲＬ	表示したい画像ファイルを指定
ALT	代理名称	代理名称の指定
WIDTH	ピクセルか％	画像の表示幅を指定
HEIGHT	ピクセルか％	画像の表示高を指定
LOWSRC	ＵＲＬ	仮表示させたい画像の指定、SRCで指定した画像の前に表示される
ALIGN	TOP	画像の右上に文字列を表示
	MIDDLE	画像の真ん中に文字列を表示
	BOTTOM	画像の右下に文字列を表示
ALIGN	LEFT	画像を左側に文章を回り込ませる
ALIGN	RIGHT	画像を右側に文章を回り込ませる
VSPACE	ピクセル	画像上下の余白を指定
HSPACE	ピクセル	画像左右の余白を指定
BORDER	ピクセル	画像の周囲に境界線（太さ）を指定

<-RETURN