HTML とは。画像imgタグの使い方・作り方

本記事は広告が含まれる場合があります HTML

【HTML imgとは】画像イメージimgタグの使い方・作り方

今回は、HTMLの勉強を始めた初心者に、画像を挿入するタグ「imgタグ(イメージタグ)」の基本的な使い方・作り方を説明していきます。

html imgタグの説明
 

HTMLの勉強を始めたんですが、画像の表示のやり方がよくわかりません。

画像は文字と違って、画像の場所を指定しないといけないので少し難しいかもしれません。ここでは、imgタグの基本的な使い方を説明していきますね。

 

 

画像・イメージタグとはimgの基本的な使い方

imgタグ(<img>はImageの略)は、画像をWebブラウザ上に表示するHTMLタグの一つです。基本的な書き方は以下のとおり。
 

 
imgタグの末尾にスラッシュ(/)をつけて<img src="" alt="" />のように記述している場合もありますが、スラッシュはなくても大丈夫です。

■ブラウザでの表示例
imgタグを利用したブラウザ表示例
 

■上記のソースコード

 

html imgタグの説明
 

画像ファイルの場所をsrc属性(sourceの略)で指定します。指定できる画像形式は、GIF・JPEG・PNGなどです。

上記使用例では、「src="images/home.jpg"」のように画像の場所を指定しています(画像の指定方法は後述)。

altは画像を説明するテキストを入力します。日本語でもOKで、適切に説明文を入力することでGoogleなどの検索エンジンに画像の意味を伝えることができ、SEO対策にもつながります。
 

 

画像の場所(src属性)の指定方法

画像の場所の指定(src属性)の指定方法について説明します。

<img src="画像パス" alt="画像の補足説明" >

src属性で画像を示すための指定方法には大きく、「絶対パス方式」と「相対パス方式」の2つがあります。
 

画像の場所の指定方法
 

絶対パスとか相対パスとか、初めて聞くしなんだかイメージがしにくいですね。。

最初な慣れないですが、両方よく使うので、覚えておきましょう。

 

指定方式 概要
絶対パス 「src="http://xxxxxx/xxx/home.jpg"」のようにURLのような絶対的な基準で位置指定する方法
絶対パスは「〒xxx-xxxx 大阪市北区xxx番地1-1」のような住所特定のイメージ
相対パス src="images/home.jpg"のようにimgタグを記述しているファイル(HTMLファイル)を基準にして、画像がどこに在るかを相対的に示す記述方法
相対パスは「大阪駅から100m北のところにある建物」のような住所特定のイメージ

 
 

画像の場所を絶対パスで指定する方法

まずは、「画像の場所を絶対パスで指定する方法」から説明していきます。
 

絶対パスで指定する場合、基本的に「https://xxxxx/xxx/images/xxxx.png」のようにURLで指定します。
 

img srcの指定方法 絶対パス方式
 

■絶対パスの指定例

 

WordPressで投稿・固定ページなどで画像を利用する場合、通常この方式で画像が設定されています。

場所が決まっていれば記述は簡単ですが、絶対パスは画像の格納場所(URL)があらかじめわかっていないと記述できないというデメリットがあります。

次に紹介する相対パスでは、事前に格納先のURLがわかっていなくても(格納先のドメインが変更されても)、そのまま画像が表示されます。

HTML・CSSでホームページを作成していく場合は次の相対パスで記述する方が一般的ですので覚えておきましょう。

 
 

画像の場所を相対パスで指定する方法

次に「画像の場所を相対パスで指定する方法」をご紹介していきます。

相対パスは、imgタグを記述しているファイル(HTMLファイル)を基準に、画像がどこにあるか示す記述方法です。

イメージに例えると相対パスは「大阪駅から100m北のところにある建物」といった指定方法になります。

img srcの指定方法 相対パス方式
 

指定方法としては、大きく下記の3パターンを覚えおきましょう。

  • HTMLと画像が同階層にある場合
  • 画像がHTMLよりも下の階層にある場合
  • 画像がHTMLよりも上の階層にある場合

 

htmlと画像ファイルが同階層にある場合

