HTMLの勉強を始めたときにHTMLのimgタグで指定する画像ファイルの保存場所をどのように作成すればいいか分かりませんでした。
覚えてしまえば画像の保存場所の作成は、複数のファイルをまとめるフォルダ作成と一緒に作成するようになるのですが、PCでフォルダやファイル作成に不慣れな方だと最初は悩むことになるんですね。
悩んだときの参考になればと思い、HTMLのimgタグに指定する画像の保存場所を作成するやり方をまとめました。
何か身近な例のほうが理解しやすいと思うのでローカルの画像ファイルを、画像の保存場所を作成して格納し、HTMLファイルにimgタグを記述してブラウザ表示するやり方を一連の流れにして説明します。
画像の保存場所を作るフォルダの作成
はじめにやることは画像の保存場所を作るためのフォルダ作成です。
PCのデスクトップにマウスを右クリックして「新規フォルダ」で作成します。
新規フォルダの名前は任意の名前で大丈夫です。作成例では「image-test」のフォルダ名でフォルダ作成してます。
「画像の保存場所を作るためのフォルダの作成」はこれで完成です。
ここで作成したフォルダ(image-test)というのは、画像の保存場所になるフォルダがもちろん入りますが、画像を表示するHTMLファイルやHTMLファイルのページをデザインするstyle.cssなどが入ります。
分かりやすく言うと、ブラウザにWebページとして表示するために必要なファイル集団をまとめて入れておく箱を作成しています。
HTLMで表示する画像の保存場所を作るためのフォルダを作成したので、次は画像の保存場所にするimgフォルダの作成をします。
画像の保存場所にするimgフォルダの作成
画像の保存場所にするimgフォルダの作成は、先に作成しておいたフォルダ(image-test)の中に作成します。
imgフォルダの作り方は、image-testフォルダをクリックして開きます。そして開いたimage-testフォルダの中でマウスを右クリックをして「新規フォルダ」でフォルダ作成します。
画像の保存場所にするのでフォルダ名は、「img」にします。任意のフォルダ名にできるので、画像が複数入ることを想定して「images」と分かりやすいフォルダ名にしても良いかと思います。
画像の保存場所にするimgフォルダの作成が完了です。
画像の保存場所にするimgフォルダを作成できたのでHTMLで表示する画像を入れることができます。それぞれローカルファイルとして保存している画像を、画像の保存場所「imgフォルダ」に移動します。
ローカルファイルの画像をコピーして画像の保存場所にペーストする移動方法が良いです。ローカルファイルの元画像をオリジナル画像として保管しておけるためです。
ちなみにローカルファイルの画像とはPC内に保存している画像ファイルのことです。この後に作成するHTMLファイルもPC内に置いているのでローカルファイルです。
画像を表示するHTMLファイルの作成
画像を表示するHTMLファイルは、画像の保存場所として作成した「image-test」のフォルダの中に作成します。フォルダ階層で言えば、画像の保存場所にするimgフォルダと同じ階層に配置します。
画像を表示するHTMLファイルの作成はHTMLファイル名をindex.htmlにして作成しておきます。作成にテキストエディタを使うと良いです。
上の画像はテキストエディタの「Visual Studio Code」を使用しています。HTMLファイルを作成してビックリマークと改行を使うだけで基本構造が作れるので、この後の説明に出てくるHTMLでimgフォルダの画像を表示する記述だけで済みます。
上の記事でテキストエディタVisual Studio Codeをインストールするやり方とHTMLファイルを作成するまでを紹介しています。記事をまたいでしまいますが、テキストエディタは今後も活用できるので参考にしていただけたらと思います。
ここまでの作成した流れでimage-testの親フォルダの中には、画像の保存場所にした「imgフォルダ」「imgフォルダ内の画像」とHTMLファイルの「index.html」の3つで構成されたimage-testフォルダが出来上がります。
HTMLでimgフォルダの画像を表示
画像の保存場所にしたフォルダは今回imgフォルダです。imgフォルダに入れた画像をHTMLファイルで表示できるようにします。
具体的にはHTMLファイルをテキストエディタで開いてHTMLのimgタグを記述します。imgタグは以下のように書いて画像表示します。
<img src="/img/smple-img.jpg" alt="">imgタグの書き方で特に重要なのが「src=”/img/smple-img.jpg”」の記述です。
srcはsourceを略で画像を表示するHTMLファイルから表示に使う画像の保存場所までの「経路」を相対パスで示す記述です。
例えば上記のsrc属性で指定した画像パスの記述のまま、index.htmlで表示する画像をimgフォルダ(画像の保存場所)からindex.htmlと同じフォルダ階層に移動してしまうと相対パスの経路が変わるので画像は表示しないです。
index.htmlで表示する画像は保存場所を移動していますし、imdex.htmlで表示しようとしている画像までの相対的なルートはimgフォルダを経路として通らないからです。
保存場所から画像が表示できたか確認
HTMLで表示する画像の保存場所にしたimgフォルダへの画像ファイルパスが指定できているか、HTMLファイルで画像が無事に表示できるか、ブラウザに表示して確認しておきます。
HTMLファイルをブラウザに表示するには、HTMLファイルをダブルクリックすると既定のブラウザでHTMLページとして表示するので画像の表示を確認できます。
このときブラウザで表示確認をしても画像が表示しない場合は、HTMLのimgタグのsrc属性で指定した画像の保存場所までのルートが間違えている、もしくは記述ミスの可能性が高いです。
今回のHTMLで表示する画像の保存場所を作成するやり方は最低限のフォルダ構成にしているので、画像が表示しない場合には作成したフォルダとファイルの配置と記述を確認し直してみてください。
また今後もしHTMLで表示する画像が表示できないというときには、今回のようにフォルダ構成を「表示する画像の保存場所のフォルダ」と「表示する画像のHTMLファイル」の最小構成にして検証しやすくすると画像のファイルパスを理解しやすくなります。
