Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
HTML5
入門編
- トップページ
- HTML5入門編 - 画像を表示させるimgタグと属性
画像を表示させるimgタグと属性
みなさまどうもこんにちは。
続きまして画像を表示させてみましょう。
前回は『文字の表示』について学びましたね。今回は画像になります。『文字の表示』と違い少しだけ難しい項目がでてきます。その理由は画像を外部から読み込ませる必要があるからです。
文字はHTMLファイルと同じテキストファイルなので、HTMLファイルの中に普通に記述することができました。しかし画像はテキストファイルではないのでHTMLファイルの中に直接記述することはできません。画像ファイルを別に用意してそれを読み込ませる必要があります。ここがちょっと難しいところですが頑張っていきましょう。
まずは画像を用意する必要がありますので準備をしていきます。
一般的にウェブで使われる画像の形式(フォーマット)として『JPEG』(ジェイペグ)、『PING』(ピング)、『GIF』(ギフ もしくは ジフ)の三種類があります。今回の記事ではJPEGというものを使っていきます。画像はこちらを開いたあと右クリックして『画像を保存』という項目を選んでダウンロードしてください。手持ちのJPEG画像があればそれを使って頂いても構いません。ただし、その場合は画像ファイルの名前を『sample.jpg』に変更して頂きたいです。
※各画像フォーマットの解説は少し長くなるのでこちらの記事で解説しています。
ダウンロードした画像ファイルをみなさんのデスクトップにある『testフォルダ』にいれましょう。つまり『index.html』と同じ場所(階層)に入れる、ということですね。以下の様な状態です。
※『testフォルダ』ってなんだっけ？って思った方はこちらの記事へどうぞ
これで画像ファイルの準備はOKです。
続いて画像を表示するために使うタグについて確認しましょう。画像の表示に使うタグは『imgタグ』です。imgタグは空要素タグなので閉じタグを置く必要はありません。
imgタグはこのように記述します。
<img src="ここにファイルの場所を記述" alt="ここに代替テキストを記述">
imgタグは『画像ファイルの場所』と『代替テキスト』(だいたいてきすと)をセットで記述しないといけません。画像ファイルの場所は『src属性』で指定し、代替テキストは『alt属性』で記述します。src属性は単純に「エスアールシー属性」、もしくは『Source』の略なので「ソース属性」と呼ばれます。alt属性は「オルト属性」が一般的ですね、『Alternate』の略になります。
さて、ここで『属性』というものが出てきました。HTMLタグは属性を使って色々な値を付与することができます。要素にオプションを設定するようなイメージですね。src属性やalt属性以外にも『id属性』、『class属性』、『name属性』など様々な属性があります。img要素はsrc属性とalt属性の設定は必須項目なので、img要素の記述方法を学ぶ前にHTMLタグの属性の書き方を学んでいきましょう。
HTML要素の属性の記述方法
まず半角英数字でHTMLタグを記述します。HTMLタグは何でも良いのですが今回はimgタグとalt属性を例にあげて記述していきますね。
<img>
次に半角スペースをあけてalt=""と書きます。半角スペースじゃないとダメで、『alt =""』という風に余計なスペースも入れてはいけません。もし余計な半角スペースをいれてしまってもブラウザは的確に処理をしてくれることがほとんどですが厳密には間違いです。
<img alt="">
『"』(ダブルクオーテーション)は『'』(シングルクォーテーション)に置き換えても問題ありません。
<img alt=''>
ただし以下のように『"』と『'』を両方使ったりしてはダメです。それは囲えてません。どちらか一つで囲うようにしてください。
<img alt="'> <!-- これはダメです -->
属性の書き方はこんな感じになりますね。
ではそれぞれの箇所の名前の確認です。src属性の『src』という部分や、alt属性の『alt』という部分は『属性名』と呼びます。そして属性の中身を『値』と呼びます。『"』か『'』に挟まれた部分になりますね。
属性の記述方法は以上となります。
では続いてalt属性とsrc属性それぞれの記述方法などを確認していきましょう。
alt属性
alt属性の値に記述するのは『画像のタイトル』か『その画像が表すものを説明した文章』となります。例えば「トップページへ戻る」や「◯◯株式会社概要」、「今日のこんだてのビーフシチュー」といったところですね。
alt属性とは先程もちょろりと解説しましたが画像が表示されなかった場合に代わりに表示される『代替テキスト』と呼ばれるものを設定する属性です。これはHTML5で必ず入れるように規定されている、という背景もありますが、一番の目的は『検索エンジン対策』です。昨今の検索エンジンはロボット型サーチエンジンという自動で情報収集するプログラムで構築されており、その検索エンジンに何の画像なのか教えてあげるためにalt属性を記述します。例えば女の子の写真があったとして、人間ならば「女の子だ！」とすぐに認識できますが、検索エンジンは画像を視認できないのでそれが何の画像だか分かりません。そのため検索エンジンはalt属性の値を読み取って何の画像か判断しています。
昔のHTMLではalt属性の値に画像のタイトルを入れればOKだったのですがHTML5では少し広域になり「その画像が表すものを説明した文章を入れなさい」という仕様になっています。
ただしすべての状況で『その画像が表すものを説明した文章』を入れられるとは限りません。
なので基本的には『画像のタイトル』を入れ、説明が必要ない画像などでは『空文字列』(alt=""というように値に何も入れないこと)にしてしまってOKです。alt属性に空文字列を入れることはHTML5の仕様において認可されています。
では記述してみましょう。以下のようにalt属性を記述します。
<img alt="これはサンプル用の画像です。">
これでalt属性の値が設定されました。alt属性の値に文字をいれるだけでOKなのでここは特に難しくないかと思います。
src属性
imgタグはsrc属性で画像の場所を指定します。src属性の値は『パス』というもので指定するのですが、これがかなりややこしく解説が長くなるので次の記事で解説していきます。というわけで今回は触りだけ記述してみましょう。以下のように記述してみてください。
<img alt="サンプル画像です" src="sample.jpg">
できましたでしょうか。そうしたら今まで勉強で書いてきたHTMLファイルに組み込んでみましょう。表示させる部分なのでbodyの中に入れれば良いですね。
全体のソースはこのようになります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ボクの初めてのウェブサイト</title> </head> <body> <img alt="サンプル画像です" src="sample.jpg"> </body> </html>
ではこちらのソースを保存して皆さんのブラウザで開いてみましょう。画像を同じ階層に入れておくことを忘れないようにしてください。
しっかり画像が表示されましたでしょうか。先ほどダウンロードした画像か、もしくはみなさんがご自身で用意した画像が表示されていればOKです。
alt属性とsrc属性についての基本的なところは大方問題ないでしょうか。ではここでちょっと注意点です。ひとつのHTML要素に複数の属性を記述する場合は必ずそれぞれの属性ごとに半角スペースを空けて記述するのを忘れないようにしてください。
<img alt="サンプル画像です" src="sample.jpg"> <!-- これはOKです --> <imgsrc="sample.jpg"alt="これはサンプル用の画像です。"> <!-- これはダメです -->
複数の属性を記述する場合、属性の順番は自由となりますので以下のように順番が反転しても問題ありません。
<img src="sample.jpg" alt="これはサンプル用の画像です。">
属性を記述するときは以上のことに注意してください。
ではこの辺でimgタグの基本的な記述方法等についての解説を終わりたいと思います。色々ややこしいことがあったかもしれませんが問題はなさそうでしょうか。
次の記事ではsrc属性のところで出てきたパスについて色々解説をしていきます。『URL』、『絶対パス』や『相対パス』とかいったところですね。
次からはちょっと難しい項目が続きますが頑張っていきましょう。
ではー。
この記事は桜舞が執筆致しました。
著者が愛する小型哺乳類 |
桜舞 春人 Sakurama HarutoISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。 |
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
