画像を使う 【<img>タグ】:HTML入門

ブログが作りたい!HTML入門 > 画像を使う 【<img>タグ】:HTML入門

画像を使う 【<img>タグ】:HTML入門

画像を使う 【<img>タグ】:HTML入門

HTML入門(5)

記事「文章を書く(<p>タグ)」で、文章を書けるようになったことだし、次は画像を使ってみようと思います。

そうです。みんなが大好きな画像です。

100の言葉より、1枚の画像の方が、明確に考えが伝わることもありますから、画像はとても重要です。

何しろ、画像の有無で、アクセス数も大きく違います。

画像をより良く使うためにも、画像のタグをがっちり理解しておきましょう。お話は、次の順番で進みます。

▲ページの先頭に戻る

画像タグ(<img>タグ)とは?

1:<img>タグの基本形

<img>タグは、画像を表示させるときに指定するタグです。

基本形は、次のようになります。

<img src="(場所+画像ファイル名)" alt="(画像代替文字)" width="(幅)" height="(高さ)">

今までお話してきたタグとは、ずいぶんと違っているので、びっくり仰天、思わず失禁していることと思います。

  • タグが1つだけで完結している。(タグが開始タグ、閉じるタグとはなっていない)
  • 「属性」なるものを付ける必要がある。

しかし、慌てることなく、ちびることなく、今までと同じように、ひとつずつ見ていけば、何てことはありません。

ちなみに、どうして、「img」かと言えば、「image(映像)」から来ています。

▲ページの先頭に戻る

2:属性とは?

属性は、そのタグの詳しい情報を、指定するために使います。

例えば、<img>タグで、次のように何も属性がなかったら、どうでしょうか?

<img>

これでは、何も起こりません。

何しろ、どの画像を表示すれば良いのかさえ分かりませんから、少なくとも画像の場所とファイル名(src属性)だけでも伝えてあげる必要があります。

<img>タグの属性

つまり、あなたはブラウザに「何をどのように表示したいのか?」と問われているわけです。属性を明確に指定することで、期待する結果が得られます。

はっきりしない煮え切らない男は、嫌われてしまうのです。

属性は、画像タグ(<img>タグ)以外のタグにも存在します。その都度、よく使うものだけ、ご紹介いたします。

▲ページの先頭に戻る

3:<img>タグの属性

<img>タグの主な属性について、簡単に説明します。

src

「画像がある場所+ファイル名(ファイルパス)」を指定します。source(根源)を略して、srcです。

alt

画像が表示されない場合に代替として表示する文字を指定します。alternate(代替)を略して、altです。

width

画像の幅を指定します。widthは、「幅」を意味する英単語です。

height

画像の高さを指定します。heightは、「高さ」を意味する英単語です。

さらに、次の属性も覚えておけば、ばっちりです。

title

画像の説明を書きます。また、画像の上にマウスのカーソルを乗せたときにコメントとして表示されます。

border

画像にリンクを付けた場合の画像回りの枠線の太さを指定します。

あ、失礼。覚えるというか、ざっくり眺めて頭を慣らしておいてください。

こんな、一覧表なんかでゴリゴリ頭にねじ込んだって、覚えてもすぐ忘れます。実際に、使いながら覚えていきましょう。

border属性については、記事「リンクさせる 【<a>タグ】:HTML入門」にて書いています。

▲ページの先頭に戻る

本にたとえてイメージする

それでは、本を手に取って、開いてみてください。

次の写真のように、画像は、相手に伝えたい情報を、よりイメージしやすくさせる効果があります。

画像タグ(<img>タグ)

画像タグ(<img>タグ)も同様に、イメージを増幅させたり、文章を補完する役割を担っています。

ちなみに、この本は、株式会社ビービットさんの『ユーザ中心ウェブサイト戦略』です。ユーザビリティを中心とした内容になっています。

▲ページの先頭に戻る

実習 <img>タグ

1:画像を用意する

(01)

適当な画像を用意しましょう。

無料Web素材アイコン 花(white)

何でも良いですけれど、作業していて楽しくなるものがいいかな。(適当な画像がない場合は、無料Web素材をご利用ください)

(02)

画像は、決まったかしら?

そうしたら、適当な場所にフォルダを作成してください。フォルダ名は適当で構いません。

フォルダを作成

(03)

画像を、前述(02)で作成した「適当なフォルダ」に入れましょう。

画像をフォルダに入れる

▲ページの先頭に戻る

2:HTMLファイルを作成する

