ネットで副業挑戦中!

Welcome!
画像の表示

現在位置 : トップホームページを作ろうHTMLで編集>画像の表示

画像の表示

ホームページに画像を取り入れてみよう!
ホームページで使うことが出来る画像の種類は「gif」形式か「jpeg」(jpg)です。
「gif」は小さいマーク、ロゴ、ミニバナー等「jpeg」は主にスキャナやデジカメの写真に適しています。

<img src="img/jet.gif">       

画像を表示するには、<img src="ファイル名">と記述します(終了タグ不要)。

画像の大きさ

画像を取り入れれたら大きさを変えてみよう!

<img src="img/jet.gif" border="0" width="50" height="30">    Welcome!
<img src="img/jet.gif" border="0" width="100" height="60">   Welcome!
<img src="img/jet.gif" border="0" width="150" height="90"> Welcome!

画像のサイズを指定するには、IMG要素に幅(width)と高さ(height)の各属性をつけます。
属性値は、ピクセルで指定します。
画像を元の大きさのままで使う場合でも、幅(width)と高さ(height)を指定することをお勧めします。
サイズを指定しておけば、画像のページ上での位置をブラウザが適切に把握するので、ページの読み込みが早くなるからです。

画像を線で囲む

画像を線で囲んでみましょう!

<img src="img/jet.gif" border="0" width="100" height="60">    Welcome!
<img src="img/jet.gif" border="2" width="100" height="60">    Welcome!
<img src="img/jet.gif" border="5" width="100" height="60">    Welcome!

画像の枠の太さを指定するには、IMG要素にborder属性をつけます。属性値はピクセルで指定します。
画像にリンクを設定すると、自動的に枠が表示されてしまいますが、border="0" と指定しておけば枠は表示されません。

画像の配置

画像を左寄せ、中央揃え、右寄せに配置してみよう!

左寄せ
  <div align="left">
  <img src="img/jet.gif" border="0" width="100" height="60">
  </div>

中央揃え
  <div align="center">
  <img src="img/jet.gif" border="0" width="100" height="60">
  </div>

右寄せ
  <div align="right">
  <img src="img/jet.gif" border="0" width="100" height="60">
  </div>


文字の配置と同様に、<div align="配置"><img src="ファイル名"></div> の配置部分に 左(left)、中央(center)、右(right)を入れることで文字の配置を変えることができます。

Copyright (C) 2006-2007 ネットで副業挑戦中!, All rights reserved.
何でもネットショッピング