imgタグ 画像の指定方法
 

htmlと画像ファイルが同じフォルダ(同階層のフォルダ)にある場合は、下記のようにsrc="画像ファイル名"と記載します。
src="拡張子含めた画像ファイル名"
 

■記述例

 
 

画像がhtmlより下のフォルダ階層にある場合

imgタグ 画像の指定方法
 

HTMLファイルから見て下のフォルダ階層(ここではimagesフォルダとします)にあるhome.jpgを指定する場合は「src=""images/画像ファイル名""」と記載します。
src="images/拡張子含めた画像ファイル名"
 

■記述例

 
 

画像がhtmlより上のフォルダ階層にある場合

imgタグ 画像の指定方法
 

HTMLファイルよりも一階層上がったフォルダにある画像を指定する場合、「src=""../画像ファイル名""」と記載します。
src="../拡張子含めた画像ファイル名"で指定 (「..」が一階層上がるを意味します。)
 

■記述例

 

意味はわかったんですけど、普段使わないかちょっと慣れないですね。

最初は仕方ないと思います。何回か使ううちに勝手に慣れていうので、慣れるまで練習してみてください。

 

画像の代替テキスト(alt属性)の指定方法

次に、画像の代替テキスト(alt属性)の指定方法について説明します。

<img src="画像パス" alt="画像の補足説明" >

alt属性は、テキストベースでGoogleが画像の内容を理解するための重要な項目です。alt(オルト)属性は、画像の内容をテキストで説明する項目で日本語入力も可能です。
 

画像のalt属性とは?

alt属性は、画像ファイルのコンテンツを説明するために使用されるものです。

Googleにテキストベースで画像の情報を伝えることができます。また、なんらかの理由で画像が表示されない場合に代わりにalt属性が表示されたり、スクリーンリーダーでWebページを読み上げる際に利用されます。

 

画像は鮮明に見えれば人には伝わるので意味がないように思えるかもしれませんが、ALT属性を適切に入力することで画像の内容を検索エンジンに伝えることができ、SEO対策になります。

画像のalt属性に対するSEO
 

ちなみに、WordPressの場合は、代替テキストというテキストボックスでalt属性を入力することができます。

WordPressで画像に代替テキストを入力
 

次に画像のalt属性(オルト属性)に関するSEOベストプラクティスの説明です。
 

■alt属性とファイル名についてGoogleが示すベストプラクティス
以下は、持ってこいをするダルメシアンの子犬の画像が写っていた場合のGoogleが示すベストプラクティスです。

×適切ではない例:
<img src="puppy.jpg" alt="">

◯適切な例:
<img src="puppy.jpg" alt="子犬">

◎最適な例:
<img src="puppy.jpg" alt="持ってこいをするダルメシアンの子犬">

 

ただし、ユーザーが混乱するようなキーワードの詰め込みや極端に長い文章は、かえって低評価につながるのでやめましょう。
<img src="puppy.jpg" alt="子犬 犬の赤ちゃん 小さな子犬 レトリーバー ラブラドール ウルフハウンド セッター ポインター ジャックラッセル テリヤ ドッグ フード ドッグフード 安い 子犬の餌" >
 

Google では、代替テキストに加えて、コンピュータ ビジョン アルゴリズムやページのコンテンツを使用して、画像のテーマを理解します。また、画像の代替テキストは、画像をリンクとして使用する場合にアンカー テキストとして使用できます。

代替テキストを設定するときは、キーワードを適切に使用して、ページのコンテンツのコンテキストに沿った、情報に富む、有用なコンテンツを作成するようにしてください。alt 属性にキーワードを羅列すること(キーワードの乱用)は避けてください。これによって、ユーザー エクスペリエンスが低下し、サイトがスパムとみなされる場合があります。
(※)画像検索に関するおすすめの方法 | Search Console ヘルプより引用

 

なお、そのほかの画像に設定するSEOについての詳細は「【初心者向け画像SEO】画像にできるSEO対策。ファイル名とALT属性」をご参照ください。
 

(補足)画像の大きさ・位置指定などスタイル調整

