MB-Support

パソコン初心者のサポートページ

画像を表示する方法 <img src="">

 ホームページと画像の位置関係を把握できたら、画像を表示するパスは理解できます。



画像を表示するタグ
  <img src="画像の保存先">

ホームページに画像を表示する場合は、HTML ソースに <img src="画像の保存先"> を入力します。 画像の保存先の指定方法は 画像表示タグを覚える前に を参照します。



HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<img src="画像のアドレス" />
</body>
</html>

ブラウザ


画像を中央に配置する
  <center>〜</center>

<img src="画像の保存先"> を <center> 〜 </center> で囲みます。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<center>
<img src="画像のアドレス" />
</center>
</body>
</html>

ブラウザ


画像を右端に配置する
  <div align="right">〜</div>

<img src="画像の保存先"> を <div align="right"> 〜 </div> で囲みます。 もちろん、left や center も可能です。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<div align="right">
<img src="画像のアドレス" />
 </div>
</body>
</html>

ブラウザ


画像を2個並べる

<img src="hpgjpeg/hplogo.JPG"> を続けて 2 回書きます。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<img src="画像のアドレス" /><img src="画像のアドレス" />
</body>
</html>

ブラウザ


画像の間に全角スペースを入れる。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<img src="画像のアドレス" />    <img src="画像のアドレス" />
</body>
</html>

ブラウザ


画像サイズを指定する
  width="横幅" height="縦幅"

画像サイズを指定すると、何らかの事情で画像が表示できない時に、ページ全体のデザインを損ねる状態を防げる事と、ホームページを表示する時間を短縮できます。 これは、画像よりもテキストの方が先に読み込みが完了されるため、画像のダウンロードが終わる前に、ページ全体の構成が表示されます。

この時、画像サイズの指定が無い場合、画像がダウンロードされてから再びページ全体の再構成をするため、表示が遅くなります。 画像サイズの指定があった場合は、テキストが読み込まれるのと同時に、画像部分のスペースも解釈されるので、表示がスムーズになります。 画像のサイズ指定は必ず実行しましょう。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<img src="画像のアドレス" width="244" height="77" />
</body>
</html>

ブラウザ


画像のサイズを調べるには、以下のページを参照します。

画像のサイズを確認する方法



画像に説明を付ける
  alt="テキスト"

画像に説明文を追加するには、alt="説明文" を <img> タグに加えます。表示された画像にポインタを乗せると、説明文が表示されます。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<img src="画像のアドレス" alt="MB-supportのロゴ" width="244" height="77" />
</body>
</html>

ブラウザ


代替テキスト

閲覧者の利用しているブラウザが、画像を表示しない設定にしている場合もあります。 画像に説明文(代替テキスト)があれば、閲覧者に画像の内容を知らせる事ができます。 また、ホームページを読み上げる機能も、この説明文を参照します。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項