Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- CSS入門編 - CSSを書くときのインデントマナー
TechAcademy(テックアカデミー)
当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。
紹介記事はこちらへどうぞ。
運営及び開発費用ご支援のお願い
当サイト(wp-p.info)の情報はお役に立ちましたでしょうか。当サイトでは運営及び開発費用ご支援の募集をさせて頂いております。よろしければご支援についてご検討頂けませんでしょうか。何卒宜しくお願い致します。
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 HarutoISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。 |
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
TechAcademy(テックアカデミー)
当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。
紹介記事はこちらへどうぞ。
Introduction
当サイトでは有料会員様の募集をしております。現在約431本の記事を公開中です。
有料会員になるとこれら全ての記事が読み放題となります。
お申込み頂ける際はログインまたはアカウント作成後、有料会員件をご購入下されば幸いです。有料会員権はまとめ買いがお得です。
現在の有料会員権一覧sale中!!
30日分980円
月額約980円、日額約32円
90日分通常2940円のところ1980円 (960円OFF)
月額約660円、日額約22円
180日分通常5880円のところ2980円 (2900円OFF)
月額約496円、日額約16円
360日分通常11760円のところ4980円 (6780円OFF)
月額約415円、日額約13円