画像・背景画像の使い方

部分的に背景画像を使ったり、背景画像を固定したりします。
画像を使っても動作を快適にするために、画像を分割したり、キャッシュを利用する方法を解説します

損をしない自動車保険選び損をしないクレジットカード選び銀行の利用・口座維持手数料無料化就職・アルバイト情報
トッブページに戻る文字のサイズを変更する時は Control キーを押しながらマウスのスクロールホイールを回してください

背景の使い方 ▲

背景画像は小さく

背景に使った画像はタイルを敷き詰めるように、繰り返し表示されます。軽いホームページにするためには画像のサイズをできるだけ小さくします。特に抽象的な画像では極力小さくします。

左の画像を背景に使用

上とほとんど差がないのが判ると思います

上に戻る

背景にグラデーション

高さが低く、幅の広い背景画像を用意すれば、容量を増やさず背景にグラデーションを使うことができます
たとえばこんな背景画像です。

高さが4ピクセル、幅が1280ピクセルでできています。幅が広いのはどんな表示環境にも適用させるためです。グラデーションは最初の200ピクセルだけにかけてあります。

上に戻る

一部にだけ背景を入れる

背景はどんなに小さな画像を使っても、タイルを敷き詰めるように、全面に広がります。
ここでは左側だけとか、上側だけとかに背景を使ってみます

<STYLE>

</STYLE>を<HEAD></HEAD>の間に入れます。ページの左側にこの画像が敷き詰められます。
repeat-y　の部分を　repeat-x　に変えるとページの上部、横一列にこの画像が並びます。
テーブルの中にも使えます。
<TABLE>を<TABLE STYLE="background:white url(ha2.jpg) repeat-y">等と変えます。
<TD>を<TD STYLE="background:white url(ha2.jpg) repeat-x">等と変えると変えたセルに適用されます。

上に戻る

背景の画像を固定する

普通はスクロールすると文字と一緒に背景も動きます。背景が大事でスクロールさせたくないときは、固定することができます。今迄<BODY>と書いていた所を
<BODY background="背景のファイル名" bgproperties="fixed"> のように換えるだけです。簡単ですがイメージは大きく変わります。

上に戻る

画像を使っても動作を軽快に ▲

画像をたくさん使うと重いページになり、開くのに時間がかかります。少しでも軽くする方法にトライします

画像サイズを指定

画像のファイル容量をあらかじめ調べておき、そのサイズをwidth="数値" height="数値"というように記入します。このように書いておくと、画像を読み込む前に表示場所スペースのレイアウトが決まるので、表示が速くなります。
画像のファイル容量は、開いた画像のうえにマウスポインターを載せて右クリック、出てきたメニューから「プロパティ」を選べば確認できます。

このように書きます

<img src="cat2.jpg" width="151" height="113">

動きを軽快にするため、画像を表示しない設定にしている人もいます。そんな人たちのために、画像の代わりに説明文が出るようにします。
alt="説明文"を追加します。この記述をしておくと、副次効果として、マウスカーソルが写真の上にきたときに、説明文が表示されます。下の写真で確認してください。

このように書きます

<img src="cat2.jpg" width="151" height="113" alt="猫の写真">

上に戻る

上半分を軽く

縦に長いホームページでは、隠れている下のほうに重い画像を置き、表示されている上の部分を軽くなるようにします。実際には開いていなくても、開き終わったように見せかける方法です。

上に戻る

内緒でフアイルを開いておく

上の項目との違いは、他のページで使う画像にも対応できることです。文章の多いページにこの仕込をし、文章を読んでいる間に、次以降に使う画像を目に見えない形で開いてしまいます。
<IMG src="ファイル名" width="1" height="1">　のように一番下に書いておきます。ファイル名で指定した画像が、「フルサイズだけど縦横１ピクセルに押し込められた状態」で開きます。単なるドットにしか見えませんから、おそらく誰も気がつかないでしょう。この画像を開くのには当然時間はかかりますが、文章を読んでいる間に済んでしまいます。次のページに移動しこの画像を<IMG src="ファイル名" width="640" height="480">　等と指定して開く時には、すでに開いている画像ですから、ほぼ瞬時に表示されます。
このページの一番下でも８枚画像が開いていますが、わかるでしょうか。

上に戻る

画像を分割する

どうしても大きな画像を一番最初に開かなければならないときは、画像を分割します。画像は一つづつ受信するのではなく、複数枚同時に受信します。大きいもの１枚よりも、小さいもの４枚の方が速くなります。
一番簡単な方法は2分割とか4分割です。これをテーブルの中に入れます。

画像分割の方法

分割した画像を<TABLE>タグのセルの中に入れます。
<TABLE border="0" cellpadding="0" cellspacing="0">タグはこのようにすべてを「0」に指定します。こうしないと分割部に余計なスペースが入ってしまいます。

上下に2分割した画像を使った例です

<TABLE border="0" cellpadding="0" cellspacing="0">
<TR><TD>
<IMG src="hana-1.jpg" width="267" height="125">
</TD></TR>
<TR><TD>
<IMG src="hana-2.jpg" width="267" height="125">
</TD></TR>
</TABLE>

上に戻る

画像の多いホームページ

画像がいっぱいある、写真・イラスト中心のホームページでは、ファイル容量の小さな画像を作り、それをレイアウトします。小さな画像に大きな画像をリンクさせておけば、スムーズに表示される画像一覧の中から、気にいった写真のみを拡大して、じっくり見てもらうことができます。
<A href="大きな画像のファイル名"><IMG src="小さな画像のファイル名"></A>　のように書きます。alt="ファイル容量 66KB"のように大画像のファイル容量を書いておくと、マウスカーソルを小画像の上に載せた時点で大画像のファイル容量がわかりますので、表示に時間がかかっても多少は許される思います。

このように書きます
<A href="l-saboten.jpg" width="57" height="54" alt="ファイル容量 66KB">
<IMG src="s-saboten.jpg"></A>

画像の周囲にはリンクを表す青い枠がつきます。これがいやな人は　border="0"　を追加します。

このように書きます
<A href="l-saboten.jpg" width="57" height="54" alt="ファイル容量 66KB" border="0">
<IMG src="s-saboten.jpg"></A>

上に戻る

ホームページのファイル容量確認方法

自分のホームページのファイル容量を確認したい時は、確認したいページをIEで開き、「ファイル」「名前を付けて保存」を選びます。
名前を「aaa.htm」とすると右のようなファイルとホルダーが保存場所にできています。フォルダーには、そのホームページで使っている画像ファイルがすべて入っています。各々のファイル・ホルダーにマウスポイントを載せて「右クリック」し、「プロパティー」を選べば「サイズ」の項目にファイル容量が書かれています。ファイルとホルダーの値を足し算すれば、そのページのトータルのファイル容量となります。

上に戻る