ホームページ作成/ホームページ作成関連情報

ホームページの表示を速くするには[2] ページを軽くしたい! ソース編(3ページ目)

ホームページを軽くするにはどうすれば良いでしょうか? 今回は、HTMLソースの無駄を省いて、物理的にHTMLファイルを軽くする方法をご紹介致します。ぜひ試してみて下さい。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

CONTENTS

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>
    第1章 省力化の手法
  </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">
  第1章 省力化の手法
</P>
<P CLASS="main">
  可能な限り無駄を省くには...
</P>
と記述するだけで良くなります。

同じ修飾が多ければ多いほど、スタイルシートを活用する方がサイズを小さくできます。 また、デザインの変更を行いたい場合も、スタイル定義部分1カ所を書き換えるだけで、全ての箇所に変更が適用されるので便利です。

「軽く見せる」方法も実践しましょう

今回は、HTMLソースを軽くする方法を中心に述べてきました。 前回のCloseUp!では、ソースを軽くするのではなく、「軽く見せる」方法についてご紹介いたしました。 ぜひ、そちらも同時に試してみて下さい。

ページを軽くしたい! 構造編』へ

なお、HTMLについて詳しく知りたい方は、All About Japan 内に「HTML」ガイドサイトがありますので、そちらもご参照下さい。

過去の記事もぜひどうぞ:
★過去のシリーズ★
『ページを軽くしたい!』
第2回●ページを軽くしたい! ソース編
第1回●ページを軽くしたい! 構造編
【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます