CSSレイアウトの魅力 - ソースの軽さ

CSSで各種の指定を行うことによるHTMLソースの軽減についての説明。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

CSSレイアウトの魅力 - ソースの軽さ

CSSでレイアウトしたホームページは、TABLEタグでレイアウトしたものにくらべHTMLソース(ファイル)が軽くなります。

CSSによるレイアウトでは、通常DIVタグに「id」もしくは「class」といったセレクタを記載し、CSS記述部分を参照させて幅や色などを指定します。その際のソースを表すと次のようになります。(「id」と「class」の違いについては「idとclassの違い」参照)

[セレクタを指定したHTMLタグ]

<div class="***">テキスト</div>

TABLEタグもDIVタグ同様にCSSで装飾を指定することができますが、同じ部分のHTMLでもTABLEタグを利用すると、ソースが長くなってしまいます。

[tableタグを使用した例]

<table class="***"><tr><td>テキスト</td></tr></table>

上のDIVタグによる記述を比較すれば一目瞭然かと思います。

上の例ではたいしたことなさそうに見えるかもしれませんが、このような記述が積み重なってできるホームページでは、大きなソースの軽減となります。

最近ではブロードバンドが普及し、多少重たいサイトでも楽に閲覧することができるようになりましたが、訪問者のことを考えればより軽いサイトを作ることが望ましく、少しのソースの軽減が、訪問者の快適さ(ページの表示の速さ)に繋がります。

また、有料・無料問わず、レンタルサーバーには容量に限りがあります。個人運営のサイトを立ち上げる程度であれば容量は十分に足りるとは思いますが、将来にわたってホームページを運営していく場合、空き容量は多いに超したことはありません。

訪問者のストレスを軽減し、サーバーの容量も節約できるのがCSSによるレイアウトの魅力のひとつです。