サイト作り方無料
おそらく画像が1つも挿入されていないWebサイトはほとんどないでしょう。


ですので、今回は下記の2点について学習しましょう。
  1. 画像を表示する方法
  2. 画像ファイルを管理するためにディレクトリの構造を理解しよう
この2つのことを理解しておくことは、Webサイト作りに欠かせない知識です。


画像を表示する方法

前回の講座で<a>タグについて解説しました。


Webサイトに画像を挿入する方法は、<a>タグを使ってリンクを挿入するやり方に似ています。 まず、あらかじめ下記の画像を用意するとします(適当な写真などで構いませんのでご自身のデスクトップ上にご用意ください)。 (今回用意した画像) サイト作り方無料

デスクトップ上では下記のようになりますね。

サイト作り方無料

仮に、上記の画像ファイル名を「sample.png」とした場合、これをWebページ上に表示させるには、以下のコードを書きます。

html

<img src="sample.png" alt="この画像の説明文">
(実際の表示)



今回登場する<img>タグは、空要素に属するため、<p>タグの場合のような終了タグは必要ありません。その変わり、属性に「src」を指定する必要があります。
画像を表示させるには、img+srcとうことを覚えておきましょう。
その他、属性にaltを指定し、ここには画像の説明文を入れることが推奨されています。


alt属性に画像の説明文を入れておくことで検索エンジンがそのWebページに書かれている内容を把握しやすくなると言われています。


ちなみに、画像の大きさは自由に変えることができます。
表示する画像の大きさをを指定したい場合は、<img>タグに横幅、縦幅を指定するための属性を追加します。
例えば、先ほどの画像ファイル「sample.png」の横幅を1000px、縦幅を393pxに指定したい場合は、

html

<img src="sample.png" width="1000" height="393" alt="この画像の説明文">
(実際の表示)
この画像の説明文


さっきより、画像が大きく表示されましたよね。
画像の横幅と縦幅を指定したい場合は、<img>タグに「with」「height」の属性に数値を入れて追加するわけです。
縦幅と横幅の比率は、画像を右クリックして「編集」→「サイズ変更」で横幅・縦幅の比率を割り出すことができますから、「with」「height」を指定してみてください。


画像ファイルを管理するためにディレクトリの構造を知っておこう

複数ページのwebサイを作成する場合、ディレクトリの仕組みをよく理解しておくことが必要です。


ディレクトリとは、つまり「フォルダ」のこと。

サイト作り方無料

前項で画像の挿入方法を学習しましたが、Webページのページ数が増えていくと、必然的に画像ファイルも増えていってしまいますよね。


増えていった画像ファイルをすべてデスクトップ上に置いておくのには限界があります。


ですから、画像ファイルをひとまとめに格納しておけるディレクトリ(フォルダ)を作り、画像ファイルをまとめて格納しておくとよいのです。
ディレクトリ(フォルダ)作るには、デスクトップ上で右クリック→「新規作成」→「フォルダー(F)」。
今回はこのディレクトリ名を「img」とします。


例えば、先ほどの「sample.png」に加え、下記の「sample2.png」という画像を用意したとします。

(これがsample2.pngの画像) サイト作り方無料

これら2つの画像を先ほど作成したディレクトリ「img」に格納します。

この場合、格納した2つの画像をWebページ上に表示させる場合は、以下のコードを書きます。

html

<img src="img/sample.png" alt="サンプル画像1"><br><br>

<img src="img/sample2.png" alt="サンプル画像2">
(実際の表示)
サンプル画像1

サンプル画像2


(ちなみに、上記2つの画像は横幅がともに640pxの画像です)


このように、画像ファイル名(この場合、sample.pngやsample2.png)にディレクトリ名を指定することによって、挿入したい画像を呼び出すことができるわけです。


このことは「(画像の)パスを指定する」と言います。


これで画像ファイルをたくさん挿入するサイトを作る場合の管理もしやすくなるわけです。