DN*BLOG

2008.2.8

HTMLをきれいに書く事。

それがHTMLを書く上での私個人の守りごとです。
そのためには色々考えてコーディングしています。

全体を囲ってる<div>にページに合ったクラス名をつける。

例えば、index.htmlなら、

<body>
<div id="wrapper" class="indexWrapper">
</div>
</body>

と言う感じに全体を囲ってるボックスにid以外にもクラス名をつけます。

これでどこがソースがきれいになるの?
って思うかもしれませんが、これをする事によって無駄なクラス名がへり、HTMLのソースコードがきれいになります。

中身の構造は同じだけど、ちょっと変更を加えたいときの対処。

よくある事だと思います・・・。

例えば、サイトの構造が下記のように
index.html
contact.html
info.html
と三つのhtmlがあるとします。

それぞれのページに以下のソースコードがあるとします。

<div id="container">
    <h1>日記</h1>
    <p>
    明日は3連休。何しようかな。
    </p>
</div>

そして、info.htmlの<p>だけにmarginを加えたいときとかは「<p =”margin10″>」という感じにクラスをつけると思います。

ここで、上記の方法がソースをきれいにする役目をします。

HTMLサンプル(省略しまくり)

<div id="wrapper" class="infoWrapper">
    <div id="container">
        <h1>日記</h1>
        <p>
        明日は3連休。何しようかな。
        </p>
    </div>
</div>

CSSサンプル

.infoWrapper #container p {
    margin:10px 0 5px 0;
}

こうすることによって、無駄なクラス名が生成されないでHTMLがきれいにかけます。

サンプルがすごいシンプルなんで使う必要なくね?って感じますけど、ボリュームのあるページで試してみるとその差がわかると思います。

グローバルナビなどで使ってるリンクを、このページでは背景を常にアクティブにしていたい。
という状況にはすごく役に立つと思います。

この方法は何かと便利なので活用してもらいたいと思っています。

FavoriteLoadingAdd to favorites

Category : (x)HTML , CSS , Web Design

関連する記事