 |
ホームページ作成 HTML基礎講座 imgタグ 画像の表示
ホームページ作成・HTML基礎・スタイルシート（CSS)・javascript・SEO対策
|
|
■imgタグ：画像の表示  |
 |
|
【解説】
画像の表示 |
<img src="（1）">
<img lowsrc="（2）">
（1）画像ＵＲＬ
（2）画像ＵＲＬ（低解像度）主にモノクロ画像に使用するがＧＩＦ画像なら問題ないハズです。
※lowsrc指定はsrcで指定された画像より先に表示されます。 |
サンプルソース
<img src="http://e-html.aofp.net/images/top_b.gif">
<img src="../images/top_b.gif">
画像が何らかの原因で表示出来ない場合の配慮
<img src="http://e-html.aofp.net/images/top_b.gif" alt="top_b.gif">
<img src="../images/top_b.gif" alt="top_b.gif">
<img src="../images/top_top.gif" alt="画像がありません">
※alt属性で画像の変わりに表示される代替文字及びマウスを合わせるとコメント表示されます。 |
 サンプル表示 |
画像サイズ指定
<img src="（1）" width="（2）" height="（3）">
（1）画像ＵＲＬ
（2）横幅（ピクセル値または"%"）
（3）縦幅（ピクセル値または"%"）
画像の境界線の太さを指定
<img src="（1）" border="（2）">
（1）画像ＵＲＬ
（2）境界線太さ（ピクセル値）
画像の回りに文章を回り込ませます
<img src="（1）" align="（2）">
<img src="（1）" style="float: （2）">
（1）画像ＵＲＬ
（2）位置（キーワード）
| キーワード |
画像・文章の位置 |
| left |
画像を左に、文章を右に配置 |
| right |
画像を右に、文章を左に配置 |
| top 注1 |
画像の上辺を文字の上に合わせる |
| middle 注1 |
画像の上下中央に文字の中央を合わせる |
| bottom 注1 |
画像の下辺を文字の下に合わせる |
| texttop 注1 |
画像の上辺を文字フォントの上限に合わせる |
| absmiddle 注1 |
画像の上下中央に、文字の中央を合わせる |
| absbottom 注1 |
画像の下辺に、文字フォントの下限を合わせる |
| none 注2 |
回り込みしない |
※注1：align のキーワードのみ対応
※注2：float のキーワードのみ対応 |
※回り込みを解除方法
<br clear"（1）">
（1）解除キーワード
all：左右の画像への回り込み解除
left：左にある画像への回り込み解除
right：右にある画像への回り込み解除 |
サンプルソース（画像サイズ指定）
<img src="../images/sample_img.gif" width="50" height="50">
サンプルソース（画像境界線の太さ指定）
<img src="../images/sample_img.gif" border="5">
サンプルソース（画像の回りに文章を回り込ませる）
<img src="../images/sample_img.gif" align="left"> |
| サンプル表示 |
|
|
|
ページトップへ |