こんにちは！ CSS大好きライターのナナミです。
何事も勉強するときは基礎からしっかり学ぶのが定石ですね。この記事にたどり着いたあたなからは、CSSをしっかり基礎から学びたいという気概を感じます！
その気持ち、しかと受け止めました！今回はCSSの基礎知識をギュッとまとめて解説していきます！
しっかりわかっていただけるよう、あえて細かい説明をしている部分もあります。そういうのはいいからポイントだけおさえたい！という方は、各項目にある【これだけは覚えておこう】という部分だけ読めばOKです。
あなたが使いやすい方法で、この記事を活用しちゃってください！
CSSの役割
CSSはHTMLでコーディングされた要素に色や枠、文字の大きさなどのデザインをつけるための言語です。
そのためCSS単体で使うことはなく、必ずHTMLとセットで使われます。
HTMLはタグを使って、要素をグループ分けする役割があります。CSSはその分けられたグループに対して、「こういう見た目になってくれ！」と指示を出してあげるイメージです。
昔はHTML自体もデザインを整える役割を持っていたりしましたが、現在は全てCSSでやるのが主流です。そのため、HTMLを使ってWebサイトを作る場合、CSSの知識は必須となります。
今回はCSSの基礎にフォーカスするので、HTMLやCSSがどのような言語なのか、詳細な解説は省きますね。詳しく知りたい方は下記の記事をどうぞ！
では、この役割を果たしてもらうためのCSSの基本を、3つのポイントに分けて解説していきましょう。
ポイント1. CSSの基本の書き方
まずは一番基本となる、CSSの書き方について確認していきましょう。
基本のお作法
CSSは、「セレクタ」「プロパティ」「値」の3つを使って書いていきます。
【CSS】
セレクタ{
プロパティ:値;
}
| セレクタ | どのHTML要素にCSSを適用させるのかを指定する。 |
| 例）body .class #idなど | |
| プロパティ | 線や色など、何を変えるのかを指定する部分。CSSのキモ。 |
| 例）background boarder paddingなど | |
| 値 | プロパティに対して、どのくらいの変化をさせるのかを指定する部分。プロパティごとに書き方の決まりがある。 |
| 例）#000 10px solidなど |
セレクタとは、HTMLのどの要素にCSSを適用するのかを指定するものです。HTMLにはheaderやdivなど、いろんなタグがありますよね。それらをここに記入して「headerに適用するCSS」「divに適用するCSS」を書いていくわけです。このセレクタの細かい説明は、ポイント2をご覧ください。
そのセレクタのどこを変化させるのかを指定するのがプロパティです。例えば枠を付けたいなら「border」、背景色を変えたいなら「background」というプロパティを使います。このプロパティは色んな種類があるのですが、とりあえず今は覚えなくて大丈夫です。
どこを変化させるのかを指定したあとに、どのくらいの変化をさせるのか、どのような変化をさせるのかを指定します。これが値です。枠をつけるならば枠の太さや種類を指定したり、背景色を変えるならば何色にするのかを指定したりします。
【これだけは覚えておこう】
- CSSは「セレクタ」「プロパティ」「値」の3つを使って書く
複数のスタイルをつける
一つのセレクタに複数のプロパティを付ける場合は、下記のように書きます。
【CSS】
セレクタ{
プロパティ:値;
プロパティ2:値2;
プロパティ3:値3;
}
このとき、必ず値の後ろに「;」を入れましょう。この「;」が「値の記述はここまでです！」という合図になっています。
【これだけは覚えておこう】
- 値の後ろには必ず「;」を入れる
CSSを書く場所
CSSは単体では使わないため、HTMLと連動させる必要があります。方法は下記の3つです。
別ファイルとして読み込む
HTMLファイルとは別にCSSファイルを作成して、その中にCSSを書いてHTMLに読み込ませる方法です。HTMLのheadタグの中に、下記のように書くことで読み込むことができます。
【HTML】
<head>
<link rel="stylesheet" href="CSSファイルへのパス">
</head>
別のHTMLファイルにも同じように読み込むことで、同じCSSを使いまわすことができます。
正直これだけ覚えておけばOKというくらい、汎用性が高い方法です。他の方法も覚えておいて損はないですが、まずはこの方法だけ覚えるようにしましょう。
HTMLファイルに直接書く
HTMLファイルの中に直接CSSを書く方法です。HTMLのheadタグ内に書いたstyleタグの中に、下記のようにCSSを書いていきます。直接記入なので、書いてあるファイルにしか適用されません。
【HTML】
<head>
<style type="text/css" media="screen">
CSSの記述
</style>
</head>
HTMLタグに直接指定
HTMLファイルの中で、タグに直接CSSを指定する方法です。ファイルどころかタグに直接記入なので、そのタグにしか適用されません。
【HTML】
<div style="CSSの記述"></div>
【これだけは覚えておこう】
- HTMLファイルとは別にCSSファイルを作ってHTML側で読み込む方法が一番使われる
プラスワンポイント：コメント
CSSファイルは、日本語などのCSS以外の記述があると動作を止めてしまいます。メモなどを残したい場合は、コメントアウトという方法を使って、「CSSの動作に関係ない記述ですよ！使わないやつですよ！」というのを明確にする必要があります。
CSSは「/*」と「*/」で囲んだ範囲をコメントと認識します。下記のような感じで使います。
【CSS】
/*テスト用です*/
div{
background:#fff; /*背景を白くしています*/
}
こうやってコメントを残すことで、このCSSが何に使われているのかなどをメモしておけるので便利です。
ポイント2. 細かいCSSを書く方法：セレクタ
セレクタはHTMLのタグ以外にもいろんな方法で指定をすることができます。
HTMLタグ
header、div、spanなど、HTMLタグを直接指定する方法です。
簡単ですが、divやspanはいろんな箇所に使われるので、この方法で指定してしまうとそれら全てにCSSが適用されてしまいます。
そのため、それぞれの要素に名前をつけて、その名前が付いているものに適用させるのが基本です。
ID
HTMLの要素に名前をつける方法その1です。下記のように書くことで、IDを付与することができます。
【HTML】
<div id=”name”>テキスト</div>
IDは要素に対しての固有名詞です。そのため、同じHTMLファイル内で同じ名前を複数つけることができません。家に白猫が2匹いても、同じ名前では呼ばないのと同じです。
【HTML】
<div id=”name”>テキスト</div> <div id=”name”>テキスト</div>コレはNG <div id=”name2”>テキスト</div>これはOK
【CSS】
#name{
プロパティ:値;
}
【これだけは覚えておこう】
- IDは同じファイル内で同じ名前を複数つけることができない
- IDを使ってセレクタを書くときは、ID名の前に「#」をつける
IDのもっと細かい説明はこちら
class
HTMLの要素に名前をつける方法その2です。こちらはIDと違って、同じ名前を複数つけることができます。IDが固有名詞ならば、こちらはグループ分けという感じです。
【HTML】
<div class=”name”>テキスト</div> <div class=”name”>テキスト</div><!-- これはOK --> <div class=”name”>テキスト</div><!-- これもOK -->
classを使ってセレクタを指定する場合は、class名の前に「.」をつけて記入します。
【CSS】
.name{
プロパティ:値;
}
この場合、先程「name」というclassをつけた要素全てにCSSが適用されます。
【これだけは覚えておこう】
- classは同じファイル内で同じ名前を複数つけることができる
- classを使ってセレクタを書くときは、class名の前に「.」をつける
classのもっと細かい説明はこちら
セレクタは複数組み合わせて使える
セレクタはHTMLタグ、ID、classそれぞれ単体で使うこともできますが、複数を組み合わせて使うこともできます。例を挙げてみましょう。
【HTML】
<div id=”parent”>
<div class=”child”>
</div>
</div>
【CSS】
.child{
プロパティ:値;
}
#parent .child{
プロパティ:値;
}
下の記述はIDとclassを両方指定しているように見えますが、どちらもCSSが適用されるのは「child」というclassが付いているものだけです。
親子関係にある複数の要素を半角スペースで空けて記述することで、「parentというIDの要素の中にあるchildというクラスの要素」を指定することができるのです。
セレクタを複数記述する際は、間にどのような記号を入れるかによって少し意味が違ってきます。よく使うのは下記の記号です。
| A B | Aの中にあるBという要素を指定する |
| A > B | Aの直下にあるBという要素を指定する |
| A,B | AとB両方を指定する |
他にも色々あるのですがあまり使わないので、とりあえずこれだけ覚えておけばOKです。
【これだけは覚えておこう】
- セレクタは組み合わせて使うことができる
- 書き方によって意味が変わる
プラスワンポイント：セレクタは基本classを使おう
セレクタは基本的にclassだけを使い、「A B」や「A > B」のような書き方はしないことをオススメします。
CSSは基本的にHTMLのコーディングが完了したものに対して書いていくのですが、書いていくうちにHTMLの調整が必要になることがあります。HTMLの構造が変わる可能性があるのです。
「A B」や「A > B」のような構造に依存した書き方をしてしまうと、CSSの修正箇所がたくさん出てきてしまい、かなりめんどくさいことになってしまいます。
セレクタは、よっぽどのことが無い限りはclassを単体で指定するようにしましょう。
ポイント3. CSSで絶対覚えておきたい「優先順位」
ここがCSSで混乱しがちなポイントです。
下記のように同じ要素に対してCSSを指定した場合、ルールに基づいた優先順位によってどのCSSを適用するのかが決定されます。
【CSS】
.child{
プロパティ:値;
}
.child{
プロパティ:値;
}
この優先順位は複数のルールを組み合わせて決定されます。ちょっとややこしいですが、ひとつひとつ確認していきましょう。
上から順に適用される
CSSは、記述の上から順番に適用されていきます。下記のように全く同じセレクタを指定している場合は、どんどん上書きされていく形となるので、下の方に書いてある記述が優先になります。
【CSS】
.child{
background:#fff;
}
.child{
background:#000;/*こっちが後から適用されるので優先*/
}
【これだけは覚えておこう】
- CSSは下に書かれている記述が優先される
セレクタが長い方が優先
複数のセレクタを組み合わせて使うと、優先順位が上がります。下記のように、片方がclassのみ、片方が2つ以上を組み合わせている場合は、上に書かれていようと下に書かれていようと、セレクタが長いほうが優先されます。
【CSS】
div .child{
background:#fff;/*こっちがセレクタが長いので優先*/
}
.child{
background:#000;
}
【これだけは覚えておこう】
- CSSはセレクタが長いほうが優先される
classよりもIDの方が強い
classとIDは、IDのほうが優先されます。また、HTMLタグとclassの場合、classのほうが優先されます。
【セレクタごとの優先順位】
【CSS】
#test{
background:#fff;/*IDなので優先*/
}
.child{
background:#000;
}
div{
background:#ccc;/*一番下にあるけど、HTMLタグなので弱い*/
}
【これだけは覚えておこう】
- セレクタごとの優先順位は「HTMLタグ＜class＜ID」
importantが最優先
今まで説明したあらゆる優先順位を無視するほど優先されるのが、importantを付与している場合です。
値の後に「!important」とつけると、「このCSSは絶対に適用する」という指定になります。この場合、IDだろうがclassだろうが関係なく、「!important」が付いている記述が優先されます。
【CSS】
#test{
background:#fff; /*IDなので優先*/
}
.child{
background:#000;
}
div{
background:#ccc !important; /*HTMLタグだけど、importantが付いているのでIDより優先*/
}
importantは一見便利そうですが、後からのメンテナンスなどに不便になることが多いので、あまり使わないことをオススメします。
【これだけは覚えておこう】
- 値の後に「!important」を付けると最優先になる
CSSの基礎を身に着けるための学習方法
今回の記事では、CSSを扱う上で絶対覚えておきたい基礎を紹介しました。解説に重点をおいていたので、初めての方は難しいと感じるところもあったかもしれません。
下記の記事では、これらの基礎を理解するための学習方法について解説しています。実際に手を動かしてみると、今回の記事の内容もしっかり身につけることができるので、ぜひチェックしてみてください。
まとめ
まだまだコーディングになれていない人からすると、これらの内容を理解するのは大きな壁だと感じるかもしれません。
しかしCSSのややこしいところは今回紹介した優先順位くらいです。そこがわかってしまえば、後はいろいろなプロパティを調べて、組み合わせて、素敵なWebサイトを作っていくだけです。
この記事が、あなたがCSSを理解するための一助となれば幸いです。
