[9-1] 画像を表示しよう <img>要素

最終更新日:2017年09月15日  (初回投稿日:2010年10月26日)

文字だけのサイトなんて、あまり見かけないですよね。
ということで今回は画像を貼ろう。

<img>要素を使います。
「img」は「image(イメージ)」の略。画像って意味。そのままですね。

使用する要素 <img>(終了タグはありません)
使用する属性 <img src="URL" width="幅" height="高さ" alt="代替えテキスト">

「属性」とは、HTML要素と一緒に使って機能をUPする指定のことです。
src属性、alt属性は <img>要素専用のもの。width属性、height属性は他の要素でも使います。
グローバル属性というのもあります。グローバル属性は [39] 全要素に使える「HTML5グローバル属性」を見てみよう もご覧ください。

属性の「src」は「source(ソース)」の略です。私はエスアールシーって読んでます。
「width(ウィズ)」は幅。「height(ハイト)」は高さ。
「alt」は「alternate(オルティネイト)」の略です。「代替えの」という意味。オルトと読みます。

<img>には、上記の属性の他に「usemap属性」もありますが、これは「イメージマップ」を作る時に使う属性で今回は関係ないので省きます。
(「イメージマップ」については、[61] イメージマップ(リンク領域)を作ろう <map> <area> をご覧ください)

まずは画像を用意

まずは画像を用意します。
ファイル形式は、GIF、JPEG、PNGにして。自分で撮った写真とか何でもいいので用意してください。(スマホで撮るとたいてい PNG 。ファイル形式の変換などは各自で頑張って)

ちなみに本記事のサンプルでは下の「forest.jpg」を使用。JPEGファイルです。
森林イメージ
サイズは 240px × 160px とちょっと小さめ。

PCブラウザ用の表示として説明しています(なるべく基本的なことから、と思い)
スマホなどの高解像度ディスプレイだと、上のサイズだと小さすぎてボケるね。幅が600〜1000pxくらいあるほうが、ほんとはいいんだけど。

画像を保存するフォルダを作ります

画像ファイルを「image」というフォルダを作って、その中に入れます。
「image」でも「img」でもOK。「画像が格納されているフォルダだな」と分かる名前にしておきます。こうしておけば便利です。
あなたが他人が作ったサイトの画像を編集する時(またはその逆でも)、imageとかimgとかの名前がついたフォルダの中を見れば、目的の画像ファイルを見つける事ができるから。

本記事では下記のように、フォルダ名「image」というフォルダの中に「forest.jpg」を置いた状況で説明します。
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>
<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属性」は書いておくべき。

アクセシビリティ(accessibility)とは「アクセスしやすさ」。どんな環境・状態(通信環境が悪い・目が悪いなど)でも利用しやすいこと。
SEO(Search Engine Optimization = 検索エンジン最適化)的にも アクセシビリティ は重要視されます。

まじで省略可能な「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 を使います。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

はまったこと

初心者から初級者になったところと自覚しています。
買ってきた本より素敵です。これからもよろしくお願いします。
最近はまったわなを、特に初級者の方に共有しようと思って書きます。
初心者のわな1
TeraPADでコード書いていて、metaで文字コードUTF-8を設定したのに、すべてのブラウザで文字化ける。悩みました。結局、エディターのコード設定がShft-JISだったのです。これをUTF-8に設定して書き直したらOKでした。
わな2
画像は.jpgでHTMLに指定してFFTPでアップしたのに、表示されません。これも悩みました。これはアップされた画像が、.JPGだったのです。ブラウザは大文字小文字は無視しますが、サーバーのLINUXは区別するのでした。いつも小文字で統一しているはずなのに、画像ソフトでいじった後、名前を変えて保存した時の拡張子には要注意ということでした。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.