HTMLのお掃除♪
HTMLソースのクリーニング（お掃除）は、「精密」で「容量が軽い」HTMLを仕上げるためには欠かせないプロセスです。このお掃除の作業を怠ると・・・？？
最悪の場合は、あなたのHTMLソースがグチャグチャになって修正不可能に・・・という悲惨なオチになりかねません（涙）
始めの頃は少し面倒に感じるかもしれませんが、HTMLソースのクリーニングの方法は、のちのち、必ず役に立つ技術です。
クセにしてしまえば簡単なので、ぜひ試してみてください！
「じゃあ、どこをどうクリーニングすればいいの？」
クリーニングすべきポイントは、実はたくさんあります。
（というか、いま全部思い出せないという話ですけど・・・^ ^；）
すみません、ここで全て思い出すのは難しいので、とくに大切なところを2点ほどピックアップします。
余計な半角／全角スペース
とくに、ホームページ作成ソフトを使う場合。
ソフトはHTMLを自動的に作ってくれるのでとても便利ですが、不要な要素まで入ってしまうので注意（！）が必要です。「ありがた迷惑」、というやつですね（笑）
その代表例が、不要な半角スペース。
PHPなどのスクリプトを組み込む場合、余計なスペースがひとつ入っているだけで、プログラムが動かなくなってしまうことすらあります。
ブラウザによっては、余計なスペースがひとつ入っているだけで、レイアウトが崩れてしまうことも・・・
いろいろと問題が出てきてしまうわけです。
不要なスペースの例
下の二つの例を見てみてください。
（□=スペースです）
（例1）タグの開始前に不必要なスペース！
□□<table>
□□<tr>
□□<td>
（※ソースコードをインデントしたい場合は、スペースではなく「Tab（タブ）」を使うことをオススメします）
（例2）タグの終了後にも要らんスペース！
</td>□
</tr>□
</table>□
これ、どれをとっても不要なスペースです。
とくに、タグ終了後に入るスペースは要注意！
「じゃあ、なんでソフトはムダなスペース入れるの？」
その理由、私も聞きたいです（^ ^；
なぜ、不必要なスペースを勝手に入れてしまうのか？？
いまだにナゾなんですが（笑）とにかく、ソフトは勝手に入れるんです！
（私自身が、過去に痛い目に遭った経験があるだけに・・・悲痛な叫び）
スペースへの対処法は？
ソフトが自動的に作成するHTMLソースを、コマメに監視していること！
不要な要素を勝手に入れていないか、ちゃんと見張っていましょう。
よぶんなスペースを発見したら、その場でシコシコ手直ししていくのが確実と思います。
（後でまとめて一括置換する方法もありますが、こちらは技術的に難しいですし、ひとつ間違えるとHTMLソースがグチャグチャになるので、あまりオススメできません・・・）
不必要に何度もくり返している要素
例えば、次のソースを見てください。
<table>
<tr bgcolor="#ff3300">
<td bgcolor="#ff3300">文字列</td>
同一の背景色の場合、bgcolorを<tr><td>の両方で指定する必要はありません。
別に両方に入れても問題は無いのですが、そのぶん、HTMLファイルの容量サイズが大きくなってしまいます。
「そうは言っても、それほど変わらないでしょ？」
いやいや、「チリも積もれば・・・」です。場合によっては、けっこう変わってきますよ。
ムダな繰り返しはできるだけ避けて、ファイルをシェイプアップさせてあげましょう～（^ ^）
ちなみに、次のようなパターンも不必要な繰り返しです。
<table>
<tr>
<td width="150">文字列</td>
</tr>
<tr>
<td width="150">文字列</td>
</tr>
tdセルの幅を指定する「width=」も、何度もくり返す必要はありませんね。
幅指定を何回入れようが、同列にあるセルの幅は変わりません。
さらに突っ込んだデザインノウハウは、メルマガでお届けします！メルマガ読者限定の、サイト無料診断企画もたまにやってます。
>>バックナンバーを見る
Powered by
