| CONTENTS |
|---|
|
POINT1： 意味のないタグを省く POINT2： できるだけまとめる POINT3： 字下げにはタブを POINT4： コメントアウトの存在を忘れずに POINT5： 表には table-layout:fixed を使う POINT6： 共通のスタイルは別ファイル化を POINT7： 文法的に省略可なものは省略 POINT8： スタイルシートでの記述を検討 |
POINT7◆文法的に省略可なものは省略
HTMLの文法上、省略しても構わないとされている閉じタグがあります。 省略して良いものは省略してしまいましょう。
|
■省略できる閉じタグの例 ＊リスト...
<UL><LI>省略できるものは省略</LI> <LI>省略できないものは記述</LI> </UL> ＊テーブル...
<TABLE><TR><TH>ヘッダ</TH></TR> <TR><TD>中身</TD></TR> </TABLE> ※上記の場合、行末の</TR>を省略すると、行末の改行のせいで、最後の列（セル）にスペースが入ってしまうので、行末の</TR>は省略しない方が良いです。 ＊プルダウンメニュー...
<SELECT name="favorite"><OPTION>アイスクリーム</OPTION> <OPTION>かき氷</OPTION> </SELECT> |
ただし、サイズを惜しんで必要な属性まで省略しないように注意して下さい。
|
■省略せず記述することが望ましい属性 ＊画像のALT属性
<IMG SRC="photo.jpg" WIDTH="300" HEIGHT="200" ALT="大阪USJの写真">※画像が表示できない場合や音声読み上げブラウザなどのために. ＊画像のサイズ
<IMG SRC="photo.jpg" WIDTH="300" HEIGHT="200" ALT="大阪USJの写真">※読み込む前から占有スペースがハッキリするので表示が早くなる。また、画像が読み込めなくてもデザインが崩れない。 |
POINT8◆スタイルシートでの記述を検討
HTMLタグでも実現可能なデザインでも、スタイルシートに置き換えることで、サイズ節約と省力化を図ることが可能になります。 特に、同じデザイン（装飾）をする箇所が多く出てくるなら、スタイルシートを使うことを検討してみましょう。
|
■例 <P ALIGN="center"> <FONT SIZE="+1" COLOR="blue"><B> 第１章 省力化の手法 </B></FONT> </P> <P ALIGN="left"> <FONT COLOR="darkblue"> 可能な限り無駄を省くには... </FONT> </P> ※例えば、上記のような「タイトル」と「本文」の修飾が何度も登場するなら、事前に、<HEAD>部で P.title { text-align:center; color:blue; font:larger bold; } P.main { text-align:left; color:darkblue; } と記述しておきましょう。すると、次のように記述するだけで済むようになります。 <P CLASS="title"> 第１章 省力化の手法 </P> <P CLASS="main"> 可能な限り無駄を省くには... </P> と記述するだけで良くなります。 |
同じ修飾が多ければ多いほど、スタイルシートを活用する方がサイズを小さくできます。
また、デザインの変更を行いたい場合も、スタイル定義部分１カ所を書き換えるだけで、全ての箇所に変更が適用されるので便利です。
●「軽く見せる」方法も実践しましょう
今回は、HTMLソースを軽くする方法を中心に述べてきました。 前回のCloseUp!では、ソースを軽くするのではなく、「軽く見せる」方法についてご紹介いたしました。 ぜひ、そちらも同時に試してみて下さい。
なお、HTMLについて詳しく知りたい方は、All About Japan 内に「HTML」ガイドサイトがありますので、そちらもご参照下さい。
過去の記事もぜひどうぞ：
| ★過去のシリーズ★ |
|
『ページを軽くしたい！』 第２回●ページを軽くしたい！ ソース編 第１回●ページを軽くしたい！ 構造編 |
