DHC-オンライン講座
文系の人にもわかる HTML入門

Lesson 4 画像の配置

Lesson 3まででリンクも出てきてだいぶウェブページらしくなりましたが、もうひとつ、ウェブページに欠かせない要素があります。 画像(image)です。 1990年代はじめまでのインターネットでは文字情報のやり取りしかできなかったのですが、ウェブページの仕組みが考案されて美しい画像が加わり、リンクによって相互に行き来できるようになったことで、一気にインターネットが世界中に広まったのです。

画像(イメージ) ―― <img src="filename" ...>

Lesson 3で見たリスト3-2(図4-1)のエッセイのページに、ちょっとした画像を加えてみましょう。 画像は<img>タグを使って指定します。 リスト3-2のessay.htmlの蔘鶏湯の本文の頭に画像を入れてみます。 リスト2-2では次のようになっていました。

<h3><a name="samgaetang"></a>蔘鶏湯(サムゲタン)</h3> 
<p>
去年半年ほど韓国で暮らしました。 韓国の食べ物はほとんど辛くて私の口には合わないものが多くて困ったのですが、...... 
</p>
図4-1 画像を入れる前

ここに<img>タグを指定して画像を入れてみましょう。

<h3><a name="samgaetang"></a>蔘鶏湯(サムゲタン)</h3> 
<p> 
<img src="03html/images/samgaetang.gif" width="148" height="236" align="right" alt="蔘鶏湯のイラスト">
去年半年ほど韓国で暮らしました。 韓国の食べ物はほとんど辛くて私の口には合わないものが多くて困ったのですが、...... 
</p>

本文の段落の最初に加えた次の部分が画像を指定するタグです。

<img src="03html/images/samgaetang.gif" width="148" height="236" align="right" alt="蔘鶏湯のイラスト">

上のHTMLのコードで想像できるかもしれませんが、画像のファイルはessay.htmlのファイルの内部に埋め込むのではなく、別ファイルに画像を用意して、そのファイルの名前をsrc属性として指定します。 ここでは、imagesというフォルダの下にあるsamgaetang.gifという名前の画像ファイルを利用しています(図4-2)。 そのファイルには、図4-3のような画像が入っています。

図4-2 画像の指定。 src属性で別ファイルを指定
図4-3 samgaetang.gifファイルの画像

このように、ウェブページに表示される文字のファイル(htmlファイル)と画像のファイルを別のファイルにしておくことにより、画像が表示できない携帯電話の画面でも文字情報だけは読むことができるわけです。

画像ファイルの指定を加えたessay.htmlのファイルをブラウザで読み込むと、図4-4のようになります。 ちょっと絵が入るだけで、だいぶ雰囲気が変わりますね。

図4-4 画像の入ったページ

src属性

画像を指定する<img>タグにはいくつか属性が指定できますが、必須のものはsrc属性です。 srcは「根源」「もと」「源泉」などの意味を持つsourceを省略したものです。 上で見たように、ここではimagesフォルダの下にあるsamgaetang.gifという画像ファイルを指定しました。 あとの属性はすべて指定しなくてもよいもの、すなわちオプション(option)です。

画像の大きさの指定 ―― width="..." height="..."

画像の大きさはwidthで横幅、heightで高さをいずれもピクセル単位1で指定します。 この大きさは元の画像の大きさとは無関係に指定できます。 逆に言うと、きちんと比率を保って指定しないと、ひしゃげたような画像になってしまいます。 ひとつの画像を、いろいろな場所で大きさを変えて利用する場合などにwidthやheightを指定すると、違う大きさの画像をいくつも用意する必要がなくなります。

widthやheightをまったく指定しないと、元の大きさのまま表示されます。 画像の大きさを指定すると、ブラウザにとっては画像を読み込む前にレイアウトが決定できるため、全体の表示を速くできます。 したがって、大きさを指定する方がよいでしょう2

