CSSでやりがちな６つの間違い

2008/04/30

カテゴリ：: CSS

タグ：: CSS

CSSでやりがちな間違い

今はCSSを使ってサイトを制作することが標準となっているが、
まだまだCSSをこれから覚えるって人は多いはず。

XHTMLのマークアップをしているときにも、
間違えやすいことは多々有って、
そんな例を挙げているのがエントリーはいくつもある

ブログが続かないわけ | XHTMLでやりがちな8個の間違い

XTHMLのはけっこう目にするが、
僕はCSSでもやりがちな間違いがあるよな〜
なんて思ったので、いくつか上げることにした。

初心者も上級者も、これから挙げるリストの事は気をつけた方がよい。

尚、今回は指定した値で起こるバグとかではなくて、
CSSを書いている段階で間違いやすい点をまとめてみた。

やりがちな６つの間違い

・セレクタを間違える(idやclassを間違える)
・セレクタを重複させる
・セレクタで要素は書いても、idやclassを書き忘れる
・コロン、セミコロンのつけ忘れ
・複数のセレクタ列挙時にコンマのつけ忘れ
・プロパティの重複

一つ一つどういう状態なのか確認してみましょう

○セレクタを間違える(idやclassを間違える)

これはよく間違える。
CSSが適応されていない！なんて思って確かめたら、
セレクタ名が間違っていたなんて経験はないだろうか？
HTMLの方ではid="hoge"ってつけたのに、
cssのセレクタでは#hogと人文字抜けていたとか。

人文字違うだけでもCSSが適応されない自体になるので、
セレクタのつけ間違いは要注意。

階層を全部指定してのロングセレクタ方式にしている人は、
間に含めている要素を間違えたりとかも注意が必要だ。

たとえばこんなHTMLがあったとしよう

<div id="wrap">
    <div id="content">
        <p class="nantoka">
            <span>サンプル</span>サンプル
        </p>
    </div>
</div>

span部分を指定したいときは、単純にspanを指定すればいいが、
それでは全部のspanに指定がかかってしまうので、
「#content p span」と書いたりしたら、
contentというidがついているpの中のspanにしか適応されないので、
詳しく指定したいときには便利である。

しかしここでも、「#contnt p span」や、「#contnt div span」のように、
ものすごく微妙な違いのミスをした場合や、
間に別の要素がはさんである時などは適応されなくなる。
スペルミスや要素のつけ間違いはしないように。

○セレクタを重複させる

これはブログとかでみることが多いのですが、
一度指定したセレクタを、再度指定してしまうというようなこと。
例はこんな感じ。

p{ margin:10px 5px; }
p{ margin:0; }

下の指定が上の指定したところに上書きされてしまうので、
二つ指定する意味がなくなる。
補足的に説明すると、同じセレクタが指定されていた場合、
下に書いてある方を優先的に採用されるようになっている。

同様の例として、こんな場合もある。

p{ margin:0; }
.nantoka{ margin:20px; }

要素で指定しておいても、idやclassによって上書きされてしまう。
間違えないためには、p.nantoka{ ○○:□□; }とした方がいいだろう。

○セレクタで要素は書いても、idやclassを書き忘れる

これは最初の間違いにていて、要素名は書いても、
idやclassを指定し忘れたために、
同じ要素名のところ全部に影響が出てしまうという間違い。
間違わないためには、idやclassがついているのなら、
それだけを記述するようにしたほうがいいだろう。
一番わかりやすくするためには、上に書いたように
要素とセットで書くのが一番いいと思われる。

○コロン、セミコロンを逆につけたりつけ忘れたりする

これも単純な間違いだけど、比較的多いと思われるミス。
プロパティと値の間はコロン（：）だけど、
間違えてセミコロン（；）をつけてしまわないように。

また、プロパティを複数指定するときは、
必ず値の終わりにセミコロンを忘れずにつける事。

○複数のセレクタ列挙時にコンマのつけ忘れ

複数のセレクタを同時に指定するとき、
コンマ（ , ）で区切って指定できるのですが、
改行とかが間に入っていると、改行の時につけわすれたりする。
区切りでコンマのつけ忘れがないようにしよう。

また、中括弧（ { ）の始まる直前にもコンマをつけると、
適応されないブラウザも出てくるから、多くつけないようにしよう。

○プロパティの重複

これはプロパティの指定が多いような場合に起こりがち。
例えばこんな場合

div {
    display: block;
    width: 200px;
    height: 100px;
    margin: 10px;
    padding: 10px;
    line-height: 1.4;
    border: 1px solid #cccccc;
    text-align: center;
    color: #000000;
    font-size: 120%;
    font-weight: bold;
    width: 100px;
    text-align: left;
}

長いので気づかないかもしれないが、
text-alignとwidthが二つ指定されている。
どちらも下の方が採用されていしまうので、間違えないように。

対応方法としては、プロパティの指定順序をアルファベット順にしたり、
Mozilla.orgの提案する順序にするといいだろう。
ちなみに参考 → かたつむりくんのWWW | CSSプロパティの記述順序

これらを気をつけると、CSS作成時の簡易ミスは避けられると思う。
プロパティ値によって引き起こされる問題については別ですけどね。

参考サイト：