■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 Webプログラミング Code Sample 】 Since2001/11/23
Code011: ちょっとした小技集ほか
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Produced by ichikoro.com
▼毎週月曜日配信です。
▼等幅フォントでご覧いただくとキレイに見えます。
▼登録・解除はこちらから可能です。
< http://www.ichikoro.com/webp/ >
※バックナンバーへのリンクもあります。
※お友達にもぜひお勧めください(^^)/
─【Contents】───────────────────────────────
01. Q&A ................... もっと画像を早く読み込むには？
02. Q&A ................... ピクセル単位でマージン(余白)を設定したい
03. Q&A ................... URLの書き方
今回は特別号です。
なかなか本流の話では出てこないちょっとしたチップスをご紹介、解説いたします。
もし違っているところや、あなたの知っているチップスがあったら、ぜひ教えてくだ
さいね(^^)/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
01.Q&A 「もっと画像を早く読み込むには？」
──────────────────────────────────────
Q.もっと画像を早く読み込めるような裏技はありませんか？
A.ページ構成よっては、キャッシュを利用することで実現できます。
---------------------------------------------------------------------
★ 解 説 その1
---------------------------------------------------------------------
色数を落とすとか、ファイル形式を変更してみるとか、解像度やサイズ
をできる限り削るのが一番効果あるのですが、ここまでやって直、表示
の速さを求めるにはどうすればどうすればいいのでしょうか？
※線を太くするとか、サーバを増強するというのは無し
ということで(^^;
基本的にはキャッシュを効果的に用いるようなページを作成するのが一番
です。例えばサイト全体で使っているロゴなどは、共通の画像を呼び出す
ことでずいぶんと違ってきます。
上部にタブを用いたナビゲーションを使っているサイトでは、すでに定石
となっています。
・アップルコンピューター
http://www.apple.co.jp/
・アマゾン
http://www.amazon.co.jp/
※いずれも画像を細かく切ってありますよね？
---------------------------------------------------------------------
★ 解 説 その2
---------------------------------------------------------------------
ページの構成によっては、“先読み”することでも実現できます。
やり方は簡単です。次のページで表示する画像を、あらかじめ前の
画面で呼び出します。
<IMG src="next_page_no_image.jpg" width="1" height="1">
すると、次の画面ではキャッシュが使われ、ほぼ一瞬で表示されることに
なります。前の画面でサムネイルを表示し、次の画面で大きな画像を表示
するというようなページでは有効だと思います。
ただ、これは
「ん？全部読み込んだハズなのに、まだ読み込み完了にならないなぁ。
一体何を読み込んでるんだろう？？？」
と、ユーザーを不安にさせることもありますので実際に使うときは注意が
必要です。
一番気をつけないといけないのは、不必要に画像を使わないことです。
文字などを画像にすれば、OSやブラウザに依存せず好き勝手にフォント
などを使えるので、デザイナーさんの気持ちも分からないではないですが、
ユーザーは必ずしもそれを望んでいるとは限りません。
※また、ロボット式の検索エンジンにヒットしなくなるので、トータ
ルで考えるとマイナスの面もあります。
---------------------------------------------------------------------
★ 解 説 その3
---------------------------------------------------------------------
ちなみに、HTML4.0ではLINKタグという物が定義されており、
<HTML>
<HEAD>
<TITLE>Chapter 2</TITLE>
<LINK rel="Index" href="/index.html">
<LINK rel="Next" href="Chapter3.html">
<LINK rel="Prev" href="Chapter1.html">
</HEAD>
なんてことを記述しておくと、それを見越して先読みをしてくれる
ブラウザがあるかもしれません。
※IEやNCでの実装は未確認です。
期待しない方がよいでしょう。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
02.Q&A 「ピクセル単位でマージン(余白)を設定したい」
──────────────────────────────────────
Q.BRやPよりももっと柔軟に、ピクセル単位でマージン(余白)の設定を
したいのですが...。
A1.透過GIFを使いこなすことによって実現できます。
A2.スタイルシートを使いましょう。
---------------------------------------------------------------------
★ 解 説 その1
---------------------------------------------------------------------
まず、古くから使われている方法を説明しましょう。
原理は簡単です。1×1ピクセルの透過GIFを用意します。
後はスペースを空けたいところで、
<IMG src="spacer.gif" width="300" height="10">
と言った具合に画像を呼び出すだけです。
元々1×1ピクセルの画像ですので重さは大したことありませんし、ページ
内でたくさん使っても2回目以降はキャッシュが使われます。とは言っても
たくさん使うと、ブラウザが表示(レンタリング)する処理に時間がかかる
場合があります。また、サーバが鈍足の場合最初の一個がなかなか取って
これない...なんて事態も考えられます。
※まぁ、極端なことしなければそんな神経質になること
もないでしょう。
もう一個これを応用して、
<TABLE border="3">
<TR>
<TD>あいうえお</TD>
<TD>かきくけこ</TD>
</TR>
<TR>
<TD>さしすせそ</TD>
<TD></TD>
</TR>
</TABLE>
というようなテーブルを書いた場合、右下のセルがハズカシイことになって
しまいます(トーフと呼んでいます)。
そこで、ここに
<TABLE border="3">
<TR>
<TD>あいうえお</TD>
<TD>かきくけこ</TD>
</TR>
<TR>
<TD>さしすせそ</TD>
<TD><IMG src="spacer.gif" width="1" height="1"></TD>
</TR>
</TABLE>
とすることで、このトーフ現象を阻止することができるのです。
もっとも、
<TABLE border="3">
<TR>
<TD>あいうえお</TD>
<TD>かきくけこ</TD>
</TR>
<TR>
<TD>さしすせそ</TD>
<TD><BR></TD>
</TR>
</TABLE>
としてもいいのですが(^^;
他にも
<TABLE border="3">
<TR>
<TD>あいうえお</TD>
<TD>かきくけこ</TD>
</TR>
<TR>
<TD>さしすせそ</TD>
<TD><IMG src="spacer.gif" width="250" height="1"></TD>
</TR>
</TABLE>
としておけば、テーブル幅を250ピクセルに保つことができます。
<TABLE border="3" width="80%">
とした場合でも、最低幅を250ピクセルにすることができます。
---------------------------------------------------------------------
★ 解 説 その2
---------------------------------------------------------------------
本来のHTMLの意図から言うと、上の方法は邪道です。
※昔は“工夫”だったんですがねぇ(^^;
スタイルシート(CSS)を使うのが正攻法です。
では具体的にどうすればいいのでしょうか？詳しいことは本流の流れで
後程説明しますが、CSSにはマージンをそのまま設定できます。
<HTML>
<HEAD>
<TITLE>ま〜じん</TITLE>
</HEAD>
<BODY>
ここがページの先頭
<DIV style="margin: 100px;">
これがマージンだ！
</DIV>
ここがページの最後
</BODY>
</HTML>
とすると、DIVの前後左右に100ピクセルの余白ができます。
DIVタグや、詳しいことについては、長くなりますので後日
解説します。
「うお〜、一刻も早く知りたいぜ！」という方は、とりあえず
こちらをご覧くださいませ。
・とほほのスタイルシート入門
http://tohoho.wakusei.ne.jp/wwwcss.htm
・DIVタグ
http://tohoho.wakusei.ne.jp/html/div.htm
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
03.Q&A 「URLの書き方」
──────────────────────────────────────
Q.“http://www.yahoo.co.jp/new”と“http://www.yahoo.co.jp/new/”は
違うものなんですか?
A. はい、違います。
---------------------------------------------------------------------
★ 解 説 やさしく解説
---------------------------------------------------------------------
結論から言うと
・http://www.yahoo.co.jp/new ←ディレクトリ
・http://www.yahoo.co.jp/new/ ←ファイル
※↑index.htmlなどを省略している指定方法なのです。
ということになります。
ディレクトリを指定しまった場合、サーバはブラウザに
「これはファイルではなくディレクトリだから表示できなんだよね〜。
悪いけど、指定する場所に移動してくれない？」
と返してきます。
ブラウザは再びその場所にあるファイルをくれと、サーバに呼びかけます。
このやり取りは、普段IEやNCなどを使っていると見ることはできませんが、
実際にブラウザは2回のアクションをしなくてはいけなくなります。またサ
ーバも2回応答せねばならず、少なからず負荷がかかることになります。
そこで、ブランディングなどの理由が特別に無いのであれば、ディレクトリ
の最後にはスラッシュ'/'をつけましょう。
---------------------------------------------------------------------
★ 解 説 小難しく解説
---------------------------------------------------------------------
では本当にそうなのか確認してみます。
ここではHTTPレベルの話をしましょう。これが一番確実です。
まずは後者(スラッシュ有り)の場合ですが、
HEAD /new/ HTTP/1.0
とした場合、
HTTP/1.1 200 OK
Date: Mon, 14 Jan 2002 10:20:56 GMT
Cache-Control: private
Pragma: no-cache
Connection: close
Content-Type: text/html;charset=euc-jp
きちんとファイルが帰ってきます。
が、今度は
HEAD /new HTTP/1.0
としてみましょう。
すると...
HTTP/1.1 301 Moved Permanently
Date: Mon, 14 Jan 2002 10:23:32 GMT
Location: http://w11.yahoo.co.jp/new/
Connection: close
Content-Type: text/html
と帰ってきてしまいました！
ちなみに、これを試すのはtelnetでもいいんですが、Windowsな人の場合、
下記のソフトが便利です。
・httpRequest
WEBサーバの送ってくるヘッダを確認
http://www.vector.co.jp/soft/win95/net/se065240.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編 集 後 記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
いかがでしたでしょうか？
普段書き溜めていた物を、まとめてみました。
リクエストがあったり気が向いたら(^^; また発行いたします。
他にも、
「こんなことできないの？」
「こんなこと知ってます！」
というトピックスがあったら教えてくださいね！
ご応募はこちらから
mm-webp@ichikoro.com
ではでは、また月曜日発行の本誌でお会いしましょう (^-^)/~~
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 Webプログラミング Code Sample 】
発 行 ： ichikoro.com
発行責任者 ： 勝部 麻季人
< katsube@ichikoro.com >
発行部数 ： 1458部(前回)
Webサイト ： < http://www.ichikoro.com/webp/ >
お問い合わせ先 ： < mm-webp@ichikoro.com >
Powerd by まぐまぐ
All Right Reserved, CopyRight(C) 2001 Webプログラミング Code Sample
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
