ウェブサイトの“書き方”⑦~画像

June 9th,2015
画像を埋め込む
画像
前回はリンクでウェブページ間を結び付けるリンクを埋め込みました。
前置き編で紹介したとおり、HTML文書では文書間を結ぶだけでなく画像、動画、音声などの関連するファイルを結びつけて埋め込むことができます。
今回はその中でももっとも使われるであろう画像の埋め込みについて解説します。
画像形式
ファイル形式とは?
パソコン上にはさまざまなファイルがありますが、それぞれ“ファイル形式”によってそのファイルの構造や、どのように扱うべきファイルなのかを示すルールのようなものが決められています。
ファイル形式”はファイル名につけられる“拡張子”によって識別されます。
身近なものとして、音楽のデータは“曲名.mp3”などと保存されていますが、“.mp3”という“拡張子”を認識することによって音楽プレーヤーなどで再生することができます。
HTML文書を保存するときにつける“.html”も“拡張子”なのでこの“.html”を認識してブラウザはHTML文書としてこのデータを開きます。
拡張子”はパソコン上で表示されない設定になっている場合が多いですが、表示されないだけですべてのファイルには“拡張子”がつけられています。
画像のファイル形式
画像もその画像のデータを記録する方法によってたくさんの“ファイル形式”に分けられていて、一般的に画像の“ファイル形式”は“画像形式”と呼ばれています。
画像形式”は“BMP”、“TIFF”、“JPEG”、“GIF”、“BMP”などたくさんありますが、インターネット上でよく使われる画像形式は“JPEG”、“GIF”、“PNG”の3種類のみです。
JPEG (.jpg、.jpegなど)
一般的にデジタルカメラで写真を撮るとこの形式で保存されるので、比較的なじみのある画像形式のはずです。
色数の多い複雑な画像を表示するのに向いていてグラデーションも綺麗に表示することができます。
非可逆圧縮”といって一度圧縮してしまうと元に戻せない方法で圧縮します。ファイルを保存すると圧縮されるので、何度も編集と保存を繰り返すと画質が劣化します。
ぼやけたり、かすれたりするので活字や線、色の境界がはっきりした図形などを含む画像には向きません。
GIF (.gif)
グラデーションをあまり使っていないイラストや線画など、色数が少ない画像を表示するのに向いています。
透明色を使用したり、1個のファイルに複数の画像データを保存できるため、パラパラマンガのようにしてアニメーションを表示することが可能です。
可逆圧縮”といって一度圧縮しても元の画像を復元できる方法を使用するため、画像の質は落ちません。
ただし、最大256色しか扱えないため写真のような色数の多い画像をこの形式で保存すると色数が減らされて画像が劣化します。
PNG (.png)
GIF”の代替としてインターネット上で使うことを目的として開発された画像形式です。
可逆圧縮”のため画質は落ちません。
JPEG”と同じ約1670万色まで使用することが可能です。劣化しないので写真などを“JPEG”より綺麗に保存することができますが、ファイルのサイズが大きくなるので注意が必要です。
アニメーションは表示できませんが、透明に加えて半透明も表現できます。
ウェブサイトに使用する画像は通常イラストや、ロゴなどは“GIF”か“PNG”、写真は“JPEG”を使用します。
ほかの画像形式が絶対に使用できないわけではありませんが、ブラウザによっては表示に対応していなかったり、ファイルのサイズが大きくなったりするのでできるだけ避けるべきです。
画像を埋め込む
それでは画像を埋め込みます。
下が画像タグです。
<img src="sample.png" alt="サンプル画像">
画像タグは終了タグを持たないので“<img>”のみです。埋め込みたい画像のURLを“src”属性で、何らかの理由で画像が表示されなかった場合に代わりに表示されるテキストを“alt”属性で指定します。
画像のURLは前回説明したリンクのリンク先のURLを指定する方法と同じように指定できます。
alt”属性は必須ではありませんが、できるだけ省略しない方がよいでしょう。
今回は下の画像を埋め込みます。
この画像の拡張子は“.png”なのでタグは
<img src="banana.png" alt="バナナ">
となります。
これを画像を埋め込みたい場所に書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>果物を食べる</title>
</head>
<body>

<p>トップに戻る</p>

<h1>黄色いフルーツバナナ</h1>
<p>バナナについての解説。</p>

<p><img src="banana.png" alt="バナナ"></p>

<h2>目次</h2>
<ul>
<li>バナナの特徴</li>
<li>バナナの産地</li>
<li>バナナの保存方法</li>
<li>バナナの栄養素</li>
</ul>

<h2>バナナの特徴</h2>
<p>「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。</p>

<h3>バナナの木</h3>
<p>バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。</p>

<h3>バナナの果実</h3>
<p>バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。</p>

<h2>バナナの産地</h2>
<p>バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されている。</p>

<h2>バナナの保存方法</h2>
<p>果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。</p>

<h2>バナナの栄養素</h2>
<p>ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。</p>

<p>トップに戻る</p>

<p>&copy; copyright 2015 Frouts wo taberu</p>

</body>
</html>
保存したらブラウザで開いてみてください。
画像は表示されたでしょうか?
もし表示されない場合は、ファイル名が間違っていないか、拡張子が間違っていないかを確認してみてください。
環境によっては拡張子の大文字と小文字が区別されるので、ファイルの拡張子が大文字なのか小文字なのかも確認しましょう。
応用
画像タグとリンクタグを組み合わせて、画像をクリックすると別のページに飛ぶ“画像リンク”を設置することができます。
<a href="index.html"><img src="backtop.png" alt="トップに戻る"></a>
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク