CSSを書くときのインデントマナー

みなさまどうもこんにちは。

続いてCSSのインデントマナーについて確認していきましょう。

一般的なインデントされたCSSの記述はこのような形ですね。大多数の方がこのように記述していると思います。

p {
    font-size: 18px;
    font-weight: bold;
}

まずセレクタを記述し、そこに波括弧の左側を置きます。そのあと改行して宣言を記述します。宣言の文頭にタブ文字か、もしくは半角スペースを置いて位置を揃えます。半角スペースの数は2つか4つであることが多いですね。半角スペース3つや6つなどはあまり見たことありません。

あとは必要なプロパティの数だけ記述し、最後に改行して波括弧を閉じます。これがひとつのパターンです。

次に少数派ですが、改行をしないパターンがあります。

p { font-size: 18px; font-weight: bold;}

こちらは半角スペースを1つだけ空けて宣言を記述していくだけですので簡単かと思います。同じセレクタのプロパティは一行で書く、というイメージですね。

ちなみに私は上記のように改行をしないで記述しています。理由としては宣言の被りに気づきやすいからです。

例えば先の記事で解説する子孫要素、というのがあるのですが、

p { font-size: 18px; font-weight: bold;}
p span { font-size: 18px; color: red;}

上記の場合は『font-size: 18px』という同じ宣言が記述されてしまっています。これは間違いではないですが必要のない記述です。正しくはこうなります。

p { font-size: 18px; font-weight: bold;}
p span { color: red;} 

このような宣言の重複は横並びでCSSを記述していった方が気づきやすいです。見比べてみてください。

p { font-size: 18px; font-weight: bold;}
p span { font-size: 18px; color: red;}

p {
    font-size: 18px;
    font-weight: bold;
}
p span {
    font-size: 18px;
    color: red;
}

いかがでしょうか。他には一万個くらいのセレクタが記述されたCSSファイルを構築したり修正したりすることがあるのですが、一万個のセレクタの宣言一つ一つに改行を加えていくと全部で六万行くらいになってしまいます。そうすると改行が逆に仇になって読みにくくなってしまうので後者のようにセレクタごとに改行してあったほうが読みやすいです。

どちらもメリットデメリットがありますのでみなさんはお好きなほうのインデントマナーで記述してしまって問題ありません。

もし決めかねているのであれば改行を加えていくインデントの方が大多数派ですのでCSSに慣れないうちは改行していく方でインデントしたほうが無難かもしれません。

というわけでこの辺で。次の記事ではCSSのコメントアウトについて確認していきましょう。

ではでは～。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア