<< ★飛び出す付箋紙 画像をスムーズにズームして表示... >>
 

ブログダイエット:テーブル表示の高速化

はじめに

ブログダイエットって言っても、やっぱりいきなりのダイエットは大変ですよね。
そこで、やってみる価値はありそうな簡単な方法から説明します。
今回は、テーブル(table)表示の高速化です。
テーブルを用いてレイアウトを行っている方向けの情報です。
exciteユーザならば、テーブルを用いないでレイアウトをしても、最新のコメント」と「最新のトラックバック」はテーブルなので、この技は利用できるかも。

excite以外でも利用できる技です。
でも、ちょっと難しいかもしれないのと、体感速度が得られない場合もあります。
(高スペックのマシンを利用している方は特にね。)

難易度:★★
(テーブル(table)の自動調整の恩恵にあずかっている方にとっては辛いかも・・・)





内容


テーブル(table)は全てを読み込んでから列幅を調整して表示を行うため、表示が遅くなることがあります。
しかし、テーブル(table)の第1行目のセル幅を正しく指定し、table-layout: fixedと指定することにより、テーブル(table)の表示を速くすることができます。

注意:table-layout: fixedを指定すると、第1行目の列幅を元に表示するため、列幅が正しくない場合は、テーブル(table)の列幅の自動調整が機能せずに、指定の通りに表示されます。したがって、サイトの表示が崩れることや、ブラウザによっては表示速度が遅くなることがありますのでご注意下さい。

詳しくは、以下のサイトをご覧下さい。

情報元
HTML クイックリファレンス>>
テーブルの表示の違い>>


指定方法

exciteの基本スキンはテーブル(table)でレイアウトされています。このテーブル(table)に対して指定する方法とテーブル(table)にclassを指定してからCSSで指定する方法が考えられます。
ちょっと試すには、HTML編集部分でtableにstyle="table-layout: fixed"を追加して表示速度を体感して下さい。もし、体感速度が速くなって表示も崩れていない場合はそのまま利用し続けることができます。


テーブル(table)に直接指定

<table border="0" cellpadding="0" cellspacing="0" width="800" style="table-layout: fixed">
<tr><td width="150" valign="top">







exciteのブログのサイドバーに対しての指定方法

exciteのブログは「最新のコメント」や「最新のトラックバック」についてテーブル(table)で表示しています。この部分はHTML編集部分でユーザが指定できないため、CSS編集で指定することになります。

なお、widthの幅は標準サイズの150pxとしましたが、皆さんの環境に合わせて指定して下さい。

2列スキン CSS編集

.MN table{width:150px;table-layout: fixed;}



3列スキン CSS編集

.MN_L table{width:150px;table-layout: fixed;}
.MN_R table{width:150px;table-layout: fixed;}





おまけ

exciteは自動でテーブルを作成して、「最新のコメント」と「最新のトラックバック」を表示しています。この表示件数を減らすと若干ですが、表示速度が速くなります。(私の体感速度なので違うかも^^;)


今日のポイント
  • テーブル(table)に対してtable-layout: fixed;を指定することによりテーブルの表示速度を速くします。

  • テーブルはtable-layout: fixed;を指定しないときには、テーブルを全て読み込んでからレイアウトを決定して表示します。従って、ユーザの指定がある程度違っていても自動で調整して見れるように表示します。



難易度:★★

ご注意

この技でレイアウトが崩れる方は、スキン編集の指定が間違っているか、レイアウトサイズ以上の大きい画像などがアップされている方です。
もし崩れる場合はこの技は控えて下さい。
よろしくお願いします。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-08-20 22:44 | │├ダイエット(高速化)
<< ★飛び出す付箋紙 画像をスムーズにズームして表示... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。