HTML リファレンス - 画像編

1章； HTML入門
2章； HTMLの基本
3章； リンクについて
4章； 文章の整形
5章； ファイル転送
6章； 画像について

■基礎知識 「中級編」

■基礎知識 「上級編」

 ・基本構成編
 ・リンク編
 ・フォント編
 ・テキスト編
 ・画像編
 ・リスト編
 ・テーブル編
 ・フレーム編
 ・フォーム編
 ・拡張タグ編
 ・カラー編

 ・評価の高いサイト
 ・SEOのメリット
 ・SEO関連語句解説

お勧めレンタルサーバー

□相互リンクでSEO!
□やきぶたサーチSEO
□アクセスアップ無料情報
□ホームページ作成講座
□アクセスアップSEO
□格安レンタルサーバー
　Ｌ 無料レンタルサーバー
□チャ−シューメンズ倶楽部
□SEOのつもりがスパム？

■ホームページ作成
 ★FC2 無料ホームページ
 ★ホームページ テンプレート 1
 ★ホームページ テンプレート 2

■ 画像(GIF,JPEG)の表示

<IMG SRC="aaa" ALT="xxx">
(aaa=画像ファイル、xxx=文字)

【説明】

画像を表示します。SRC="..."で使用する画像ファイルを指定します。

またALT="..."で文字を書き込んでください。これは省略することもできますが画像を読み込むまでに表示されます。これは画像を表示させることのできないテキストブラウザに対する配慮でもあります。

特に注意するべきことはブラウザはファイル名の大文字と小文字を区別するので、ファイル名の指定はしっかり確認して行ってください。

【使用例】

画像をここに<IMG SRC="wonder.gif" ALT="焼豚ワンダーランド">表示させます。

【表示】

画像をここに表示させます。

【表示・テキストブラウザ】（画像が表示できない時、ALT属性をいれる事でこのように表示されます）

画像をここに表示させます。

■ テキスト位置の指定

【説明】

画像ファイルの前後にテキストを書くことができます。ALIGN="..."を使用すると画像のどの位置にテキストを置くかを指定できます。指定しないと<IMG SRC="aaa" ALIGN="BOTTOM">を指定したことになります。

上記の例では画像の側面に一行のテキストが、２行目からは画像の下にテキストが回り込みます。ここでALIGN="LEFT" ALIGN="RIGHT"を指定すると画像の側面に複数行のテキストを置くことができます。

画像に関するオプションは同時にいくつも指定することができます。

【使用例】

<IMG SRC="wonder.gif" ALT="焼豚ワンダーランド" ALIGN="TOP">
TOPを指定します。BLICENCE

<IMG SRC="wonder.gif" ALT="焼豚ワンダーランド" ALIGN="MIDDLE">
MIDDLEを指定します。

<IMG SRC="wonder.gif" ALT="焼豚ワンダーランド" ALIGN="BOTTOM">
BOTTOMを指定します。

【表示】

TOPを指定します。

MIDDLEを指定します。

BOTTOMを指定します。

【使用例】

<IMG SRC="wonder.gif" ALT="焼豚ワンダーランド" ALIGN="LEFT">
LEFTを指定します。

<IMG SRC="wonder.gif" ALT="焼豚ワンダーランド" ALIGN="RIGHT">
RIGHTを指定します。

【表示】

LEFTを指定します。

RIGHTを指定します。

【表示・テキストブラウザ】（画像が表示できない時、ALT属性をいれる事でこのように表示されます）

LEFTを指定します。

RIGHTを指定します。

■ 空白の設定

【説明】

画像の周りにスペース(空白)を作ります。VSPACE="n"を使用すると画像の上下にスペース(Vertical SPACE)を、HSPACE="n"を使用すると画像の左右にスペース(Horizonal SPACE)を指定できます。またnでスペースを取りたいピクセル数を指定します。

使用例では画像の側面に複数行テキストを置きたいので同時にALIGN="LEFT"を指定します

【使用例】

<IMG SRC="wonder.gif" ALIGN="LEFT" ALT="焼豚ワンダーランド" HSPACE="30">
HSPACEを使用し40ピクセル空白を作りました。

VSPACEを使用し20ピクセル空白を作りました。 <IMG SRC="wonder.gif" ALT="焼豚ワンダーランド" ALIGN="LEFT" VSPACE="20">

【表示】

HSPACEを使用し40ピクセル空白を作りました。


VSPACEを使用し20ピクセル空白を作りました。

HSPACEを使用し40ピクセル空白を作りました。

VSPACEを使用し20ピクセル空白を作りました。

---

■ 表示サイズの指定

<IMG SRC="aaa" WIDTH="n" HEIGHT="n">
<IMG SRC="aaa" WIDTH="n%" HEIGHT="n%">
(aaa=画像ファイル)

【説明】

物理的に画像ファイルのサイズを指定することができます。ピクセル数かパーセント表記で指定します。パーセント指定は元の画像ファイルに対する割合ではなくブラウザの幅、高さに対する割合であることに注意してください。(100%を指定すると画面いっぱいということです。)実際の画像サイズと異なる場合はブラウザ側が自動的に調節します。

WIDTH="n" HEIGHT="n%"というようにピクセル数とパーセント表記を合わせて使用することもできます。

画像サイズを指定するとブラウザ側のレイアウト処理がすばやく行われるので、すばやくテキストが表示されるというメリットがあり、読者に対するやさしい配慮と言えます。ALTと合わせてWIDTH、HEIGHTも常に使用しましょう。

この画像ファイルは幅(WIDTH)230ピクセル、高さ(HEIGHT)60ピクセルです。

【使用例】

<IMG SRC="wonder.gif" ALT="焼豚ワンダーランド" WIDTH="150" HEIGHT="80">
<IMG SRC="wonder.gif" ALT="焼豚ワンダーランド" WIDTH="90%" HEIGHT="50">

【表示】

---

■ 画像の外枠

<IMG SRC="aaa" BORDER="n" >
(aaa=画像ファイル)

【説明】

画像に外枠を付けることができます。ピクセル単位で指定します。

<A HREF="...">で画像をリンクボタンにすると自動的にBORDER=1が設定されてしまうのでBORDER=0を指定すれば外枠をキャンセルすることができます。

【使用例】

<IMG SRC="wonder.gif" ALT="焼豚ワンダーランド" BORDER="0"> <IMG SRC="wonder.gif" ALT="焼豚ワンダーランド" BORDER="1">

<IMG SRC="wonder.gif" ALT="焼豚ワンダーランド" BORDER="10"> <IMG SRC="wonder.gif" ALT="焼豚ワンダーランド" BORDER="30">

【表示】