Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSS
入門編

トップページ
CSS入門編 - CSSを書くときのインデントマナー

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のコメントアウトについて確認していきましょう。

ではでは～。

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