2/3 ホームページの表示を速くするには［２］　ページを軽くしたい！ソース編 [ホームページ作成] All About

CONTENTS

POINT1：意味のないタグを省く
POINT2：できるだけまとめる
POINT3：字下げにはタブを
POINT4： コメントアウトの存在を忘れずに
POINT5： 表には table-layout:fixed を使う
POINT6： 共通のスタイルは別ファイル化を
POINT7：文法的に省略可なものは省略
POINT8：スタイルシートでの記述を検討

POINT4◆コメントアウトの存在を忘れずに

特定の部分を一時的に無効（非表示）にする方法として、「コメントアウト」という方法があります。
便利な方法なのでよく使われますが、コメントアウトしたままの存在を忘れてしまわないように注意しましょう。

■コメントアウトの例
<DIV ALIGN="center">  赤色での表示を一時的にやめ。  </DIV> ※上記の例では<FONT>タグだった部分をコメント（）にすることで無効にしています。

不要だと判った時点で、ちゃんと削除しておきましょう。
大きいページであればあるほど、埋もれて忘れがちになりますので注意して下さい。

POINT5◆表には table-layout:fixed を使う

表組みは、中身を全て読み込んでからでないと描画位置を決定できないので表示が遅くなります。ページ全体の表示完了時間は変わらなくても、表示が「遅い」と「重く」感じられてしまいます。
もし、表組みの横幅を固定できるなら、スタイルシートの table-layout:fixed を活用して横幅を固定しましょう。すると、読み込み完了を待たずに、読み込んだ端から順番に表示されるようになります。（ただし、ブラウザに依存します。）

■記述方法
<TABLE STYLE="table-layout:fixed;"> <COLGROUP> <COL WIDTH="100"><COL WIDTH="200"> </COLGROUP> <TR><TH>CPU</TH><TD>Celeron 400MHz</TD></TR> <TR><TH>MEM</TH><TD>DRAM 256MB</TD></TR> ：：： <TR><TH>CRT</TH><TD>17inch</TD></TR> </TABLE>

「table-layout:fixed;」というスタイル指定と、<COL>タグ^※による横幅サイズの指定を使うと、ブラウザは表組みの表示位置の計算を行う必要が無くなるので、上から順に読み込んだ端から表示されることになります。対応していないブラウザには悪影響はないので、大きな表組みには書き加えてみましょう。
※<COL>タグは、列の数だけ必要です。上記の例では、１行は２列なので<COL>タグは２つ書かれています。ただし、隣り合う列が同じサイズなら、<COL SPAN="2" WIDTH="xxx">と記述することで、複数列をまとめて指定することが可能です。

POINT6◆共通のスタイルは別ファイル化を

サイト内の各ページで、共通のスタイル指定が存在するなら、別の「スタイル専用ファイル」を作成して、そこにまとめてしまいましょう。そうすると、ブラウザによってはキャッシュし、２ページ目以降の読み込み量が減ってくれます。（例えそうでなくても、共通の定義を別ファイル化することは、変更の容易さから考えても便利です。）

■記述方法（HTML）
<link rel="stylesheet" type="text/css" href="my.css"> ※この１行を<HEAD>～</HEAD>の中に記述しておきます。「my.css」はスタイルを記述したファイル名です。

■記述方法（スタイル定義ファイル）

SPAN.comment { color: green; font-size: smaller; } SPAN.strong { color: red; font: larger bold; } ：：： DIV.sub { margin: 5px 10px; background-color: gray; } ※スタイルをまとめた別ファイルには、そのままスタイルの定義だけを記述します。

POINT7◆文法的に省略可なものは省略

HTMLの文法上、省略しても構わないとされているものがあります。省略して良いものは省略してしまいましょう。ただし、省略しては困るものもありますので注意して下さい。

次のページへ続きます