CSSの基本と応用って？セレクタ・プロパティ・値を知るとCSSが効率的になる！CSSの適応の仕方を全て教えます。

ＣＳＳは基本的な書き方がありますが、より効率的な書き方があります。

効率的な書き方ができると、ファイルも軽くなりますし、ＣＳＳファイルの記述も整理できますので、是非覚えてください。

CSSの為の基本的な知識

CSSは記述したHTMLに対して装飾を行うものです。

多少強引なHTMLですが以下は例です。

「どの要素のレイアウトを変更するか？」

変更したいか箇所に対応するHTMLに対してCSSを作成します。

CSSは広範囲でも局所的でも指定した要素に対して装飾ができます。

これから説明するのに必要な各要素などの名前は以下の画像に書いてますので、これから説明する内容に役立ててください。

HTMLのタグとは、h・div・a・imgなどのことを指し、このタグにはidやclassを付けられ、それぞれに名前が付けられます。

そして、このタグに囲まれたまとまりを”要素”といいます。

CSSはセレクタ・プロパティ・値という３つで構成されていますが、簡単に説明するとセレクタは、タブ・id名・class名を付けられ、スタイルを変更する要素を指定する役割を持ちます。

プロパティでどのようなスタイルを適応させるかを指定し、値でそのスタイルを具体的にどのように作用させるかというものです。

基本的なセレクタの使用例

タグ名を指定して装飾する

タグ名（例：hタグ、p、div、a・・・など）をそのまま書くと、サイト内の同一タグ全てのスタイルを変更することができます。

例えば、h1のような見出し要素に適用すれば、h1タグを付けるだけで、サイト全体のh1のスタイルを変えることができます。

id名を指定して装飾する

id名を付けた場合、CSSで指定する場合はid名の前にシャープを付けて「#id名」でセレクタを指定します。

id名を付けた要素内のみにスタイルが反映されます。

ちなみに、idは1ページに１つしか付けられないので、メインのコンテンツやページ内で大きな要素となるところでの利用が好ましいです。

class名を指定して装飾する

class名を付けた場合、class名の前にコンマ（ドット）を付けて、「.class名”」でセレクタを指定します。

class名を付けた要素内のみにスタイルが反映されます。

クラスはidと異なり、１ページに同じ名前を何個おいても大丈夫です。

テキストの装飾など、複数個所に同じレイアウトスタイルを付ける場合などに使います。

idタグとclassタグのどちらを使うというのは、決まりはありませんがclassタグを使うことが多いです。

基本的な使い方の中の応用編

セレクタをカンマ区って同じCSSを纏めて適用する

idやclassはその要素の名前のようなものです。

サイトを作っていくと、CSSの内容が同じになるけど、管理の上で別のclassやidを付けた方が良い場合があります。

ただ、同じ内容をいくつも書くのは、記述としてもゴチャゴチャになりますし、あまり好ましいことではありません。

そのような時は、それぞれのセレクタでCSSを作るのではなく、”,（コロン）”で区切って各セレクタを指定することで１つのCSSで処理することができます。

要素を絞り込んで明確に特定の要素にCSSを適用する

セレクタを半角スペースで区切ることで、親要素に囲まれた子要素、その下の孫要素に限定的な範囲でレイアウトを指定できるようになります。

例えば上記の例でbタグの範囲に下線を引きたい場合、bタグにclassタグというのはあまり現実的ではありません。

このやり方で、要素の中の限定的なタグだけの場所にも、レイアウトを施すことができます。

CSSをよりすっきりと記述するため便利なセレクタ

表やリストの奇数行にだけスタイルを変更する

○:nth-child(odd){ CSSを記述 }で奇数行のみに、CSSのスタイルを適用させることができます。

奇数列だけに1行1行にclassタグを入れても可能ですが、HTMLもCSSも管理しづらくなります。

○にはセレクタを入れますが、リスト形式で”ul li”で活用することが多いセレクタです。

表やリストの偶数行にだけスタイルを変更する

○:nth-child(even){ CSSを記述 }で偶数行のみに、CSSのスタイルを適用させることができます。

○:nth-child(odd){ CSSを記述 }と同様に偶数列だけに1行1行にclassタグを入れても可能ですが、HTMLもCSSも管理しづらくなります。

〇にはセレクタを入れ、リスト形式で”ul li”で活用することが多いセレクタです。

特定のn番目だけのスタイルを変更する

○:nth-child(n){ CSSを記述 }でn行目のみに、CSSのスタイルを適用させることができます。

()内には整数のみの入力も可能ですが、nを使った数式を入れることもできます。

奇数や偶数というレイアウトでない場合、非常に役に立ちます。

その他のセレクタ

個人としてはあまり使いませんが、知ってると便利なセレクタを簡単に解説していきます。

サイト全部の要素のスタイルを一気に変える。

セレクタをアスタリスク（*）にすると、サイト内のすべての要素に記述したCSSのスタイルにすることができます。

例題のようにサイトのフォントサイズを指定するときなどに便利ですが、私はbodyで指定することが多いです。

サイト全部の要素のスタイルを一気に変える。

まとめ

CSSのセレクタは他にもありますが、正直他はあまり使い勝手はよくありません。

できるからといって、なんでもかんでも使ってしまうと余計にゴチャゴチャになります。

また、CSSのレイアウト効果を出す記述は、同じ結果でも記述方法は異なります。

「class名が”ex”の範囲の要素の周りを線で囲む」というレイアウトの結果は同じでも記述が変わります。

新しいことを覚えると新しい記述をやってみたくなります。

もちろん勉強のために記述していくことは良いことですが、最終的には、自分が管理しやすくシンプルな記述をすることを心掛けてくださいね。

【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)