css入門！初心者でもできるスタイルシート基礎講座と使い方

いよいよcssを使って webページのデザインを作っていきます！

cssさえ使えれば、自由にブログやホームページのデザインを変える事ができます。
そして自分でコードを記述するだけで、デザインがどんどん変わっていくので一番面白い所でもあります。
このページでは、「cssを記述する場所」「cssファイルの作り方」「デザインの変え方」「セレクタの使い方」など、cssの基礎の部分や使い方について紹介してきます。
それとcss入門という事で、できる限り専門用語は使いません。
cssが初めての初心者でも、完全にマスターできるように紹介していきますね。

cssの書き方の基本をマスターしよう

css（カスケーディングスタイルシート）は、 webページの見栄えを設定するための言語です。そのため、css自体はブラウザ（画面）に表示される事はありません。あくまで「見た目の設定をするためのコード」と考えて下さい。
例えば、「背景の色を黒にしたい」「文字のサイズを変えたい」「枠の幅を変えたい」などの見栄えに関する部分は全てcssで指定します。
cssは基本的には、下のような書き方をします。

css書き方の基本セレクタ｛プロパティ：プロパティ値;｝

分かりやすくいうと、下のような感じです。

対象のhtmlタグの｛何を：どう見せるか；｝
例えばh1の色を赤にして、
h1の文字サイズを20pxにしたい時は下のように書きます。

セレクタにはh1、p、divやその他のタグなど、「どこの部分を変えたいか」を指定します。
プロパティには、背景色、サイズ、表示位置など、「何を変えたいか」を記述します。
プロパティ値には、「どうみせたいか」を記述します。

セレクタとは

cssで設定したスタイル（見た目）をhtmlに適用する時に、どの要素（h1なら[h1]～[/h1]部分）に対して適用するか指定する部分の事をセレクタと呼びます。
セレクタには、h1、p、div、bodyなどのhtmlの要素名を指定しましょう。 [h1]～[/h1]{color:red;}と書いても反映されないので注意。
セレクタをh1にした場合、 htmlドキュメント内（ファイル）すべてのh1にcssで設定したスタイルが適用されます。
例えばcssでh1｛color:red;｝と記述した場合は、 htmlドキュメント内にあるすべてのh1の文字色が赤になります。
div｛color:red;｝であれば、すべてのdiv内の文字色が赤になる。
ちなみに、セレクタには独自の名前を付けて、別々にスタイル（見た目）を設定する事ができます。（後ほど説明）

プロパティとプロパティ値とは

スタイル（見た目）を適用する対象の事を「プロパティ（属性）」といいます。例えば、font-size、colorなどなど。
プロパティに指定する値の事を「プロパティ値（属性値）」と言います。ちなみにプロパティにプロパティ値を設定する事を宣言と呼びますが、用語は覚えなくて大丈夫です。

宣言の部分プロパティ：プロパティ値；

cssの書き方の基本というか仕組みは、こんなものです。
あと、プロパティとプロパティ値の間には必ず「：」（コロン）、プロパティ値の最後には「；」（セミコロン）を付けましょうね。これがないとエラーを起こします。
それと、colorやfont-sizeなどのコードは覚えなくて大丈夫です。まずは、cssの書き方だけ覚えましょう！

セレクタ｛プロパティ：プロパティ値;｝

対象のhtmlタグの｛何を：どう見せるか；｝

cssを書く場所を覚えよう

cssの意味不明な部分の一つが、記述する場所だと思います。「なんで違うファイルに書いてるのに反映されるの？」「どこに記述すればいいの？」などなど、色々不思議に思っちゃいますよねｗ
実はcssには3種類の記述する場所があります。

●cssが記述できる3種類の場所 HTMLタグに直接書く HTMLファイル内に書く CSSファイルに書く

cssは3つの場所すべてに書く必要はありません。 3つの中のどれか一つに記述すれば適用されます。
「じゃあ、どこに書いてもokだね」と思うかもしれませんが、okではないんです。
実は記述する場所によって、書いたcssの優先順位が変わってしまいます。例えば、htmlタグに直接「h1の色を赤にする」というcssを書いたとします。そしてcssファイルには「h1の色を黒にする」というcssを書きます。
どちらも同じh1に対して、赤と黒の色指定をしていますよね。こういう場合、h1が赤と黒のグラデーションになるわけではなく、 htmlタグに直接書いた「h1の色を赤にする」というcssが優先されh1が赤になります。なので、3つの中のどれにcssを書いても大丈夫ですが、優先順位が変わるので使い分けるようにしましょうね。
ちなみに優先順位は下のような順番になっています。
HTMLタグに直接書く（1番優先） HTMLファイル内に書く（2番目） CSSファイルに書く（3番目）

「じゃあhtmlタグに直書きがベストだね！」と思うかもしれませんが、それはできるだけ止めといた方がいいです。
htmlファイル内、タグ内にcssを記述してしまうと htmlファイルの容量が大きくなってしまいます。その結果何が起こるかというと、 webページの表示速度が遅くなります。
そうなると訪問者にとっても使いづらいし、検索結果も上位に入りづらくなっちゃいます。なので、できる限りcssは cssファイルに記述するようにしましょうね！
それとcssは下に書いたものほど優先されます。

●css優先順位の例 h1{font-size:20px;} h1{font-size:21px;} h1{font-size:24px;}
上のように記述した場合、一番下に書いてあるものが優先され、 h1の文字サイズは24pxになります。
記述したのに上手く適用されないという時は、下の方にも同じようなのが書いてある可能性があるので、まずはこれを疑ってみて下さいね。

セレクタの使い方をマスターしよう