(04)

テキストエディタを起ち上げて、次のHTMLコードをコピーして貼り付けてください。

(05)

画像と同じ場所に、HTMLファイルとして保存しましょう。

HTMLファイルとして保存

HTMLファイル名は、「image-view.html」など、お好きなようにどうぞ。

拡張子を間違わないように気を付けてくださいね。「.html」ですよ。

▲ページの先頭に戻る

3:ブラウザで表示する

(06)

それでは、ブラウザで表示してみましょう。

ブラウザで表示

どうです!見事に画像が表示されません!

どうしてなのか、分かるかしら?それでは、HTMLコードを、改めて確認してみましょう。

そうです。<img>タグで、src属性(場所+ファイル名)を指定していません。表示されるわけがないのです。

この画像が表示されない状態も、覚えておいてください。

▲ページの先頭に戻る

4:src属性を指定してブラウザで表示する

(07)

今度は画像が表示されるように、<img>タグのsrc属性を入れてみましょう。

src

画像がある場所+ファイル名(ファイルパス)を指定します。source(根源)を略して、srcです。

例えば、画像ファイル名が、「free_flower_001.gif」であれば、次のようになります。

「あれ?場所を書いていないやないか」と思うかもしれませんが、HTMLファイルと画像ファイルが同じフォルダ内にある場合は、画像ファイルの場所の記述は省略できます。

画像ファイルの場所の指定には、絶対パスと相対パスの二通りの方法があります。お話が長くなってしまうので、また別の機会に書きます。

(08)

ブラウザで表示してみましょう。今度は、画像が表示されていると思います。表示されたかしら?

改めてブラウザで表示

▲ページの先頭に戻る

6:altを指定する

(09)

<img>タグに、alt属性を入れてみましょう。

alt

画像が表示されない場合に代替として表示する文字を指定します。alternate(代替)を略して、altです。

しかし、「代替文字」などと言われても、「はぁ?」という感じの人もいらっしゃるかと思います。

それでは試しに、HTMLコードを、画像が表示されない状態にして、代替文字を表示してみましょう。

src属性は記述せず、alt属性だけ記述します。(無理矢理、画像が表示されない状態にしているの)

(10)

ブラウザで表示してみましょう。画像の代わりに、「代替文字:お花」が表示されます。

代替文字表示される

alt属性を入れておくと、次のようなメリットがあります。

  • 画像が何らかのトラブルによって表示されない場合、あるいは表示に時間がかかっている場合などに、事前に代替文字だけ表示されます。
  • 音声ブラウザを使用しているユーザが、代替文字によって画像の概要を理解することができます。
  • SEO対策上、効果があると言われています。

alt属性は、入れるのが手間なので面倒だと感じるかもしれませんが、入れておく方がいいんだなぁ。

(11)

誤解のないように書いておきますが、通常は、もちろんsrc属性も記述します。このsrc属性とalt属性の2つは、<img>タグでは必須です。

▲ページの先頭に戻る

7:width属性とheight属性を指定する

(12)

次は、画像にwidth属性(幅)と、height属性(高さ)を指定してみましょう。

width

画像の幅を指定します。widthは、「幅」を意味する英単語です。

height

画像の高さを指定します。heightは、「高さ」を意味する英単語です。

画像の大きさは、30×30なので、次のように指定します。

(13)

ブラウザで表示してみましょう・・・でも特に変化はなく、表示上はそのままです。

表示上はそのまま

width属性とheight属性を指定しておくメリットは、大量に画像を表示する画面などで、事前に幅と高さが固定できることです。

また、width属性とheight属性を実際とは違う値にすることもできます。例えば、それぞれ倍の60に指定すると、次のようになります。

width属性とheight属性を実際とは違う値にする

ただ、画像を実際より大きく表示すると画質が落ちるし、小さく表示すれば、それは意味のない無駄な行為と言えます。

画像の大きさを、実際とは違う値にすることは、あまり一般的ではありません。

▲ページの先頭に戻る

8:title属性を指定する

(14)

title属性も指定しておくと、便利な場合があります。

title

画像の上にマウスのカーソルを乗せたときに表示されるコメントを指定します。

<img>タグのtitle属性には、画像の説明を書きます。

(15)

ブラウザで表示してみましょう。

画像の上にマウスのカーソルを乗せてみてください。title属性で指定した文字が表示されます。

title属性で指定した文字が表示される

