[簡単写真アルバム]
巨大になったらサイズ指定する

何もしないで、デジカメ写真を表示すると、画面一杯に広がる巨大な画像が表示されるかもしれません。サイズ指定くらいは、知っておくと便利でしょう。

Contents

>写真アルバムづくり−前回のおさらい

>サイズを指定する

>スタイルシートでサイズを一括管理する

>画像データのサイズは変わらない。

写真アルバムづくり−前回のおさらい▲

1. 拡張子がjpgのファイルを用意する(例えば1a.jpgをデスクトップに置く)。
2. メモ帳を開き<img src="1a.jpg">と書く。
3. メモ帳の内容を「名前を付けて」保存する。保存場所は、画像ファイルと同じデスクトップ。ファイル名には拡張子"htm"を忘れない。例えば、photo1.htm。
4. デスクトップ上のphoto1.htmアイコンをダブルクリックする。ウェブブラウザが立ち上がって写真が表示される。

　前回の内容は、ここまででした。

サイズを指定する▲

　忠実に実践していただいた方。私の見本とは違い、写真が巨大に表示されていることでしょう。特に高画質な写真であれば、ウィンドウからはみ出す位のサイズとなるでしょう。

ブラウザいっぱいの巨大な表示

　サイズを小さく表示する方法は2つあります。
　ひとつは、画像処理ソフトを使ってサイズを小さくする方法です。下の写真は幅200ピクセルに縮小したものです。

200ピクセル

　もうひとつは、タグでサイズを指定する方法です。

　画像を表示するタグは

<img src="1a.jpg">

となっていました。これにサイズの情報を追加して

<img src="1a.jpg" width="400" height="300" >

と、いう風にします。この例では、幅400ピクセル、高さ300ピクセルとなります。サイズ指定によっては、相似形にならず平たくなったり、高くなったりしますので、元のサイズから、同じ割合で小さくする必要が有ります。元のサイズを厳密に調べるのは面倒なら、横4：縦3としておくとたいていのデジカメ画像に対応するでしょう。

平たくなったり

高くなったり

スタイルシートでサイズを一括管理する▲

　「width="400" height="300"」を写真の枚数だけ繰り返して記述するは、何だか無駄な気がします。シンプルにしようと思ったらスタイルシートという機能を利用します。すべての>img<タグに対して、「width="400" height="300"」が適用されるようにするものです。
　書き方は１行目をこのように追加するだけです。

<style type="text/css">img{width=400px;height=300px;}</style>
<img src="1a.jpg">
<img src="1b.jpg">
<img src="1c.jpg">
<続く>

　「style」というタグに記述します。「img」タグすべては幅400ピクセル、高さ300ピクセルのサイズにしなさい、という意味です。

画像データのサイズは変わらない。▲

　大きな画像データをサイズ指定しても、データサイズ自体は変わりません。見た目は小さくなりますが、読み込み時間は大きなサイズと同じです。大量の画像を表示する場合は、画像処理ソフトを使ってサイズを小さくした方が良いでしょう。

※前回もお断りしたとおり、自分や仲間内の利用のみとしてください。HTMLの文法からみると、省略しすぎています。

(05.02.14)