cssの基本事項(個人メモ)

さて、今回はCSSの基本を振り返るという自戒の意味を込めての記事です。
webデザインを参考にしたサイトのソースやググったり、書籍の一部をかじったりして何となくコードを書いていた私ですが、いろいろと行き詰る機会も多く、このままだと「動くからこのコードでいいや」といい加減な感じになりそうだったので基本を振り返ってみることにします。


参考サイト:CSS HappyLife

1.大文字と小文字の区別

CSSではid名やclass名は大文字と小文字が区別されるので、下手に大文字を使ったりせず、まずは小文字で統一しましょう。

CSSに関する基本的なこと1(記述方法、使用できる文字、コメントアウト) - CSS HappyLife


2.実はピクセルは相対単位

px指定は、ディスプレイの解像度に依存して大きさが変わるので、相対単位になってますが、大半のブラウザでは「絶対単位」として解釈されるので実質「絶対単位」だと思って問題ありません。

CSSに関する基本的なこと2(単位、色、継承) - CSS HappyLife


3.CSSでの値の一括指定(一部プロパティ)

順番は時計回りと覚えておきましょう。
上記の場合、4箇所指定しているので「上」「右」「下」「左」ですが、指定している数によって適用対象が変わります。

  • 値1つ:上下左右全て
  • 値2つ:「上下」と「左右」
  • 値3つ:「上」と「左右」と「下」
  • 値4つ:「上」と「右」と「下」と「左」

CSSに関する基本的なこと3(ショートハンド) - CSS HappyLife

値3つの時のプロパティ指定は目から鱗でした。


4.CSSは後から読み込んだスタイルを優先的に適用する。

スタイルのもっとも基本的な優先順位は、「後から読み込んだスタイルを優先的に適用」します。
CSSに関する基本的なこと4(優先順位、セレクタの組み合わせ) - CSS HappyLife

この項目の下記に記述してある優先順位の計算は、CSSに慣れてからもう一度読みたいです。