[CSS]CSSビギナーに気をつけてほしい5つのポイント

Post on:2010年3月25日

1. classとidは適切に使用する

ビギナーは新しいclassをどんどん作成してしまう傾向があります。冗長なものや不必要なclassやidはCSS本来の目的からはずれるものです。
CSSの美しさはデザインをマークアップから切り離すことにあり、それを許すということです。またclassやidを最小限にすることで負荷を減らすことにも繋がります。

Bad

p要素それぞれに全て個別のclassを使用しています。

<textarea name="code" class="html" cols="60" rows="5">
<div id="sidenav" class="left">
    <p class="side-heading"><strong class="green">Side Navigation Title</strong></p>
    <p class="sidenav-menu1"><a href="#" class="blue-link">Home</a></p>
    <p class="sidenav-menu2"><a href="#" class="blue-link">About</a></p>
    <p class="sidenav-menu3"><a href="#" class="blue-link">Services</a></p>
    <p class="sidenav-menu4"><a href="#" class="blue-link">Portfolio</a></p>
    <p class="sidenav-menu5"><a href="#" class="blue-link">Contact</a></p>
</div>
</textarea>

<p class="side-heading"><strong class="green">Side Navigation Title</strong></p>

<p class="sidenav-menu2"><a href="#" class="blue-link">About</a></p>

<p class="sidenav-menu3"><a href="#" class="blue-link">Services</a></p>

<p class="sidenav-menu4"><a href="#" class="blue-link">Portfolio</a></p>

<p class="sidenav-menu5"><a href="#" class="blue-link">Contact</a></p>

</div>

</textarea>

Good

まとめられるclassやidはまとめて使用します。

<textarea name="code" class="html" cols="60" rows="5">
<div id="sidenav">
    <h2>Side Navigation Title</h2>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>
</textarea>

<h2>Side Navigation Title</h2>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

</textarea>

2. スタイルシートはクリーンにしておく

私たちの多くが時折、マークアップにインラインのスタイルを残してしまうことがあります。これはよくないことで、最終的には一貫性のないものを作ることになってしまいます。
ビギナーとして、まず全てのスタイルをマークアップから取り出すことをはじめてください。その際、スタイルシートを分かりやすく組織化して記述することは非常に重要です。

Bad

h1要素にインラインのスタイルを指定しています。

<textarea name="code" class="html" cols="60" rows="5">
<h1 style="font-size: 20em; font-weight: normal; font-family: arial; color: red; padding: 10px; margin: 10px;">H1 - Heading</h1>
</textarea>

<h1 style="font-size: 20em; font-weight: normal; font-family: arial; color: red; padding: 10px; margin: 10px;">H1 - Heading</h1>

</textarea>

Good

CSSを分離して別ファイルにスタイルを指定します。

HTML

<textarea name="code" class="html" cols="60" rows="5">
<h1>H1 - Heading</h1>
</textarea>

<h1>H1 - Heading</h1>

</textarea>

CSS

<textarea name="code" class="css" cols="60" rows="5">
/*------Global Heading Properties------*/
h1 {
    font: 20em normal arial;
    color: red;
    padding: 10px;
    margin: 10px;
}
</textarea>