●セレクタ｛プロパティ：プロパティ値;｝ ●対象のhtmlタグの｛何を：どう見せるか；｝
セレクタにはhtmlの要素名（h1など）を指定するタイプと、自分で付けた名前をセレクタ名として指定できるタイプがあります。
難しく感じるかもしれないですが、思っている以上に簡単なのでご安心を。では、それぞれのセレクタについて説明していきますね。

タイプセレクタ

タイプセレクタとは、bodyやh1などhtmlタグに使われている要素名を、そのままセレクタとして使う事をいいます。簡単にいうと、最初に説明したのは「タイプセレクタだよ」ってことです。
例えばh1をタイプセレクタとして設定すると、 htmlドキュメント（ファイル）内のすべてのh1にcssで設定したスタイル（見栄え）が適用されます。

上のように書いた場合、htmlドキュメント内のすべてのh1の背景が赤、全てのh2の文字色が赤、全てのpの文字色が青になります。「webページ全体のh1の文字サイズを設定したい」という時などにタイプセレクタを使いましょう！

クラスセレクタ

クラスセレクタには、自分で付けた名前をセレクタとして使う事ができます。
適用したい要素のclass属性に自分で付けたセレクタ名を設定する事で、 cssのスタイルを適用させることができます。

といっても、わかりづらいですよね。なので実践してみましょう！

こういうように記述する事で「p要素の部分2」の文字色だけが赤色になります。またクラスセレクタでは、適用する要素（h1、pなど）を指定する事ができます。
要素名.クラスセレクタ名{}

上のように書いた場合、 p要素の「red」という名前が付いているものにだけ適用されます。
h1にも同じように「red」を付けていますが、適用されていないですね。これを覚えると細かく指定することができるので、用途によって使い分けましょう！

クラスは複数指定できます

クラスはひとつの要素に、複数指定できるんですよね。初心者の頃はそんなことちっとも知りませんでした w クラスを複数指定する場合は、半角スペースで区切ります。
これを利用して以下のような汎用クラスを作って使い回す … という事ができたり、A というクラスと B というクラスが、同時に指定されてるものにだけスタイルを指定する …. ということもできるようになります。

idセレクタ

idセレクタも、クラスセレクタと同じで「自分の好きな名前」をセレクタとして使う事ができます。ただしidセレクタを使う場合は、自分で付けたセレクタ名の前に「#」を付けましょう。それと、idセレクタは1つのページにつき一度までしか利用できません。

こういうように記述した場合クラスセレクタと同じで p要素のid=”red”が付いてる部分にのみ適用されます。これも覚えておくと、細かく設定できるのでとっても便利です。

クラスセレクタとidセレクタを使い分けよう！

「クラス属性なら何回も使えるし、全部クラス属性でよくない？」って思いますよね。もちろん、全部class属性を使っても問題ないです。
ですがサイトが大規模になってくるとデザインが複雑になってきます。そうなると「このスタイルは、どこで使ってたかな？」「何でこのスタイルを用意したんだっけ？」というふうにわかりづらくなっちゃいます。
こういう時にidとclassを使い分けていると、間違ってデザインを崩すことがなくなります。ソースコードも理解しやすくなりますしね。
そしてid名は1ページに1度しか使えないという制限があります。という事は、idが使われていれば「ここは特定の部分だけに適用するスタイルなんだな」って事が把握できるようになります。
ようは、以前に使った名前を間違えて関係ない所に使わないように、 idとclassを分けようね！という事です。
例えば「.example」で全体の幅や色などを設定していたとします。ですが、以前「.example」を使った事を忘れて、関係ない部分で「.example」を使って幅や色を設定をしちゃいました。そうすると、部分的に幅や色を変えたかったのに全体の幅や色も変わっちゃいますよね。

ここで間違った部分に気づければ良いですが、初心者の頃って中々気付けません。部分的には直るのに全体としては崩れるって事があります。
こうならないために、classとidを分けます。
「じゃあ、どこでIDを使うの？」と思いますよね。
idを使うべき部分は「特定の部分だけにスタイルを適用したい時」です。例えば「この部分の文字は大きくしたけど、他の部分には必要ないな」という時など。
他にもwebページの枠の設定などに使ったりします。
逆にclassはページ内に何個でも使えるので、頻繁に使いまわしたい部分などで使います。
では実際webページを作る時なら、どういうふうに使い分けるか説明しますね。例えば下のようなページを作りたいとします。

こういう場合なら、それぞれの枠の部分をidで設定します。枠をidで設定しちゃえば、 classで同じ名前を使ってもデザインは崩れる事はないですしね。

そしてh2の「稼げるスマホ広告をパソコンでチェック！便利なツールご紹介」の部分だけが赤色ですよね。こういう時にclassを使います。

こういうようにすれば、 h2「稼げるスマホ広告をパソコンでチェック！便利なツールご紹介」の部分だけが赤になりますよね。こんな感じにidセレクタとclassセレクタを使い分けてみましょう！といっても最初は中々わかりづらいと思いますので、使いまわす部分は「class」使いまわさない部分は「id」くらいの認識で最初は大丈夫です！

セレクタは複数記述できる

セレクタは複数記述することができます。例えばh1とpの色を赤にしたい時、いちいちh1とpについて記述するのは面倒ですよね。なのでそういう時はまとめて記述しちゃいます。

複数セレクタの他にも子孫セレクタというものがあります。（用語は覚える必要ないですよ）
これを使うと「要素の中に含まれる特定の要素」だけに cssのスタイルを適用することができます。まずは下を見て下さい。

記述する要素に制限はありません。なので2つでも3つでも、何個でも記述することができます。こういう記述の方法もあるよ！という事なので、覚えておくと便利です。もちろんspanにclassを使っても大丈夫です。