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

●ホームページを軽くしたい！

HTMLソースを見直して、HTMLファイルを物理的に軽くしてみましょう。
特に、ホームページ作成ソフトを用いて作っている場合、ソース中には無駄がたくさんある可能性があります。また、テキストエディタで記述している場合でも、うっかり作ってしまう無駄な部分があるかも知れません。
ぜひチェックして、しっかり無駄を省いてみましょう。

CONTENTS

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

POINT1◆意味のないタグを省く

これは、ホームページ作成ソフトを使って生成しているソースに良くあるパターンです。

■段落の中身が改行だけ…
  ※ を囲んでいるタグは不要ですね。何行空けたいのかハッキリさせて、必要な分の タグを入れましょう。

■何色？…

 赤色  ※外側に青色の指定がありますが、その色で表示される文字がありません。外側のタグは不要ですね。

■中身が空っぽ…

<H3></H3> ※当然、不要ですね。まるごと削除しましょう。

POINT2◆できるだけまとめる

ホームページ作成ソフトでも起こりますし、テキストエディタを使っている場合でも、いろいろ編集しているうちに、このような無駄が起こる場合があります。

■１つにまとめられます…
 小さい緑色  ※色指定とサイズ指定は同じタグですから、１つのタグにまとめられます。次のように修正しましょう。
小さい緑色

■たくさんあるならスタイルシートを検討しましょう

小さい緑色 ※このような装飾がたくさん存在するなら、スタイルシートでの実現を検討しましょう。事前に、<HEAD>部で
SPAN.sg { font:smaller; color:green; }
と記述しておけば、実際に装飾したい各所では、
小さい緑色
と記述するだけで良くなります。

POINT3◆字下げにはタブを

テキストエディタなどでHTMLを編集する場合、構造に応じて「字下げ」して記述すると、ソースが見やすくなります。しかし、複雑な構造であればあるほど、字下げに使用するスペースの量が多くなってしまいます。

■字下げ記述の例
<TABLE BORDER="1"> <TR> <TD BGCOLOR="#ffffcc"> 表組みの１セルの中身です。 </TD> </TR> <TR> <TD BGCOLOR="#ffffcc"> 表組みの１セルの中身です。 </TD> </TR> </TABLE>

字下げには、「タブ（TAB）」キーを使用しましょう。タブは、見た目には複数文字分のスペースが空きますが、データとしては、１バイト（＝半角スペース１つ分）です。
テキストエディタには、タブのスペースを調節できる機能を持ったものがありますから、そういったエディタを使用して、タブのスペースを見やすい空白量に調節すると良いでしょう。

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

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

次のページへ続きます