CSSの基本について

Design

Aws4 request&x amz signedheaders=host&x amz signature=a3c73240263c0ad60c7436fcf24d42694fdfc751ca2cf4fb0982a3f3413becb3

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に比べて記述量が減ったりする便利な代物です。

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

一覧にもどる

DIVE INTO CODEのことをもっと知ってみませんか?