3-7 画像の応用

コンテンツ制作応用
3-7
画像の応用
Webページ上の画像を拡大縮小する方法や、画像内の任意の位置にリンクを設定する方法
を学びましょう。
画像の拡大縮小（pxで指定）
img要素のwidth属性やheight属性を使用すると、Webページ上に配置している画像を
img要素のwidth属性とheight属性
i m g 要素の開始タグ内に、「 w i d t h = " 幅 "
height="高さ"」のように記述して、Webペ
ージ上に表示する画像の大きさを指定しま
す。
これらの属性の指定を省略した場合、画像
は原寸の大きさで表示されます。
拡大、縮小して表示することができます。width属性は画像の横幅、height属性は高さを
指定します。
1 素材 CD-ROMのフォルダ《3-07》をハードディスクにコピーし、フォルダ《3-07》
内の《3-07-01.html》を開きます。大きさの異なる2つの画像が配置されているページ
が表示されます。
2 ソースを確認してみましょう。Internet Explorerのメニューバーの［表示］−［ソー
ス］を選びます。
上側の画像にサイズの指定はありませんが、下側の画像はimg 要素内に「width="280"
height="148"」と、幅と高さが指定されています。これは、画像《webdesign.jpg》を
幅 280px、高さ148pxで表示することを示しています。
「3-07-01.html」のソース
<html>
<head>
<title>画像の拡大縮小</title>
<style type="text/css">
<!-body{text-align:center}
img{margin-bottom:20px}
-->
</style>
</head>
<body>
<img src="webdesign.jpg">
<br>
<img src="webdesign.jpg" width="280" height="148">
</body>
</html>
画像《webdesign.jpg》の元の大きさは、幅350px、高さ180pxです。
3 それでは、画像の幅を210px、高さを111px に変更してみましょう。下側の画像の
width属性とheight属性の値を、次の記述のように変更します。
<img src="webdesign.jpg" width="210" height="111">
4 メモ帳の［ファイル］メニューから［上書き保存］を選択します。次に、Internet
Explorerの［更新］ボタンをクリックします。
142
コンテンツ制作応用
下側の画像の大きさが縮小されました。
「3-07-01.html」のソース（完成例１）
<html>
<head>
<title>画像の拡大縮小</title>
<style type="text/css">
<!-body{text-align:center}
img{margin-bottom:20px}
-->
</style>
</head>
<body>
<img src="webdesign.jpg">
<br>
<img src="webdesign.jpg" width="210" height="111">
</body>
3
</html>
7
5 次に、画像の幅を525px、270pxに変更してみましょう。下側の画像のwidth属性と
height属性の値を、次の記述のように変更します。
<img src="webdesign.jpg" width="525" height="270">
6 メモ帳の［ファイル］メニューから［上書き保存］を選択します。次に、Internet
Explorerの［更新］ボタンをクリックします。
下側の画像の大きさが拡大されました。元の画像より拡大すると画質が低下します。ブラ
コンテンツ制作応用
ウザで画像を表示するときは、できるだけ100％の大きさで用いるのが好ましく、画像の
大きさを変更するときは画質の変化に注意が必要です。
「3-07-01.html」のソース（完成例２）
<html>
<head>
<title>画像の拡大縮小</title>
<style type="text/css">
<!-body{text-align:center}
img{margin-bottom:20px}
-->
</style>
</head>
<body>
<img src="webdesign.jpg">
<br>
<img src="webdesign.jpg" width="525" height="270">
</body>
</html>
143
コンテンツ制作応用
幅と高さの比率
width属性とheight属性は、それぞれ任意の数値を指定できます。そのため、指定した横幅と高さの比率が元の画像と異なる場合、表示される画像も縦
長や横長といった、元の画像とは異なる状態で表示されます。
元画像をそのまま拡大縮小したいときは、横幅と高さの比率が元の画像と同じになる値を指定します。
（例）画像の幅を300px、高さを100pxに指定
<html>
<head>
<title>画像の拡大縮小</title>
<style type="text/css">
<!-body{text-align:center}
img{margin-bottom:20px}
-->
</style>
</head>
<body>
<img src="webdesign.jpg">
<br>
<img src="webdesign.jpg" width="300" height="100">
</body>
</html>
画像の拡大縮小（％で指定）
img要素のwidth属性やheight属性は、「px」（ピクセル）のほかに、「%」で大きさを指
定することもできます。
「%」の場合、img要素を配置している親要素に対する割合で画像の大きさを指定します。
<body>∼ </body>内に直接、配置している場合、ブラウザのウィンドウサイズに対する
割合で、画像の大きさが変化します。
1 「％」で画像の大きさを設定してみましょう。ハードディスクにコピーしたフォルダ
《3-07》内の《3-07-02.html》を開き、Internet Explorerの［表示］メニューから
［ソース］を選択します。
2 下側の画像のimg要素内に、次の記述を追加します。
<img src="webdesign.jpg" width="50%" height="50%">
144
コンテンツ制作応用
3 メモ帳の［ファイル］メニューから［上書き保存］を選択します。次に、Internet
Explorerの［更新］ボタンをクリックします。
下側の画像の大きさが変更されました。
「3-07-02.html」のソース（完成例）
<html>
<head>
<title>画像の拡大縮小</title>
<style type="text/css">
<!-body{text-align:center}
img{margin-bottom:20px}
-->
</style>
</head>
<body>
<img src="webdesign.jpg">
3
<br>
<img src="webdesign.jpg" width="50%" height="50%">
</body>
7
</html>
4 Internet Explorerのウィンドウサイズを変更し、画像の大きさが変化するのを確認し
CSSのwidth、heightプロパティ
てみましょう。上側の画像の大きさはそのままですが、下側の画像はウィンドウサイズの変
画像の幅や高さは、CSSのwidth、heightプ
ロパティで指定することもできます。CSSの
プロパティでは、「px」や「%」以外の単位
でも大きさを設定できます。
更に合わせ、画像の大きさも拡大縮小されます。
コンテンツ制作応用
ブラウザのウィンドウサイズを小さくした場合
ブラウザのウィンドウサイズを大きくした場合
145

Download Report