DAY.6「CSSのタグに慣れていこう」
前回はCSSの書き方についていくつかご紹介しました。
今回はさらに深堀りしたCSSの書き方について、学んでいきます。
CSSには、抑えておかなければならない書き方やポイントがあります。
今回の内容を学ぶことで、CSSにおけるエラーの原因発見や基礎知識が一段と深まりますので、ぜひ、学んでみてください。
では、はじめていきましょう。
目次
- HTMLタグにも直接CSSを指定できる
- CSSはつなげて書ける
- CSSには親から指定した方が優先される
- CSSは後に書いた方が優先される
- なるべく使わない方がいい奥の手
- classじゃなくてidという指定方法
- 色々書いてみよう
- 運営サービス
HTMLタグにも直接CSSを指定できる
CSSにはHTMLタグを直接指定することもできます。
ちょうど、下記のような感じです。
h1{
color:#de0000;
}
すべての「h1を赤くする」のであれば、この指定でも問題ありません。
例えば、デザイン上、h1が当てられる部分はデザインが一緒、または似ているというケースでは、h1に共通のCSSを与え、別にクラスをつけて、細部を微調整する、といったことがよくあります。
もちろんh1タグだけでなく、すべてのタグに対してCSSを適応できます。
CSSはつなげて書ける
例えば、下記のようなHTMLがあったとしましょう。
<section class="section-outline">
<div class="section-inner">
<h1>タイトルがはいります。</h1>
<p>テキストが入ります。テキストが入ります。</p>
</div>
</section>
そして、h1の文字色を赤に変えたいとします。
しかしh1にはクラスがついていません。
そんな時は、CSSを下記のように書くことができます。
.section-outline .section-inner h1{
color:#de0000;
}
こうすると、意味的には「.section-outline」の中にある「.section-inner」の、さらに中にある「h1」の文字色を赤にする、となります。
なお、ある要素の中にある要素を「子要素」と呼びます。
子要素を囲んでいる要素については「親要素」と呼びます。
親要素から子要素の順に、スペースで区切って指定することで、子要素に対してCSSを適応できます。
なお、直接h1に対してclassをつけて、CSSを反映させることもできます。
直接指定するか、親要素から指定するか、どちらも同じように感じるかもしれませんが、ここで「CSSの優先順位」という問題が関わってきます。
CSSには親から指定した方が優先される
例えば下記のCSSがあったとします。
.section-outline .section-inner h1{
color:#de0000;
}
h1{
color:#2a00de;
}
同じh1にCSSが当てられているのですが、前者も後者も、同じh1に対してCSSが適応されています。
前者は文字を「赤」に、そして後者は文字を「青」にしているのですが、この場合、どちらの文字色が優先されるのでしょうか。
答えは前者です。文字は前者の指定どおり、赤くなります。
理由としてはCSSの特性上「親要素からつなげて指定したCSSが優先される」ためです。
なので、優先させたいCSSは、より親から指定するのですが、このルールを知っていると、よく遭遇するエラーの1つ「CSSを指定したのに反映されない！」といった問題を解決しやすくなります。
どこかで、より親要素から指定した箇所があるのかもしれません。
CSSは後に書いた方が優先される
さらに、順番でも優先順位が変わります。
下記のCSSがあった場合、どちらが優先されるでしょうか。
h1{
color:#de0000;
}
h1{
color:#2a00de;
}
と言っても、もうサブタイトルで答えは言ってしまっていますね。
答えは後者に書いた「文字を青くする」CSSです。
なので、もし「親から指定した他のCSSがあるわけでもないのに、CSSが反映されない！」という事態が起きたら、もっと後ろの方で別のCSSが色を指定している可能性を疑ってください。
何も考えずにCSSを書いていて、数千行になってくると、CSSの指定が被るケースが起きて、混乱することがあります。
1つならまだしも、2つ3つと指定が重なってきたら大変です。
なので、混乱する前に、CSSをどのように作っていくか、しっかり整理して設計していく必要があるのです。
また、もし「親要素から書いたCSS」がh1に当てられていて、何らかの理由でh1に「単体のCSSを付け足した場合」どちらが優先されるのでしょうか。
これは、先程の「CSSには親から指定した方が優先される」のソースコードの通りですが「親のCSSが優先」されます。
より親から指定されたCSSは、順番関係なく優先されます。
なるべく使わない方がいい奥の手
CSSをたくさん書いて、数千行以上になり「CSSを指定したはずなのに、一切反映されない！」といった事態がおきた時。
「親要素から指定してもダメ、後に書いてもダメ」「何しても反映されない」という悪夢が起きるかもしれません。
もちろん、1番はそうならないように、しっかり設計して作ることが大事なのですが、そんな悲劇が起きてしまった場合、どうすれば良いでしょう。
その時は、推奨はされませんが奥の手があります。
.section-outline .section-inner h1{
color:#de0000!important;
}
値の後ろに「!important」とついているのがおわかりでしょうか。
これがつくと、強制的に優先順位が一番になります。
ただ、!importantは奥の手なので、使いすぎると後がありません。
!importantをたくさん使って、さらに!important同士のタグで優先順位の奪い合いがはじまったら、もう最悪です。
その時は、CSSをすべて設計しなおす作業をすることをおすすめします。
classじゃなくてidという指定方法
これまでCSSを指定する時は、必ず「.」を最初につけてきました。
「.」はHTMLで指定する時の「class」を意味します。
しかし「#」という指定の仕方もあるのです。
下記のような感じです。
#section-outline{
background:#000000;
}
これは、idと言い、HTML上では下記のように指定すると反映できます。
<section id="section-outline">
<div>
<h1>タイトルがはいります。</h1>
<p>テキストが入ります。テキストが入ります。</p>
</div>
</section>
先程までclassと書いていた場所が、idになりました。
idの特徴としては、1ページに同じidを1度しか使えないことです。
例えば上記で「section-outline」というidを指定していますが、このidを同じページ内における他の場所で使うことはできません。
別のページであれば、また使うことができます。
一方、classの場合、何度でも同じページ内で使い回しできます。
1ページ内で複数使えるか、1度だけ使えるか。
それがidとclassの差です。
しかし、最近ではidをあまり多用することはありません。
CSSでの装飾として使うと「使い回しができない」という特性から、使いまわしができるclassをメインに使っていった方が、よりデザインが変更・管理しやすくなるためです。
では、どこでidを使うのかと言えば、JavaScriptで要素を指定する時です。
これはJavaScriptを学ばないと意識できないところかと思いますので、今回は「そういうもんなんだな」程度で理解しておいてください。
なので基本的にはclassをメインに使うことが多く、普段、idはそれほど意識する必要もないかと思いますが、既存サイトの改修などで見つける時があると思いますので、ぜひ覚えておいてください。
色々書いてみよう
今回は得に何か課題があるというより「CSSの優先順位」と「idでの指定」について、それぞれ確認してみてください。
自由にHTMLを書いて、CSSを指定し、優先順位がどう機能するか、idでclassと同じようにCSSが反映できるか、自由に確認してみましょう。
読んで知るだけではなく、一通り自分で試してみることで、知識だけでなく、実際に使えるようになります。
ひとまず、今回はここまでとします。
CSSについての理解が、また少し深まったのではないでしょうか。
次回は、様々なCSSのプロパティについて、ご紹介していきます。
