超簡単ホームページ作成TOP>画像・背景画像の使い方

    画像・背景画像の使い方

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

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

背景にグラデーション
高さが低く、幅の広い背景画像を用意すれば、容量を増やさず背景にグラデーションを使うことができます
たとえばこんな背景画像です。
高さが4ピクセル、幅が1280ピクセルでできています。幅が広いのはどんな表示環境にも適用させるためです。 グラデーションは最初の200ピクセルだけにかけてあります。
上に戻る

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

<STYLE>
<!--
BODY{background:white url(画像のファイル名) repeat-y}
-->
</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>		 ファイル容量 66KB


画像の周囲にはリンクを表す青い枠がつきます。これがいやな人は　border="0"　を追加します。
このように書きます
<A href="l-saboten.jpg" width="57" height="54" alt="ファイル容量 66KB" border="0">
<IMG src="s-saboten.jpg"></A>		 ファイル容量 66KB
上に戻る

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