どうも！ニシドラ(@nishidorablog)です。
この記事ではHTMLで画像ファイルの挿入する方法について解説します。
画像を挿入する際に使うタグは「imgタグ」で、「src属性」と「alt属性」という2つの属性を合わせて使います。
これらのタグ、属性の使い方をこの記事で解説しているのでぜひ最後まで読んでみてください。
前回の、見出しと文章の表示方法については、【h1~6・pタグ】HTMLで見出し・文章の表示方法を解説！でまとめています。
画像の挿入方法
imgタグの概要
imgタグの「img」は英語で画像を意味する「image」から来ています。
imgタグは単体では使わず、「src属性」と「alt属性」を使います。
「src」は英語で情報や情報源というような意味の「source」の略です。
「画像ファイルの場所」と「どの画像を表示するのか」を指定します。
「alt」は英語で代替テキストという意味の「Alternative text」の略です。
alt属性には画像がうまく表示されなかった場合に「画像の代わりに表示するテキスト」を書きます。
具体的なソースの書き方は以下のようになります。
src属性で表示する画像を指定。
もし、画像が表示されなかった場合に「サンプル画像」を表示するコードになっています。
画像の指定方法
HTMLやCSS、画像などのファイルを呼び出すために、ファイルが保存されている場所を指定することを「ファイルパス」と呼びます。
ファイルパスには「相対パス」と「絶対パス」の2種類あり、指定の方法が違います。
相対パス
相対パスとは呼び出し元(HTMLファイル)から見た、対象のファイルの位置を指定する方法です。
対象のファイルの位置によって指定の方法が違い、以下には3つの方法を紹介しています。
保存場所が同じ場合
基本的なパスの書き方です。
上画像のような状況(index.htmlとsample.jpgが同じ場所に保存されている)では、単純に「src」に表示させたい画像ファイル名を記述します。
別フォルダに画像ファイルがある場合
表示させたい画像ファイルが別のファイルに保存されている場合は、フォルダ(image)⇒ファイル(sample.jpg)の順に記述します。
フォルダ名とファイル名の間には「/」を挟みます。
呼び出し元と画像ファイルがどちらも別のフォルダにある場合
呼び出し元と標示させたい画像ファイルがどちらも別の場所に保存されている場合は「../」を使って指定します。
呼び出し元(index.html)から見て、1つ上の階層上がってから指定するというようなイメージです。
絶対パス
絶対パスは指定したい画像ファイルが別のWEBサイトに公開されている場合などに使う指定方法です。
相対パスで画像ファイルを指定したときは、保存されている場所を指定していましたが、絶対パスで指定する場合は保存されている位置は無視して、直接WEBサイトのURLを記述します。
「http://」や「https://」などから始まり、ドメイン名に続くファイルへのURLを書きます。
まとめ
今回の内容をまとめると以下のようになります。
- 画像を挿入するにはimgタグを使い、src属性とalt属性を指定する
- src属性には画像ファイルの場所を指定する
- alt属性には画像が表示されなかったときに代わりに表示するテキストを記述する
- ファイルパスには相対パスと絶対パスの2種類ある
コードを書いてブラウザーで確認してみると画像が表示されないことが勉強し始めのときは多々あります。
原因としてはファイルパスがうまく指定できていないことが考えられて、スペルミスや拡張子が間違っていたりします。
コードを書いていけば慣れてきますのでたくさん書いて覚えましょう。
次回は、「箇条書きリストの作成方法」について解説します。
コメント