CSSは、Web制作においては必須の基本言語のひとつで、Cascading Style Sheets (カスケーディング・スタイル・シート)の頭文字からCSSと呼ばれています。
CSSと同じく、Web制作で必須となるHTMLという言語もありますが、HTMLは文章の構造を指定するのに対して、CSSはその文章のレイアウトや装飾のようなデザイン、つまり見た目を指定します。
HTMLについては以下の記事をご覧ください。
CSSの歴史
CSSは1994年に誕生しました。CSSにはLebel[レベル]（=バージョン）があり、CSS Level1（CSS1）、CSS Level2（CSS2）とレベルがあがり、現在はCSS Level3（CSS3）が主流となっています。
HTMLと同じようにそれぞれのレベルで記述する際のルールが異なる場合があります。
CSS3ではアニメーションやグラデーション、グリッドレイアウトなどを扱うことが出来るようになっていて、今まではJavaScriptや画像を使わないとできなかったようなことがHTML5とCSS3で実現可能となりました。
CSSの基本
CSSの構造
CSSを記述する際の基本構造は、「セレクタ」、「プロパティ」、「値」で構成されます。
- セレクタ
- セレクタはスタイルを適用させる対象です。HTMLタグやHTMLタグに指定されているID属性、class属性などを指定します。
- プロパティ
- プロパティはセレクタにどういった効果を与えるかを示します。例えば文字の色を変えたければ
colorプロパティ、文字の大きさを変えたければfont-sizeプロパティを使用します。 - 値
- プロパティに指定する具体的な内容が値です。文字を赤くしたい、文字サイズを24pxにしたいという場合の「赤（=red）」、「24px」が値となります。
セレクタでCSSを適用させる対象を指定し、プロパティ・値で具体的なデザインを指定します。また、プロパティと値は常に一対となっているます。
CSS記述方法
CSSの記述の形は一定なので、まずは基本の記述の型を覚えましょう。
セレクタ、プロパティ、値の3つの要素を使った基本形は以下のようになります。
セレクタ{
プロパティ: 値;
}
まず、セレクタを記述します。
「{」と「}」の中でプロパティと値を記述します。
プロパティに対して、「:」を挟んで値を指定します。そして最後に「;」を記述します。
例えば、pタグで囲まれた文字色を赤くしたい場合は以下のように記述します。
p{
color: red;
}上記のスタイルを適用させるとpタグで囲まれているテキストが赤色になります。
CSSの読み込み方法
CSSを書いただけで終わりではありません。作ったCSSをHTMLへ適用させることで、はじめてHTMLにCSSの効果が反映されます。
CSSの読み込みは、CSSを記述した外部ファイル(.css)を使う方法、HTMLファイル内で直接記述する方法などがあります。
詳しくは以下の記事にまとめてあります。
基本的には外部ファイル（style.cssなどを用意する）を使用すると良いでしょう。
なお、外部ファイルを読み込む場合はHTMLのlinkタグを使用します。
CSSプロパティの一例
- width
- widthは要素の横のサイズ、つまり“幅”を指定するプロパティです。
div{ width: 300px; }- height
- heightは要素の縦のサイズ、つまり“高さ”を指定するプロパティです。
div{ height: 300px; }- font-size
- font-sizeは要素のテキストサイズを指定します。
p{ font-size: 16px; }- color
- colorは要素のテキストカラー（色）を指定します。
p{ color: black; }- background-color
- background-colorは要素の背景色を指定します。colorプロパティと間違えないように注意しましょう。
div{ background-color: #606060; }
プロパティの種類は数多くありますが、目的別など大分類にできるので、用途に合わせて少しずつ覚えていきましょう！
まとめ
- CSSはレイアウトや装飾などのデザイン、を指定して見た目を表現する
- CSSはセレクタ、プロパティ、値の3つの項目で構成されている