注釈
  1. 画面に表示される最小の点を単位とした長さ(幅や高さ)の指定方法。 たとえば、横幅が80ピクセルということは点80個分の幅があるということになります。
  2. ウェブページ作成用のアプリケーションである「HTMLエディタ」(ウェブエディタと呼ばれる場合もあります)を使えば、画像ファイルを指定するだけで自動的にwidthやheightを<img>タグの属性として付加してくれるので便利です。

メモ

画像の大きさは、次の例のようにウィンドウの大きさに対する割合(%)でも指定できます。

<img src="samgaetang.gif" width="30%" height="30%">
 

しかし、こうするとウィンドウの大きさを変えたときに画像の大きさも変わってしまいます。 また、ブラウザによって、指定通りに表示しない場合があります。 このため、画像の大きさの %による指定はあまり使われていません。

代替文字列の指定 ―― alt="..."

alt="..."で「代替文字列」を指定します。 この文字列は、画像が読み込まれている間や、利用者が画像の表示をオフにしていたりする場合に表示されます。 一部の携帯電話など画像表示機能のないブラウザや、画像を表示しないようにブラウザを設定してある場合、この代替文字列だけが表示されます)。

メモ

目の見えない人がホームページの内容を読み上げてもらうソフトを使うような場合を考えると、この代替文字列があることにより、どのような画像が置かれているかを知らせることができます。 また、ダイアルアップ接続など、速度の遅い接続の場合、画像が現れる前に代替文字列が表示され、内容が説明されます。 このような用途もあるので、代替文字列はできるだけ指定しましょう。

画像の位置の指定 ―― align="..."

align= " ... "で画像が表示される横方向の位置を指定します。 align="left"だと左側に、align="right"だと右側に表示されます。 上の図4-4はalign="right"を指定したものでしたが、下の図4-5は"left"を指定したものです。 こういった挿絵的な画像では右側に配置した方がよいでしょう。 なおalign属性を指定しないと左側に表示されます。

単調なテキストのページにイラストなどが入るとだいぶ雰囲気が変わります。 画像を上手に利用しましょう。

図4-5<img>タグにalign="left"を指定

メモ

画像の指定にも相対指定と絶対指定があります。 images/samgaetang.gifのように指定した場合は、そのHTMLファイルを基準にして、imageというサブフォルダにある samgaetang.gifというファイルを参照します。 http://www.xxx.com/yyy.gifのように画像のアドレスを指定することもでき(絶対指定)、その場合はそのアドレスにある画像が表示されます。 この方法を使うと、いろいろなページ(たとえば好きな歌手のホームページ)にある画像をいかにも自分が作ったかのごとく自分のページで表示できてしまいます。 しかし、他人の画像や文書を自分のページで使うときには、了承を得て行わなくてはいけません。 著作権を侵害しないよう注意しましょう。

メモ

タグの属性には必須の属性と省略可能な属性があります。 たとえば、 <img>タグの src属性(画像のアドレスを指定)は必須属性です。 これに対して align属性や width、heightなどの属性は省略可能です。

背景画像の指定 ―― <body background="....">

図4-6のように、ブラウザウィンドウの背景に画像が表示されているのも見たことはありませんか? このように背景に画像を表示するには<img>タグではなく、別のタグを使います。

図4-6 背景に画像が指定されたページ

ウィンドウ全体に関わるものですから、本文の開始を指定する<body>タグの属性として指定するのです。 たとえば、リスト4-1のようにします。 この9行目で<body>タグのbackground属性に先ほどと同じsamgaetang.gifを指定しています。

リスト4-1 background-image.html 背景画像

 1 <!DOCTYPE html>
 2 <html lang="ja">
 3 <!--essay.html -->
 4 
 5 <head> 
 6 <meta charset="utf-8">
 7 <title>蔘鶏湯 </t itle> 
 8 </head>
 9 <body background="images/samgaetang.gif"> 
10 </body>
11 </html> 

