ホームページ作成 - 画像を表示する

ホームページ作成ＴＯＰ > 画像 > 画像を表示する

画像を表示する

画像をページ内に表示させる方法です。

sample

ＨＴＭＬ　<img src="画像" alt="">

画像を指定した場所に画像を挿入したい場合には、<img scr="画像" alt="">にて挿入します。

alt="" は画像の表示が失敗した等の場合に変わりに表示させる言葉です。特に指定しない場合には、この例の様に空白にしますが、この alt="" は必須記述ですので、省略しないで下さい。

また、画像のサイズをwidth="サイズ" height="サイズ"にて指定しておくと表示スピードの向上にもつながりますので、画像サイズは入れる様にしましょう。

書き方は


<img src="画像" width="サイズ" height="サイズ" alt="">

こうなります

ホームページ作成ＴＯＰ > 画像 > 画像を表示する > このページのＴＯＰ　▲

スタイルシート background-image:url(画像);

スタイルシートは、本来『これを、どうするか』といったもので（スタイルシートの基本を参照願います。）、画像の場合『この画像をどうするか』といったスタイルを設定する為、画像自体を表示するものはありませんが、背景として指定する事で画像の表示が可能です。詳細はＴＯＰ > 画像 > 背景に画像を表示する（ページ全体）を参照願います。

また、この方法はメニュー部分を画像で表示したり、段落やブロックに入れたりと様々な場面で使用する事ができます。

【注意 mac 】
このbackground-image:url(画像); を記述する際に mac Macintosh側のブラウザの多くで、url(画像)をurl('画像')として'を付けた方法にて記述すると、表示されない事があります。

背景として表示させるので、通常では下記の様に↓繰り返し表示されます。

これを繰返し表示しない様にする事（ＴＯＰ > 画像 > 背景に画像を表示する（繰返さない））を同時に指定する事で１つの画像が表示できます。

下記は<div>～</div>の背景として設定します。

要素に直接書く

書き方は


<div style="background-image:url(画像);background-repeat:no-repeat;
height:高さ;width:幅;"></div>

headに書く

書き方は


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

        div     {
                background-image:url(画像);
                background-repeat:no-repeat;
                height:高さ;
                width:幅;
                }

 -->
 </style>
 </head>
 <body>

        <div></div>

 </body>
</html>

こうなります