[9-1] 画像を表示しよう img要素
最終更新日：2019年04月27日 （初回投稿日：2010年10月26日）
文字だけのサイトなんて、あまり見かけないですよね。
ということで今回は画像を貼ろう。
<img>要素を使います。
「img」は「image（イメージ）」の略。画像って意味。そのままですね。
| 使用する要素 | <img>（終了タグはありません） |
|---|
| 使用する属性 | <img src="URL" width="幅" height="高さ" alt="代替えテキスト"> |
|---|
★「属性」とは、HTML要素と一緒に使って機能を追加するものです。
★<img>要素には上記の他にも属性があります。全部いっぺんにやると ややこしくなるので、今回は上記の属性しか使いません。
その他の属性については、[71] img要素の srcset属性で画像を切り替えよう をご覧ください。
★さらに「グローバル属性」というのもあります。これはどんな要素でも共通で使える属性です。
グローバル属性については [39] 全要素に使える「HTML5グローバル属性」を見てみよう もご覧ください。
属性の「src」は「source（ソース）」の略です。（エスアールシーって読んでます）
「width（ウィズ）」は幅。
「height（ハイト）」は高さ。
「alt」は「alternate（オルティネイト）」の略です。「代替えの」という意味。オルトと読みます。
まずは画像を用意
まずは画像を用意します。
ファイル形式は、GIF、JPEG、PNGにして。自分で撮った写真とか何でもいいので用意してください。（スマホで撮るとたいてい PNG 。ファイル形式の変換などは各自で頑張って）
ちなみに本記事のサンプルでは下の「forest.jpg」を使用。JPEGファイルです。
サイズは 240px × 160px とちょっと小さめ。
PCブラウザ用の表示として説明しています（なるべく基本的なことから、と思い）
スマホなどの高解像度ディスプレイだと、上のサイズだと小さすぎてボケるね。幅が600〜1000pxくらいあるほうが、ほんとはいいんだけど。
画像を保存するフォルダを作ります
画像ファイルを「image」というフォルダを作って、その中に入れます。
「image」でも「img」でもOK。「画像が格納されているフォルダだな」と分かる名前にしておきます。こうしておけば便利です。
あなたが他人が作ったサイトの画像を編集する時（またはその逆でも）、imageとかimgとかの名前がついたフォルダの中を見れば、目的の画像ファイルを見つける事ができるから。
本記事では下記のように、フォルダ名「image」というフォルダの中に「forest.jpg」を置いた状況で説明します。
HTMLファイルの名前は、「index.html」にしています。
初期の [1] では「ファイル名はなんでもイイ」と説明するために「aaa.html」としていました。（なんでもイイんです。ほんとに）
ただ、「index」という名前は「デフォルトドキュメント」と言って、ファイル名を省略してもブラウザが表示するので、フォルダ内で最初に表示したいファイルはこの名前にするんです。アクセシビリティ的にも（SEO的にも）こうするクセをつけましょう。
「デフォルトドキュメント」の詳細は（ちょっとメモ）index.html という名のファイル をご覧ください
画像をHTML上に指定しよう
画像をHTMLに配置するとき、URL（その画像が置いてある場所）が重要になります。
このURLが間違っていると画像は表示されません。
さっそく画像をHTML上で配置してみましょう。
前回保存したファイルに <img>要素を入れます。
下記のハイライト部分（ <img src="image/forest.jpg" alt="森林イメージ" width="240" height="160"> ）をコピペして、src・alt・width・height はご自分の画像ファイルに合わせて変更してください。
<!DOCTYPE html>
<html lang="ja">
<head>
〜省略〜
</head>
<body>
<div> <!--本文START-->
<h1>画像を貼ってみよう</h1>
<img src="image/forest.jpg" alt="森林イメージ" width="240" height="160">
<p>
木曽路はすべて山の中にある。あるところは岨づたいに行く崖の道であり、
あるところは数十間の深さに臨む木曽川の岸であり、あるところは山の尾
をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。
</p>
<p>
東ざかいの桜沢から、西の十曲峠まで、木曽十一宿はこの街道に添うて、
二十二里余にわたる長い渓谷の間に散在していた。道路の位置も幾たびか
改まったもので、古道はいつのまにか深い山間に埋もれた。<br>
<span>（島崎藤村「夜明け前」序の章より）</span>
</p>
</div> <!--本文END-->
</body>
</html>
「src属性」は必須
「src属性」で、画像の格納場所（URL）をブラウザに教えます。で、ブラウザは指示どおりの画像を表示する。当然ですがコレがないと画像は表示されません。
URLの書き方で、フォルダとファイル名の間を「/（スラッシュ）」で区切るのを覚えてください。
URLの書き方には「絶対URL」と「相対URL」がありますが、上のコードでは「相対URL」で書いています。
URLについての詳細は [10] 絶対URL と 相対URL（絶対パス と 相対パス） でまとめていますので見てみてください。
「alt属性」はアクセシビリティ的に重要
「alt属性」で画像表示がされないブラウザ用に「代替えの文字」を入れます。
通信環境などの影響で ブラウザが画像を読み込めない時に、何の画像かわかるためのテキストなので、「アクセシビリティ」的に重要。
特に、画像にリンクがあった場合（こんなときね→ <a><img></a> ）、画像が読み込まれなかったらユーザはリンクをたどれないけど、alt のテキストがあればそれをポチッとできる。だからやっぱり大事。
ということで、単なる装飾用の画像じゃないなら alt属性は必須。
本文内容と関係ない装飾用の画像（ボタンの背景画像とか）なら <img>要素ではなく CSS（カスケーディング スタイルシート）で表示させます。（CSSの話はまた追々に）
アクセシビリティ（accessibility）とは「アクセスしやすさ」。どんな環境・状態（通信環境が悪い・目が悪いなど）でも利用しやすいこと。
SEO（Search Engine Optimization = 検索エンジン最適化）的にも アクセシビリティ は重要視されます。
PV（ページビュー）のカウントなどのために <img>要素を使って「width="0" height="0"」などとする場合は、alt属性は「空（alt=""）」にします。
<img src="http://○○○.net/0.gif?○○○○○" width="0" height="0" alt="">省略可能な「width属性」「height属性」
「width属性」「height属性」で表示する幅と高さをピクセルサイズで指定します。単位は不要です（ピクセルって決まってるので）
これは省略可能。というか、今はむしろ書かないケースのほうが多いかも。
大昔のブラウザ（ネスケって知ってる？ 知るわけないか）では、この属性がないとエラーになったので、だいぶ長いこと書くことを推奨されていたんですけどね。
保存したファイルの高さや幅を変える必要が無ければ不要。そのままのサイズで表示されます。
（サイズを変えたければ、例えば 幅400px 高さ200px の画像を小さくしたければ、width="200" height="100" なんて書けば指定したサイズに表示されます。でもこれはCSSでできるけどね）
幅や高さは CSSで指定するのが 今やスタンダードなので、もうあまりこの属性使わないかな。私はほとんど使いません。 Dreamweaver 使ってると勝手に入っちゃうけど、手で削除してますw
この属性を書く場合は「width="300" height=""」などのように「値」を空欄にしないで「width="300" height="180"」などと全部書きましょう。値が空欄だと 古い IE でエラーになるそうです。
本記事では、一応「基本」ということで、「width属性」「height属性」を書いた状態で話を進めています。
ブラウザでプレビューしてみよう
それではファイルを保存して、ブラウザでプレビューしてみましょう。
画像が指定した位置（見出し <h1>要素のすぐ下）にちゃんと表示されていますね。
次回予告
次回は、今回表示した画像の横に、テキストを回り込ませてみましょう。
これは CSS を使います。
- 関連記事
-
- [11-4] 別のページの特定の箇所にリンクしよう
- [11-3] 同じページ内でリンクしよう
- [11-2] リンクの文字の色を変えよう（CSS使用）
- [11-1] 他のページにリンクしよう
- （ちょっとメモ）index.html という名のファイル
- [10] 絶対URL と 相対URL（絶対パス と 相対パス）
- [9-2] 画像にテキストを回り込ませよう（CSS使用）
- [9-1] 画像を表示しよう img要素
- [8]コメントを入れよう
- [7] ＜div＞や＜span＞で特定の範囲を指定しよう
- [6] 段落に＜p＞要素を使おう（ついでにCSSで整えてみよう）
- [5] テキストを改行（＜br＞）してみよう
- [4] テキストに見出し（＜h1＞から＜h6＞）をつけてみよう
- [3] !DOCTYPE宣言をしよう
- [2] タイトル（title要素）を設定しよう
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
はまったこと
買ってきた本より素敵です。これからもよろしくお願いします。
最近はまったわなを、特に初級者の方に共有しようと思って書きます。
初心者のわな１
TeraPADでコード書いていて、metaで文字コードUTF-8を設定したのに、すべてのブラウザで文字化ける。悩みました。結局、エディターのコード設定がShft-JISだったのです。これをUTF-8に設定して書き直したらOKでした。
わな２
画像は.jpgでHTMLに指定してFFTPでアップしたのに、表示されません。これも悩みました。これはアップされた画像が、.JPGだったのです。ブラウザは大文字小文字は無視しますが、サーバーのLINUXは区別するのでした。いつも小文字で統一しているはずなのに、画像ソフトでいじった後、名前を変えて保存した時の拡張子には要注意ということでした。
