画像をページに貼り付けよう

ホームページに画像を貼り付けるための画像を用意します。その画像ファイルをホームページ用のフォルダ内に保存しておきます。

今回は、HTML文書ファイルと同じフォルダに「001.jpg」という画像ファイルとHTML文書ファイルの入っているフォルダに下の階層となるフォルダ「sub」というフォルダを作成し、そのなかに「002.jpg」という画像ファイルを入れました。

<body> ~ </body>の間に以下のように記述して見ましょう。

<img src=”001.jpg” alt=”写真001番” width=”300″ height=”225″><br>
<img src=”sub/002.jpg” alt=”写真002番” width=”300″ height=”225″>

どうでしょうか?このように表示されましたか?
記述のルールは、

<img src=”画像のファイルパス” alt=”画像の説明” width=”幅” height=”高さ”>

となります。画像のファイルパスは、上の例のように、HTML文書と同じフォルダ内であれば、ファイル名のみ。 画像用のフォルダなどを作成し、その中にファイルがある場合は、「フォルダ名/ファイル名」と指定してやります。 フォルダの階層がいくつ下にいっても同じようにします。

(例)<img src=”フォルダ1/フォルダ2/フォルダ3/ファイル名”…>

画像ファイルが上の階層に

では画像ファイルがもしHTMLファイルよりも上の階層にあったらどうしましょう?

そんなときはこのように記述します。

<img src=”../001.jpg” alt=”写真001番” width=”300″ height=”225″><br>
<img src=”002.jpg” alt=”写真002番” width=”300″ height=”225″>

どうですか?同じように表示されていますか?

それでは続いて画像の貼り付ける位置をいろいろ変えてみましょう。

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録