【完全初心者向け】CSSについての超簡単まとめ

WEBサイトを作る上で、HTMLと並んで絶対に欠かせない言語といえばCSS。

この記事ではCSSについてなるべく難しい言葉を使わずに、でも要点は抑えて解説していこうと思います。是非肩の力を抜いて読み進めて行ってください。

CSSとは？

CSSはCascading Style Sheets(カスケーディング・スタイル・シート)の略で、HTMLで使用されている要素の色やレイアウトなどの外観を指定するための言語です。

CSSはCSSで記述したファイルをHTMLファイルに、読み込ませて使用します。読み込ませるためには、HTMLファイルのheadタグ内のlinkタグに以下のように記述します。

HTML

<link rel="stylesheet" href="style.css">

CSSの記述例

CSSは「どの要素に」「どのようなスタイルを適用するのか」を記述します。

「どの要素に」の部分をセレクタと呼び、「どのようなスタイルを適用するのか」の部分をプロパティと呼びます。プロパティと値の間はコロン（ : ）で区切ります。

CSS

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

下記の場合、h1のcolorをredにするという指定になります。

CSS

h1{color : red;}

下記のように、複数指定することもできます（h1のcolorをredに、そしてフォントサイズを12pxにという指定）。

CSS

h1{
	color : red;
	font-size : 12px;
}

セレクタ

上の例のセレクタは要素名（h1）を書いてあるだけのシンプルなものですが、セレクタの種類を使い分けると様々な対象にスタイルを適用できます。

セレクタの種類は以下の通りです。

下記の場合、ユニバーサルセレクタを指定しているので、全ての要素のcolorをredにするという指定になります。

CSS

*{color : red;}

プロパティと値

セレクタと同じようにプロパティも、様々な種類があります。

プロパティの種類は以下の通りです。

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の3点です。

基礎を知らないと思い通りにスタイルを適用させる事ができないので、CSSのセレクタとプロパティはしっかりと覚えましょう。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。