CSSとは？
HTMLはページに載せるコンテンツを記載するための言語だったのに対し、CSS（カスケーディングスタイルシート）は、そのコンテンツの装飾だったりレイアウトを調整するための、まったく異なる言語になります。
HTMLだけでHPを構成すると何とも味気ない感じの、いかにもシステマチックな…なんというか、もう「勇者の初期装備」みたいなショボショボな見た目になってしまうのが現実なんです。そこで、もうちょっとかわいくかっこよくしたいじゃない！ってことで使うのがこのCSSという武器なんですね。これがないともう初期装備だよ！！！
CSSはタグが作るボックスを操作するもの
CSSの働きを語るうえで知っておいたほうがいい事前知識があります。
CSSというものは、HTMLであなたが一生懸命に作った要素（タグとかコンテンツとかいろんなもの）に対して、例えば
中央揃え
にしてみたり、大事なところにマーカーを付けてみたりするわけです。
その際頭の片隅に置いておいてほしい内容というのが「ボックス」という概念になります。
HTML内にある<body>タグの内側に書かれたひとつひとつの要素・コンテンツには、それらを表示させるための領域を持っています。人間で言うならプライベートゾーンってやつ（？）です。
いちもんじのこのページについて、ボックスを赤枠で示すならばこんな感じ。↓
CSSは、このような稼働領域＝ボックスの表示を色々と操作することによってHTMLの見た目を変化させるわけです。その働きについてまとめてみると、大体こんな感じです。
- ボックス内のコンテンツの表示を操作（テキスト色を変えたり行間を調整したり）
- ボックスそのものの表示を操作（ボックスに背景を付けたり枠線付けたり）
- ボックスの配置や位置関係を操作（ボックスを横並びにしたり重ねたり）
要素のボックスの確認方法
自分のホームページを作っていると、わけのわからない形にレイアウトが崩れてしまったりすることがあります。そんな時に一体どうなっているんだ！？と発狂しそうになりますが、いったん冷静になってこれらの要素のボックスが今どんな感じになっているのかを見ることが出来たら、もしかしたら何かが分かるかもしれません。ということで、やり方はこんな感じ。
<html>
<head>
<title>…
<style>
*{
outline:1px solid #FF0000;
}
</style>
</head>ヘッダーの中において<style>タグで、すべての要素に対して枠線を付けるということをしております。これはあくまでも見た目の確認のためなので、必要なくなったら削除することを忘れないようにしましょう。
CSSの書き方
それじゃあそのCSSとやらの書き方を紹介していきましょう。
まず基本的な流れとしてはこうなっています。↓
- HTMLから対象となる要素を選択
- 選択した要素に装飾（スタイル）を付ける
これを更に説明するとこうなります。↓
これで１セットのCSS
- セレクタ
- 宣言（プロパティと値）
この２つがあってやっと１つのCSSです。装飾を付けたいときにはこれらを１セットで書きます。
セレクタとは
セレクタというのは、HTMLの中で装飾を付けたい対象のことです。まさに上で紹介した、1.のHTMLから対象となる要素を選択がこの工程です。
この部分にはいろいろな書き方があって（classとかね）、それを使い分けることによって対象の選択をより詳細なものとして設定することが可能です。（例えば同じ<p>タグでもこっちの<p>にはマーカーをつけてこっちの<p>には背景に色を付けるよ的な感じで同じタグなんだけれどもつける装飾を分けたりすることができます。）
ちなみにさっきの上の例では、すべての<p>要素に対して指定した内容が適用されます。
宣言ブロック（スタイル）とは
{}の中にはセレクタで選択した要素に対して一体どういうスタイルを付けたいのかを指示する内容が書かれています。この中には複数のスタイルを指定することができるので、上の例みたいに背景に色を付けて、左の余白を無くして～みたいに同時に複数の装飾を付けることができます。
プロパティとは
要素に対してどうしたいかの、「どうしたいか」の部分がプロパティになります。上の例で言えば
- background-color（背景色を指定しますよ）
- margin-left（左の余白をどうにかしたいです）
この部分がプロパティに該当します。CSSにはこのようなプロパティがたっくさん定義されているので、自分がどうしたいのかを考えたときにそのような動きをしてくれるプロパティを知っておく必要があるわけです。
値とは
プロパティが「どうしたいか」の部分であれば、値の部分はそれを「具体的にどのように設定するのか」を示すのがこの「値」の部分です。
例えばですが、背景色を変えますというのがbackground-colorです。でもこれだけでは「いや、一体何色に変えたいの？」ってなりますね。その答えを書くのがこの値の部分になります。
例で言うとbackground-color:#000000;としています。これはカラーコードと言って、この6桁の数字が色を表しているわけです。このサイトを見るとめっちゃわかりやすいです。
#000000というのは黒を表しています。なのでこの<p>で囲まれている部分というのは、背景色が黒になるわけです。（見づらいですね…。しかもデフォの文字の色も黒なので何も見えないことになりますね…。）
宣言（スタイル項目）とは
「プロパティ」と「値」を組み合わせたものがスタイル項目になります。これを正式名称では「宣言」と言います。「宣誓！僕たち！私たちは！！これらのプロパティと値を使うことを！ここに宣言します！！」というイメージの宣言です。様式としては、こうですね。↓
プロパティ:値;
値の始まりと終わりについているこのゴミみたいなの、「:」と「;」を忘れないようにしましょう。これを忘れると上手く動作しないこともあります。
また、CSSのコードが見やすいように、「:」や「;」の前後に半角スペースを入れるのが主流のようです。（一文字的には知ったこっちゃねえ！！って感じで今までスペースとか入れてなかったので逆にこのスペースめっちゃ気になります…。プログラミングとかやっててもスペースのせいで上手くいかないこともあったりするので…。）
ちなみにスペースを入れてもいい場所はここ●になります↓
プロパティ●:●値●;
まあぶっちゃけ言うと、自分一人でHP作るんだったら別にスペース要らないやって思う人はつけなくていいと思います。
全体の設定や条件指定をする＠ルールについて
これまでに学んできた内容は各要素に対して何か装飾を付けるといったものでしたが、そうではなく、CSS全体に対して装飾をしたいだとか、スタイルの適用条件を指定したいだとかいうことがあります。こうしたルールは@ルール（あっとまーくるーる）と言い、セレクタを書くことなく、その代わりに「@」で始まる書式が定義されています。
その代表例が「メディアクエリ」と言われるもので、これが何かというとホームページを見る際の端末によってレイアウトが崩れないようにする「レスポンシブデザイン」を実現するための主力な機能となっていて、現在のウェブデザインには欠かせないくらいに大事なものになっています。
詳しい記事はまた別にまとめたいと思います。