このページでは本体に何も文章がなくて面白くありません。 背景画像が濃いままだと文字が目立ちませんので、画像を少し薄くして大きな文字を書いてみると、たとえば図4-7のようなページを作ることができます。 まだ、画像の処理方法や、文字の色や大きさの指定は説明してありませんので、詳しい方法はもう少しお待ちください。

図4-7 背景に画像を薄くして文字を表示

画像の種類と準備

上の例では、用意されていたsamgaetang.gifという画像ファイルを指定してウェブページに配置しましたが、画像を表すファイルにはさまざまな「形式(format)」があります。 ウェブページで使われる画像ファイルの形式には、主に次の3つの形式があります。 なお、各形式について詳しくはLesson 8で紹介します。

画像を利用するためには画像を作成しておかなくてはなりません。 一番手軽な方法は、デジタルカメラを使う方法でしょう(携帯電話に付属するものでも可能です)。 撮影した写真のファイルをコピーしてHTMLファイルと同じフォルダ(あるいはその周囲のフォルダ)に置き、そのファイル名を<img>タグのsrc属性に指定します。

自分でイラストが描ける人ならば作成したイラストを「スキャナー(scanner)」という機械でコンピュータに読み込んで、上記のいずれかの形式のファイルとして保存することができます。 上で見た、samgaetang.gifはこの方法で取り込んだものです。

ファイル名の付け方

これまで、ウェブページ用のファイルや画像のファイルにはすべて半角のアルファベットや数字だけを使った名前を付けてきました。 これには理由があります。 漢字や仮名を使ったファイル名を付けると、「文字化け」の危険があり、うまくページが表示されないといった問題が起こりうるからです。

「エッセイ.html」という名前のファイルを作り、それを自分の「ウェブサイト」で公開するとします。 ウェブサイトを公開するためのコンピュータ .ウェブサーバ .は通常インターネットプロバイダの施設におかれていますから、自分のパソコンからウェブサーバにファイルを転送する必要があります。

自分のパソコンでは「エッセイ.html」という名前で問題なく表示されるのですが、ウェブサーバがファイル名に使用している「漢字コード」は自分のパソコンのものとは同じとは限りません。 もし、別の漢字コードを使っていると「エッセイ.html」という名前が、ウェブサーバの内部では「b?Z?C.html」といった訳の分からない名前になってしまうかもしれないのです。 そうすると、「エッセイ.html」ファイル内で利用している、リンクなども機能しなくなってしまいます。

このようなことを避けるため、ファイル名は、htmlファイルも画像ファイルも、これから登場するその他のファイルも、英数字と「-」(ハイフン)や「_」(アンダースコア)だけを使っておくことを強くおすすめします。

注意!

アルファベットや数字であっても、いわゆる「全角」の数字やアルファベット(仮名漢字変換をオンにしたときに入力できる、漢字や仮名と同じ幅をもつ文字)はここで言う英数字としては扱われません。 文字化けの可能性がありますので、ファイル名としては使わないようにしてください。

ファイル名の大文字と小文字の区別

WindowsやMac OSではファイル名を大文字で書いても小文字で書いても同じことになります。 たとえば、Image.gifとimage.gifは同じファイルを指すことになります。

しかし、多くのウェブサーバで利用されているLinuxなどUnix系のシステムでは、Image.gifとimage.gifはまったく別のファイルとして扱われます。 このため、image.gifという画像ファイルを作り、HTMLのコードで<img src="Image.gif">と指定すると、自分のパソコンで試したときにはうまく表示された画像が、サーバに移すと表示されなくなってしまうといったことが起こります。

このようなことを回避するため、ウェブページ関連のファイル名には大文字は使わないようにしましょう。

まとめ

ウェブページの見栄えをよくしてくれる画像の指定方法を紹介しました。 画像ファイルはHTMLファイルとは別のファイルに保存されています。

HTMLのタグなど

DHC-オンライン講座
文系の人にもわかる HTML入門
Lesson 4