Webでのイラストの拡大/縮小について

解決済

質問者：tiz
質問日時：2013/10/17 12:49
回答数：2件

私は基本的な事を理解していない状況であり、簡単に教えて頂きたくお願いいたします。

外部に依頼して作成しているWebコンテンツがあり、そこにイラスト(静止画)が使われています。
そのイラストのサイズを、見る側が自由に拡大、縮小できる様にしたいと考えました。
現状のイラストは、GIFを使用している様なのですが、拡大、縮小は、イラストをFlash等で作成しないと不可と聞きました。

GIFとかFlashとかの言葉しか知らないのですが、簡単にはどの様な違いで拡大、縮小ができたりできなかったりするのでしょうか？
また、Flash以外で拡大、縮小ができるフォーマットはあるのでしょうか？

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1

回答者： ORUKA1951
回答日時：2013/10/17 18:52

そんなの簡単に新しいウィンドウにHTMLを開けばよいように思いますが・・

<ol>
　<li><img src="./images/illustration/a_thumbnail.gif" width="180" height="120" alt="なんたらかんたら"></li>
　<li><img src="./images/illustration/b_thumbnail.gif" width="180" height="120" alt="なんたらかんたら"></li>
・・・
のようなソースだとして・・なおオリジナルのでかい画像はそれぞれa.gif,b.gifでとします。オリジナル画像をwidth,height属性でサイズを指定しても良いのですが、データ量が大きくなるのですすめません。
　このHTMLを次のように書き換えます。
★画像は適当な大きさ、例えば拡大時を980px程度を想定するならそのくらいが良いでしょう。

<ol>
<li><a href="./sample/a.html" onclick="window.open(this.href,'','width=480,height=360,toolbar=no,location=no,status=no,menubar=no'); return false;"><img src="./images/illustration/a_thumbnail.gif" width="180" height="135" alt="なんたらかんたら"></a></li>
<li><a href="./sample/a.html" onclick="window.open(this.href,'','width=480,height=360,toolbar=no,location=no,status=no,menubar=no'); return false;"><img src="./images/illustration/b_thumbnail.gif" width="180" height="135" alt="なんたらかんたら"></a></li>
</ol>

　別途簡単なHTMLを作成しておきます。
今回は、簡単なHTML5にしておきます。HTML4.01の場合は適当に書き換える。
タブは＿に置換してあるので戻す。
[HTML]./sample/a.html
<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">
＿<link rel="stylesheet" type="text/css" media="screen" href="../styleSheet/sample.css">
</head>
<body>
＿<p>
＿＿<img src="../images/Illustration/a.gif" width="480" height="360" alt="">
＿</p>
</body>
</html>

[CSS]./styleSheet/sample.css
@charset "UTF-8";
html,body{margin:0;padding:0;width:100%;height:100%;position:relative;}
p{margin:0;}
img{display:block;width:100%;height:100%;}

パス
|- test.html 画像サムネイルのあるページ
|-- sample/
|　　|-- a.html
|　　|-- b.html
|-- Ilustration
|　　|-- a.gif
|　　|-- a_thumbnail.gif
|　　|-- b.gif
|　　|-- b_thumbnail.gif
|-- styleSheet/
|　　|-- sample.css

なお、サイズが任意でないなら・・
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
のように、スタイルシートだけで実装できます。

- 0
- 件

通報する

この回答へのお礼

早速の回答をありがとうございます。

要するに、画像がGIFのままであっても、HTMLの作り方如何によって、拡大/縮小を自由にできる様になるということでしょうか？

通報する

お礼日時：2013/10/18 23:14

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2013/10/19 09:30

＞要するに、画像がGIFのままであっても、HTMLの作り方如何によって、拡大/縮小を自由にできる様になるということでしょうか？

　そうです。簡単な例を最後に挙げておきます。
なお、注意点がいくつか・・・
　GIFはビットマップ/ラスターと呼ばれるCG(コンピューターグラフィックス)( http://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%B9% … )です。ベクター/ドロー系の画像( http://ja.wikipedia.org/wiki/%E3%83%99%E3%82%AF% … )と異なり、本来は拡大縮小に向いていません。
　そのため、実際に表示される可能性のある最大サイズで作成しなければなりません。さらに印刷が想定される場合は、その数倍のサイズが必要になり、サイズが肥大化します。
　ベクタ(ドロー)形式だと、サイズにデータサイズは依存せず、縁が汚くなりません。
　⇒Scalable Vector Graphics - Wikipedia( http://ja.wikipedia.org/wiki/Scalable_Vector_Gra … )
　によいサンプルがあります。

　任意に拡大縮小を目的とするなら、画像をSVGで出力するのが本来の方法です。

No.1のスタイルシートは次のように書き換えたほうが良い
html,body{margin:0;padding:0;width:100%;height:100%;position:relative;}
p{margin:0;position:relative;width:100%;height:100%;}
img{display:block;width:100%;height:100%;}
　縦横とも自在にサイズが変わります。アスペクト比も変わる。アスペクト比を変えたくなければ何れかをautoにする。

[サンプル]
横幅基準
img{display:block;width:100%;height:auto;}
高さ基準
img{display:block;width:100%;height:100%;}
に書き換える。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<meta name="description" content="">
<meta name="author" content="IRUKA">
<style>
html,body{margin:0;padding:0;width:100%;height:100%;position:relative;}
p{margin:0;position:relative;width:100%;height:100%;}
img{display:block;width:100%;height:100%;}
</style>
</head>
<body>
<p>
<img src="../images/Illustration/a.gif" width="480" height="360" alt="">
</p>
</body>
</html>