補足として、画像の大きさ・位置指定などスタイル調整についても補足します。
 

ここで説明するのは下記の項目です。

  • pタグやdivタグでimgを囲う方法
  • 左揃え・中央揃え・右揃えを指定するtext-alignプロパティ
  • 画像の大きさを指定する widthプロパティ
  • 画像の丸さを指定するborder-radiusプロパティ

 

なお、CSSの書き方の基本についての詳細は「【初心者向け】CSSの基本的な書き方・ルールを徹底解説」を合わせてご参照ください。
 

pタグやdivタグでimgを囲う

imgタグをpタグやdivタグで囲う例
 

imgタグは、よくpタグやdivタグで囲う場合があります。余白や横幅の調整、テキスト揃えなど、pタグやdivタグに対してcssで指定することが多いので覚えておきましょう。

※imgタグはインライン要素といってimgタグ同士が横に並ぶ性質があります。縦に並べたい時は、改行タグbrを使ったり、pタグやdivタグなどのブロックレベル要素で囲みます。

 

左揃え・中央揃え・右揃えを指定するtext-alignプロパティ

text-alignを利用して画像の位置揃え

左揃え・中央揃え・右揃えを指定するtext-alignプロパティについて説明します。

よくある使い方としてはpタグやdivタグなどでimgタグを囲み、pタグやdivタグに対してtext-align:xxxを指定します。

■表示例

 

■表示例(上から順に、左揃え・中央揃え・右揃え)
img の行揃えの例
 

text-alignの使い方については「【CSS text-alignの使い方】文字の行揃え・寄せ指定をする方法」をご参照ください。

画像の大きさを指定する width・max-widthプロパティ

cssのwidthプロパティを利用しない場合、画像は実際のサイズで表示されます。大きすぎたりする場合もあるので、その場合はwidthプロパティを利用しましょう。

書き方はstyle="300px;"やstyle="width:40%"のように書くことができます。
 

■記述例

 

■上記の表示例
みみずくの画像の横幅を調整した図
 

横幅を設定すれば、基本的に高さは自動で調整されます。

子要素(画像)が親要素がはみ出してしまう場合に注意

画像(imgタグ)を子要素にする場合、画像サイズが大きいと親要素(pタグやdivタグ)の幅を超えてしまう場合がよくあります。

下記は、画像の横幅が親要素の横幅を超えてしまうといったケースです。

横幅や高さをpx指定する際の注意点を表した図。

上の例では元々の画像の横幅が500pxなのに対して、親要素であるpタグやdivタグの横幅が300pxとなっている為、画像が200px分はみ出てしまっていることが分かります。

解決策として、imgタグにmax-width:100%;などを指定することがよくあります。max-width:100%を指定することで、画像サイズが親要素より大きくても親要素をはみ出ない(最大100%)ようになります。

width、max-widthプロパティの使い方については「【CSS widthとheightの使い方】横幅と高さの指定方法」をご参照ください。
 

画像の丸さを指定するborder-radiusプロパティ

border-radiusプロパティを利用すると画像に丸さを持たせることができます。とくに、「border-radius:50%;」で円形(長方形の画像の場合は楕円)にできます。
 

■正方形の画像にborder-radius:50%を適用した例
border-radius設定ありの場合の正方形の画像
 

■上記のソースコード

 

(※)border-radiusについて詳しくは「【初心者向け】CSS 枠線borderタグの使い方の基本を解説」をご参照ください。
 
 

CSSについては別で勉強しないとよくわからないわね。

CSSの書き方の基本についての詳細は「【初心者向け】CSSの基本的な書き方・ルールを徹底解説」を合わせてご参照くださいね。

 
 

まとめ

まとめです。今回は、HTMLの勉強を始めた初心者の方向けに、画像を挿入するタグ「imgタグ」の基本的な使い方から応用的な使い方までを説明しました。

html imgタグの説明

画像は文字と違って、画像の場所を指定しないといけないので少し難しいかもしれません。画像の指定方法(絶対パスと相対パス)について何回か練習して覚えておきましょう。

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-HTML