IEの場合、alt属性でも画像の上にマウスのカーソルを乗せると文字が表示されるので、機能を混同しがちです。

しかし、それはIEの独自の動作です。alt属性は代替文字を表示させるために使います。勘違いしないように気を付けましょう。

▲ページの先頭に戻る

すべての画像にalt属性は必要か?

「画像タグ(<img>タグ)に、alt属性を記述することは必須です」と書きました。

しかし、考えてみると、ホームページには、いろいろな所に画像が使われているので、「alt属性は、いらないのではないかしら?」という画像も存在します。

例えば、背景のデザイン、あるいはメニューなどのアクセントとして使っている場合もあります。

メニューサンプル

これらの代替文字を入れる必要性が感じられない画像に関しては、一般的に「alt=""」というように空(から)記述します。

あるいは、HTMLコードをチェックするツールなどでは、エラー表示されることがあるので、「alt=" "」というように半角スペース(もしくは全角スペース)を入れる場合もあります。

つまり、やはり「画像タグ(<img>タグ)に、alt属性を記述することは必須です」が、中身を書かない画像も存在するということです。

▲ページの先頭に戻る

次回予告

次回は、リンクタグ(<a>タグ)について書きます。

▲ページの先頭に戻る

関連記事

HTMLに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/03/20 更新日:2008/03/20

« 「文章を書く 【<p>タグ】」|「リンクさせる 【<a>タグ】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

こんばんは!

ソフトに頼ってばかりいると、こういう間違いに気づきにくいですね。
(私のことです↑)
altは立替でtitleが説明なんですね。
FC2のブログで記事を書くときに、画像を挿入するとタグを勝手に書いてくれますが、タイトル部分に入れた文字はalt属性になってるので、それで良いものだと思っていました(^^;)ホントにFirefoxでは表示されませんね。

とても参考になりました!ポチポチ

alt属性とtitle属性

ichimarugo-いちまるごさん、こんにちは。

そうですね。
ソフトが、alt属性もtitle属性も書いておいてくれると、
あまり気にしないですよね。

それぞれ、代替と説明を書くにしても、
それじゃあ、どんな風に書けば良いのか?というと、
ちょっと使い方は、難しい感じがしています。

私は、とりあえず、両方入れて、どちらも同じ内容にしています。
考えている余裕がないんだなぁ。(´Д`;)ウーン

再読すると、また新たに分かる事がありますね

こんにちは! \(^^) KumaCrowさん
PCの「メモ帳」によく使うタグをまとめる作業をしておりますが、画像タグを整理する為に再見しました。

alt属性の必要性
携帯端末からの閲覧に配慮して、画像の上に題名や説明を入れていました。
こうすれば表示されない人は表示するか決められるし、視覚障害者の方も分かるだろうと alt は空白にしていました。
こういう対応をしていれば、空白でも大丈夫でしょうか?

無くても画像は表示されるし、上のような工夫をすれば要らないと思ったので何と最近は属性その物を削除していました。
必須なのですね ・・・ 。
必須な理由を踏まえて、この属性に書く内容や空白にするか否かを考えたいと検索しました。
「とにかく決まりだから」としか言いようがなく見えましたが、そのような理解でよいのでしょうか?


title属性の内容
今は “「リンク先サイト名」へ別窓リンク” や “マウスを合わせると画像が大きくなります” 等のナビゲーション的な内容を入れています。

私の記事は長くてひたすら読む内容なので、マウスはスクロールバーに置かれている事がほとんどだろうと思います。
なのでマウスが触れなくても見れば分る様に、リンク箇所は色を変える事で ・ 画像が大きくなるのは画像周りを枠で囲む事で、対応しようと思っています。
そういう決まりをブログ案内等で説明した上で、統一して運用していれば、ユーザーには分かる事ではあります。

だから title を個々に入れるのは、面倒さの割に意味が薄いのかも知れません。
でもFC2のリンクを貼るボタン [URL] の入力窓へ、IMEの単語登録機能やコピペを使えば手間が少なくできると感じました。

端末も携帯電話からスマホ、アイパット?等と色々あり、表示の相違の把握ができないので、全てに良いようには無理かもしれませんが、少ない気遣いで可能な範囲で見やすく工夫したいですね。
では ( ・∀・)ノ

ご質問について

にゃおさん、こんにちは!( ・∀・)ノ
コメントありがとうございます。

現在、ご質問にお答えしている余裕がありませんので、
ご協力いただきたく、よろしくお願いいたします。


コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/244-b73f86eb
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて