【初心者向け】HTML 画像IMGタグ の使い方を徹底解説

HTML

【初心者向け】HTML 画像IMGタグの使い方を徹底解説

2019年1月23日

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

HTMLの勉強をしているんですが、画像の設定の仕方がよくわかりません。どうすればよいんでしょうか??

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

 


 

画像タグ imgの基本的な使い方

HTMLの画像タグ

まずは、画像を表示する際に利用する<img>タグの基本的な使い方を説明していきます。<img>はImageの略です。
 

imgタグの基本的な書き方は以下のとおりです。
 

 

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

■上記のソースコード

 

画像ファイルの場所をsrc属性(sourceの略)で指定します。指定できる画像形式は、GIF・JPEG・PNGなどです。上記使用例では、「src="images/home.jpg"」のように画像の場所を指定しています。画像の指定方法は後述で説明します。
 

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

画像の場所(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で投稿・固定ページなどで画像を利用する場合、通常この方式で画像が設定されています。この他にも、CMS(ホームページ作成ソフトウェア)で画像を設定する場合はこの絶対パスの形式が利用されていることが多いです。
 

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

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

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

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

相対パスは、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属性」をご参照ください。
 

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

最後に、CSSの話になりますが、画像の大きさの指定方法についても補足します。
 

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

  • 画像の大きさを指定する widthプロパティ
  • 左揃え・中央揃え・右揃えを指定するtext-alignプロパティ
  • 画像の丸さを指定するborder-radiusプロパティ

 

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

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

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

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

■記述例

 

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

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

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

 

 
 

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

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

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

■表示例

 

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

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

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

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

■上記のソースコード

 

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

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

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

 
 

まとめ

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

画像の指定方法が少し難しい感じでしたけど、なんとかできそうです。

私も初めて勉強した頃は慣れない考え方で難しかった印象があります。ほとんど慣れですので、是非どんどん練習いきましょう。

 

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

合わせて読みたい記事

そのほかのHTMLの使い方を「【HTMLの基本を徹底解説!】初心者向けHTMLの基本とよく使うタグ一覧」に記載していますので、HTMLの勉強をしたい方は合わせてご参考ください。
 

CSSを使った装飾の仕方については「【CSSの基本】CSSの基本とプロパティ一覧」をご参照ください。

 

弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 

検索して記事を見つけたい方はこちら

検索して記事を見つけたい方はこちらにキーワードを入力してお探しください。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-HTML
-,

© 2021 WEBST8のブログ Powered by AFFINGER5