サイトの作り方無料講座4.画像の表示方法と管理方法トップメニューサイトの作り方無料講座4.画像の表示方法と管理方法おそらく画像が1つも挿入されていないWebサイトはほとんどないでしょう。今回は下記の2点について学習しましょう。画像ファイルを管理するためにディレクトリの構造を理解しようこの2つのことを理解しておくことは、Webサイト作りに欠かせない知識です。前回の講座で<a>タグについて解説しました。Webサイトに画像を挿入する方法は、<a>タグを使ってリンクを挿入するやり方に似ています。下記の画像を用意するとします(適当な写真などで構いませんのでご自身のデスクトップ上にご用意ください)。(今回用意した画像)デスクトップ上では下記のようになりますね。仮に、上記の画像ファイル名を「sample.png」とした場合、これをWebページ上に表示させるには、以下のコードを書きます。alt="この画像の説明文">(実際の表示)今回登場する<img>タグは、空要素に属するため、<p>タグの場合のような終了タグは必要ありません。その変わり、属性に「src」を指定する必要があります。画像を表示させるには、img+srcとうことを覚えておきましょう。その他、属性にaltを指定し、ここには画像の説明文を入れることが推奨されています。alt属性に画像の説明文を入れておくことで検索エンジンがそのWebページに書かれている内容を把握しやすくなると言われています。ちなみに、画像の大きさは自由に変えることができます。表示する画像の大きさをを指定したい場合は、<img>タグに横幅、縦幅を指定するための属性を追加します。alt="この画像の説明文">(実際の表示)さっきより、画像が大きく表示されましたよね。画像の横幅と縦幅を指定したい場合は、<img>タグに「with」「height」の属性に数値を入れて追加するわけです。縦幅と横幅の比率は、画像を右クリックして「編集」→「サイズ変更」で横幅・縦幅の比率を割り出すことができますから、「with」「height」を指定してみてください。画像ファイルを管理するためにディレクトリの構造を知っておこう複数ページのwebサイを作成する場合、ディレクトリの仕組みをよく理解しておくことが必要です。ディレクトリとは、つまり「フォルダ」のこと。前項で画像の挿入方法を学習しましたが、Webページのページ数が増えていくと、必然的に画像ファイルも増えていってしまいますよね。増えていった画像ファイルをすべてデスクトップ上に置いておくのには限界があります。画像ファイルをひとまとめに格納しておけるディレクトリ(フォルダ)を作り、画像ファイルをまとめて格納しておくとよいのです。今回はこのディレクトリ名を「img」とします。先ほどの「sample.png」に加え、下記の「sample2.png」という画像を用意したとします。(これがsample2.pngの画像)これら2つの画像を先ほど作成したディレクトリ「img」に格納します。この場合、格納した2つの画像をWebページ上に表示させる場合は、以下のコードを書きます。alt="サンプル画像2">(実際の表示)(ちなみに、上記2つの画像は横幅がともに640pxの画像です)このように、画像ファイル名(この場合、sample.pngやsample2.png)にディレクトリ名を指定することによって、挿入したい画像を呼び出すことができるわけです。このことは「(画像の)パスを指定する」と言います。これで画像ファイルをたくさん挿入するサイトを作る場合の管理もしやすくなるわけです。