流れのヒント

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

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

Contents
>写真アルバムづくり−前回のおさらい
>サイズを指定する
>スタイルシートでサイズを一括管理する
>画像データのサイズは変わらない。

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

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

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

サイズを指定する

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

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

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

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"」が適用されるようにするものです。
 書き方は1行目をこのように追加するだけです。

<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)

文責:kita jdy07317@yahoo.co.jpまたはゲストブックへ
リンクはご自由に © 2003-2015 kita