CSSの基本について

今回は、画面のデザイン をするためのマークアップ言語であるCSSの基本について解説をしていきます。
どの言語もそうですが突き詰めすぎるとキリがなくなるので、 エンジニアとして最低限知っておいて欲しい 項目だけに絞っています。

CSSについて

今回は、画面のデザイン をするためのマークアップ言語であるCSSの基本について解説をしていきます。
どの言語もそうですが突き詰めすぎるとキリがなくなるので、 エンジニアとして最低限知っておいて欲しい 項目だけに絞っています。

なおRailsの場合、CSSファイルは assets/stylesheets というディレクトリの中にあります。

CSSの書き方

まずは セレクタ と プロパティ と 値 という言葉を認識しましょう。

セレクタとは HTMLタグ や class名 や id名 のことです。
プロパティとは デザイン加工するための文法 のことです。
値とは ピクセル(px) または ％ にあたります。

CSSの書き方としては、基本的に以下のようになります。

セレクタ { プロパティ名: 値; }

さらに以下のように複数のプロパティを当てることもできます。

セレクタ { プロパティ名: 値;
          プロパティ名: 値;
          プロパティ名: 値;
          プロパティ名: 値;
}

以下にCSSの当て方として例を示します。

/* タグに対するCSSの当て方 */

h1 {
  color: red;
}

/* カンマをつけることで複数のタグに同じCSSを当てられる */
div, p {
  color: red;
}

/* classに対するCSSの当て方。 .をつける */

.hoge {
  color: red;
}

/* idに対するCSSの当て方。 #をつける */

#hoge {
  color: red;
}

/* hogeというclassが割り当てられているdivタグに対してCSSを当てる */
div.hoge {
  color: red;
}

SCSSとは

ちなみに、Railsの中にある assets/stylesheets の中では、拡張子がcssではなく scss が使われています。
これは SCSS(Sassy CSS) というCSSを拡張した言語のことで、CSSでは使えない変数が使えたりCSSに比べて記述量が減ったりする便利な代物です。

この記事の趣旨からずれてしまうのでここでは深く触れませんが、こちらもご興味がありましたらぜひ調べてみてください！