A.T-MOON

contents

パンくずリスト

メッセージエリア



    画像の指定@

メッセージエリア


マーク 画像の表示 <img src="A" alt="B">

画像を表示したい所に<img src="A" alt="B">を記述します。
Aには画像ファイルのURLを記述し、Bには画像に変わるテキストを記述します。
alt属性は画像を表示できないブラウザに対応するテキストです。
画像を表示できなかったり、表示しないように設定しているブラウザ、あるいは読み込みに失敗した時などに
画像の変わりに表示される代替テキストです。任意の名前をつけましょう。
※例)
画像の表示 サンプル画像 このような形で表示されます
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 画像の表示
 <img src="画像ファイルのURL" alt="代替テキスト">
 このような形で表示されます
 </body>
</html>

↓ピンク部分のタグをコピー↓

ページTOP



マーク 画像の表示位置 <A align="B"><img src="C" alt="D"></A>

Aには範囲を指定する属性(【p】や【div】【【span】など)を記述します。
それらの範囲で括られたものがどの位置に表示されるのかをBに記述します。

B 表示位置
left 左寄せ(デフォルト)
center 中央
right 右寄せ

※例)
画像を右寄せ表示

サンプル画像

このような形で表示されます
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 画像を右寄せ表示
 <p align="right">
 <img src="画像ファイルのURL" alt="代替テキスト">
 </p>

 このような形で表示されます
 </body>
</html>

↓ピンク部分のタグをコピー↓

位置をもっと細かく指定する場合はスタイルシートを使って記述します。
詳しくはスタイルシートの【画像の指定】を参照ください。

ページTOP



マーク 画像サイズを指定 <img src="A" width="C" height="D">

width属性height属性を使って画像のサイズを指定します。
Cには横幅、Dには高さが入り、"px"(ピクセル)もしくは"%"(パーセント)で記述します。
ピクセルでは画像のサイズを直接指定でき、パーセントではウインドウの大きさに対する割合で指定されます。
よってパーセントでの指定はウインドウのサイズに左右されてしまいます。
サイズを指定しない場合は画像のそのままの大きさで表示されます。

※例)
画像の表示 サンプル画像 このような形で表示されます
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 画像の表示
 <img src="画像ファイルのURL" alt="代替テキスト" width="120" height="80">
 このような形で表示されます
 </body>
</html>
『画像の表示』で使っているものと同じ画像ですが
サイズを指定すると小さく表示したり大きく表示したりすることができます。

ページTOP



マーク 画像を枠で囲む <img src="A" border="E">

border属性を使い画像の周りに枠線を表示します。
Eには太さの値を記述します。("1"や"2"などの数字)
通常は枠線は表示されませんが、画像にリンクを貼った時などリンクの設定などにより表示されることがあります。
その場合の枠線の太さの指定もココで行います。

※例
枠線"1"で画像の表示 サンプル画像 枠線"2"で画像の表示 サンプル画像
枠線"3"で画像の表示 サンプル画像 このような形で表示されます
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 枠線"1"で画像の表示
 <img src="画像ファイルのURL" alt="代替テキスト" width="120" height="80" border="1">
 枠線"2"で画像の表示
 <img src="画像ファイルのURL" alt="代替テキスト" width="120" height="80" border="2">
 <br>
 枠線"3"で画像の表示
 <img src="画像ファイルのURL" alt="代替テキスト" width="120" height="80" border="3">
 このような形で表示されます
 </body>
</html>
一箇所、赤い太字で改行タグが入っていると思いますが
これはこの次で説明する画像に対するテキストのの位置指定≠ノ関連するもので
表示する行を変えるために入れています。

ページTOP



マーク 画像に対するテキストの位置指定 <img src="A" align"F">

画像は前後のテキストとひとつの行に配置されます。
なのでalign属性を使ってテキストに対する画像の位置を指定します。
Aには属性の値を入れましょう。
F 画像に対するテキストの位置
top 画像の上部にテキストの上部
middle 画像の中央にテキストのベースライン
bottom(デフォルト) 画像の下部にテキストのベースライン

※例
"top"で画像の表示 サンプル画像

"middle"で画像の表示 サンプル画像

"bottom"で画像の表示 サンプル画像
このような形で表示されます
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 "top"で画像の表示
 <img src="画像ファイルのURL" alt="代替テキスト" align="top">
 <br>
 <br>

 "middle"で画像の表示
 <img src="画像ファイルのURL" alt="代替テキスト" align="middle">
 <br>
 <br>

 "bottom"で画像の表示
 <img src="画像ファイルのURL" alt="代替テキスト" align="bottom">
 <br>

 このような形で表示されます
 </body>
</html>
画像も行のひとつに含むので前後のテキストも一行分しか表示されず
一行に収まりきらないテキストは画像の下に送り込まれます。
画像の下に送り込まれないように指定するには次の項目の画像にテキストを回り込み≠見てください。

ページTOP

HTML TOPに戻る 画像の指定A