無料ホームページ作成情報 トップ > HTML入門 > 2-5）画像を設定するHTML
ご自分でホームページを作成・修正される方のために、ホームページ作成のためのコンテンツをご用意しました。すべて無料のコンテンツですのでお役立てください。なお、こちらのコンテンツに関してはサポートを行っていません。ご質問のメールなどはご遠慮いただければと思います。
画像を設定するHTMLについて
HTMLで画像を挿入したり設定したりします。
このページで最終的に作成するページの見本はこちらです。
画像を設定するタグ <img src="">タグ
<img src="">タグは画像を挿入したり設定したりするタグです。
<img src="">タグ
単純に画像を挿入します。
例）
<img src="image/obj_sample01.jpg">
alt属性で文字を入力
画像が映らない場合や、見ることが出来ない場合を想定して、「alt属性」で文字を入力します。
特に、ボタンなど文字を画像で作成した場合、必ず「alt属性」で文字をしましょう。
画像が表示されるときは、マウスポインタでポイントすると文字が表示されます。
画像が表示されない場合は、画像の代わりに表示されます。
「alt属性」は、「SEO対策」でも重要です。「SEO対策」では画像はまったく意味がないのですが、「alt属性」を使用すればキーワードを含めた説明文を入力することができます。
例）
<img src="image/button_more.gif" alt="もっと詳しく">
width属性とheight属性で横幅と高さの設定
横幅と高さを設定します。実際のサイズより大きく表示すると画像が荒く見えてしまいます。
ちなみに、この画像の実際のサイズは、「横幅107×高さ81」です。
width="*"、横幅を設定します。
height="*"、高さを設定します。
例）
<img src="image/obj_sample01.jpg" width="53" height="40">
<img src="image/obj_sample01.jpg" width="214" height="162">
border属性で外枠を表示
border属性で外枠を設定することができます。
外枠を表示する機会はあまりないと思いますが、画像にリンクを貼ったときに外枠が表示されてしまうことがあります。この時外枠を表示したくないときは「border="0"」と設定すると表示しなくなります。
例）
<img src="image/obj_sample01.jpg" border="10">
align属性で左右への文字の回りこみ
align属性で左右への文字の回りこみを設定できます。
align="left"、画像が左に来て文字は右を回りこみます。
align="right"、画像が右に来て文字は左に回りこみます。
例）
<img src="image/obj_sample01.jpg">
<img src="image/obj_sample01.jpg" align="left">
<img src="image/obj_sample01.jpg" align="right">
画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明。
画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明。
画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明。
hspace属性とvspace属性で回りこみ間隔の設定
文字の回りこみを設定します。
vspace="*"、縦間隔を設定。
hspace="*"、横間隔を設定。
例）
<img src="image/obj_sample01.jpg" vspace="10">
<img src="image/obj_sample01.jpg" hspace="10">
<img src="image/obj_sample01.jpg" hspace="10" vspace="10">
画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明。
画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明。
画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明。
align属性で文字と画像のレイアウト調整
align属性で文字と画像のレイアウト調整します。
わかりやすいように行に色を付けてあります。
また、ベースラインという意味を確認します。ベースラインとは英単語にある概念です。しかし、日本語にはベースラインという概念がなく、ブラウザではベースラインとボトムが同じ意味になることが多いようです。
alignなし、Internet Explorerではすべて下に揃えられる（「bottom」と同じ）。
align="top"、画像とテキストは行の上に揃えられる。
align="texttop"、画像はテキスト（文字）の上に揃えられる。
align="bottom"、画像はテキスト（文字）の下に揃えられる。
align="baseline"、画像はテキスト（文字）の下に揃えられる（「bottom」と同じ）。
align="absbottom"、画像とテキストは行の下に揃えられる。
align="middle"、画像はベースラインに中央揃えされる。。
align="absmiddle"、画像と文字はすべて中央に揃えられる。
例）
<img src="image/p_point01.gif">行頭に記号
<img src="image/p_point02.gif">行頭に記号
<img src="image/p_point01.gif" align="top">行頭に記号
<img src="image/p_point02.gif" align="top">行頭に記号
<img src="image/p_point01.gif" align="texttop">行頭に記号
<img src="image/p_point02.gif" align="texttop">行頭に記号
<img src="image/p_point01.gif" align="bottom">行頭に記号
<img src="image/p_point02.gif" align="bottom">行頭に記号
<img src="image/p_point01.gif" align="absbottom">行頭に記号
<img src="image/p_point02.gif" align="absbottom">行頭に記号
<img src="image/p_point01.gif" align="baseline">行頭に記号
<img src="image/p_point02.gif" align="baseline">行頭に記号
<img src="image/p_point01.gif" align="middle">行頭に記号
<img src="image/p_point02.gif" align="middle">行頭に記号
<img src="image/p_point01.gif" align="absmiddle">行頭に記号
<img src="image/p_point02.gif" align="absmiddle">行頭に記号
 行頭に記号（align=無し） |
行頭に記号（align=無し） ＜説明のための画像（align=無し） |
 行頭に記号（align=無し）＜説明のための画像（align=無し） |
| 行頭に記号（align="top"） |
| 行頭に記号（align="top"）＜説明のための画像（align=無し） |
| 行頭に記号（align="top"）＜説明のための画像（align=無し） |
| 行頭に記号（align="texttop"） |
| 行頭に記号（align="texttop"）＜説明のための画像（align=無し） |
| 行頭に記号（align="texttop"）＜説明のための画像（align=無し） |
| 行頭に記号（lign="bottom"） |
| 行頭に記号（align="bottom"）＜説明のための画像（align=無し） |
| 行頭に記号（align="bottom"）＜説明のための画像（align=無し） |
| 行頭に記号（align="absbottom"） |
| 行頭に記号（align="absbottom"）＜説明のための画像（align=無し） |
| 行頭に記号（align="absbottom"）＜説明のための画像（align=無し） |
| 行頭に記号（align="baseline"） |
| 行頭に記号（align="baseline"）＜説明のための画像（align=無し） |
| 行頭に記号（align="baseline"）＜説明のための画像（align=無し） |
| 行頭に記号（align="middle"） |
| 行頭に記号（align="middle"）＜説明のための画像（align=無し） |
| 行頭に記号（align="middle"）＜説明のための画像（align=無し） |
| 行頭に記号（align="middle"）＜説明のための画像（align="middle"） |
| 行頭に記号（align="absmiddle"） |
| 行頭に記号（align="absmiddle"）＜説明のための画像（align=無し） |
| 行頭に記号（align="absmiddle"）＜説明のための画像（align=無し） |
| 行頭に記号（align="absmiddle"）＜説明のための画像（align="absmiddle"） |
格安です！ホームページ制作をご依頼ください！！
ホームページ制作は専門用語も多く、わかりにくいことも多いかと思います。ホームページの制作方法や制作費用、アクセス数アップ（SEO対策）などわかりにくいことがあればお気軽にお問い合わせください。
