2016/07/04

CSSの基本、class・id・子孫セレクタなど!HTMLタグの装飾、セレクタの指定方法と優先順位

初心者のカスタマイズでCSSが反映しない、書いた内容が効かない、でもキャッシュが原因ではない。なんで反映しないのか!?それはHTMLのタグの指定方法、セレクタの選び方が理解できてないのが原因、またはCSSが優先順位かもしれません。

正しいタグを見つけて指定して装飾すれば、反映されます。カスタマイズに使えるセレクタがおススメなので回を重ねて、知ってると便利なセレクタの種類を紹介します。

タイプセレクタ、全称セレクタ、classセレクタ、idセレクタ、子孫セレクタ、の使い方と、優先順位カスタマイズ例を見て使ってください!

キャッシュについては参考まで、下記をどうぞ^^

LINK便利過ぎて神!カスタマイズ時のキャッシュを削除!ワンクリで手間省けるChrome拡張機能「Incognito This!」

タイプ・全称・class・Idセレクタ

スポンサーリンク

セレクタの種類と、HTMLタグの見方

HTMLの要素は、タグも含めて要素

HTMLタグに囲まれた要素を装飾したいとき、スタイルをCSSに書き込んでデザインを変えていきますよね。HTMLタグをみてどのタグで囲まれた要素を装飾するとき、タグを指定してセレクタを決めないと始まりません。

装飾したい場所や内容によっては、その親要素まで指定しないと反映しないことがシバシバあるんですね。どんどん例えるので、『HTMLタグと説明書き』や『ルビ』など見て、『セレクタを指定する感覚』をツカんでいきましょう♪

<div class=”article-inner”>

<section>

<h2>テキスト</h2>

</section>

</div>

これは、Gush4のメインコンテンツ内のh2タグとその親(先祖)要素のタグを抜粋しました。

<div class=”article-inner”>(どんな親要素→『.article-inner』)
<h2>テキスト</h2>(.article-innerの子孫要素→『h2』)
</div>

下記▼は、そのh2タグ内テキストの装飾例。後述する『クラスセレクタ』.article-innerの親要素内にある(子孫要素)h2を指定した『子孫セレクタ』を使用例。

.article-inner h2 {  font-size: 22px; }(親要素.article-innerの子要素h2をCSSで装飾)
ポイント

HTML基本の要素、要素名、属性、属性値など
HTMLの要素は、開始タグと終了タグ、タグに囲まれたテキストのことで、開始タグを細かくあらわすと、<要素名 属性名=”属性値”>となる。

CSSでは属性と属性値を指定することが多い。※画像は優先順位のページ『インラインのHTMLの要素で説明』してます。

はじめのうちHTMLの指定(CSSのセレクタ)自体の間違いから始まって、自分の思った通りのカスタマイズをブログに反映させたいから、同じテーマの装飾をコピペするところから始めますよね。

HTMLの要素を見てセレクタが少しずつ理解したころで、セレクタの指定方法を覚えるとカスタマイズの幅が増えてくるので、ブログが自分好みのものになってきます。今回はシンプルなセレクタを紹介するので、ごゆるり見てください♪

シンプルなタイプセレクタ

タイプセレクタ

例えば見出し『h』タグ、引用『blockquote』タグ、段落『p』リンク『a』タグ、画像『img』タグ、強調『strong』タグなど…。1番シンプルなタグを指定するのがタイプセレクタです。使用例は下記の通り。

  • 全てのh2タグのフォント色『color』を変えたい時

Gush4のh2変更前

Gush4のh2変更前

変更後

変更後

  • 引用blockquoteタグの背景などの変更

Gush4引用デザイン変更前

Gush4引用デザイン変更前

変更後

変更後

  • 段落(pタグ)の色をpinkにする。

画像▼の黄色部分のリストや見出し、画像のキャプションは、段落ではないので色はピンクになりません。でも段落は、全てピンクに変わったのが分かります。

変更前後の違い

沢山ある『段落』をタイプセレクタでcolor指定して『カラフルな色』するのは微妙…かな…と、感じませんか^^;

でも余白(margin)間隔を広げて文を読みやすくしたいとき使えますね。p { margin-bottom: 2.2em; }

また他の(親要素の)セレクタと一緒に使って装飾範囲を指定すれば、ブログを可愛くしたり、クールにしたりできることを頭の隅に置いておくと良いかもですっ♪

全ての要素対象『*』:全称(ユニバーサル)セレクタ

全称セレクタ

タグ内に書かれてる全ての要素が対象になる全称セレクタは、半角アスタリスク『*』を使います。優先順位は1番低いのが特徴で、例えば他のセレクタを指定して上書きれば、それが反映する感じですね。

具体的に言えば、全ての要素のフォントの色を黒に指定。段落のみフォント色をグレーに上書き(style.cssの1番下に追加)などもできますよ。

※全てのフォントの色は黒。全称セレクタ*は、タイプセレクタpより優先順位が低いから、style.cssに追加上書きしたp段落はグレーとなる。

個人的に全称セレクタ*は、めったに使わないけど、Gush4で長い英単語がコンテンツから文字がはみ出し横揺れしたときword-wrap: break-wordを切羽詰って入れた事があります。

全ての要素対象に『英単語の長い文字列の途中でも改行するよ』。って意味ですね。

※後述の子孫セレクタと合わせて使うことも可能になります。body *p(body内全てのp)

classは『.』クラス名:クラスセレクタ

classセレクタ

class属性のついた、タグに囲まれたテキストや画像などの要素を装飾を、クラスセレクタになります。

※詳しい説明は見出しのリンク先ページを参考にしてください。

クラスセレクタとは
HTMLタグに『class属性名=”hoge属性値“』とclass属性が付いている時

  • 属性名が『class』
  • クラス名は『hoge』
  • セレクタは.hoge『クラスhoge』と言う。
  • クラス属性が付いたものを装飾するときクラスセレクタを使用

idセレクタより優先順位が低く、全称セレクタ*やタイプセレクタより優先順位は強い。

<div class(class属性)=”blue_shadow_box(クラス名)“>
テキスト
</div>

上記のタグならdivにclass属性が付いて、クラス名は『blue_shadow_box』

  • クラス属性は、半角ドット『.』クラス名は、『blue_shadow_box』
  • このクラスセレクタは『.blue_shadow_box』
.blue_shadow_box {
background-color: #E4EFFF;
/*色々略*/
}

テキストを装飾すれば、下記のように反映します。

テキスト

参考まで。divとspanの違いは、下記リンクのブロックレベル要素、インライン要素で説明してます。

LINKHTMLのdivとspanの違いは、ブロックレベルとインライン要素★入れ子にしたカスタマイズ例:初心者向け

クラス属性のclass名の付け方などは下記を参考にどうぞ。

LINKHTMLの要素!属性、属性値とは!?class名を複数設定するHTMLの書き方付

idは『#』id名:IDセレクタ

idセレクタ

HTMLタグの指定したid属性の要素を装飾したいときは、CSSで『#』を使います。idにはルールがあるので、軽く覚えておいてくださいね。

HTMLの要素<div id=”footer”>の背景をピンクに変えたいとき。

上▲のid属性『id=”footer”』の属性値『footer』がid名となり、セレクタは『#footer』となり下▼のように装飾します。

指定したidフッターは背景色をピンクに装飾しているので、下記▼黄緑枠内のようにピンクに変更されます。

div id="footer"の要素をPINKに変更

div id=”footer”の背景をPINKに変更

ポイント

Gush4は、実は記事下にパンくずリスト<div id=”breadcrumb“>があります。記事上にも<div id=”breadcrumb”>を付けていたとき、文法チェックツールのHTML-lint5でも文法がおかしいと指摘されました。

HTMLのidは『同じページで、同じid名は使えない!』これチェックです。※style.css内での装飾は上書きしたりなど、複数こまかく指定できますよ。

子孫セレクタ(子孫コンビネータ)

要素の親子、子孫関係を擬人化

子孫セレクタは親の要素の『A』の中の子要素『B』や、孫要素『C』をセレクタの間に半角スペースを入れ、指定し装飾します。例えば

  • 親子要素『親A 子B』子要素Bの装飾
  • 子孫要素『親A 孫C』子要素全てのCを装飾
    • この場合『親A』の子B、子Dの中の『孫C』の装飾になる
      子孫要素の説明
    • 親Aではない『親F』要素の中の『孫C』要素は関係ないから反映しない。

親要素、子要素、子孫要素って何!?ってことならリンク先を参考にしてください。親要素の子孫要素を指定する方法を、いくつか見たら理解できるので見てみましょう♪

  • 親(本文内)『divクラスarticle-inner』タグの中にある、子孫要素h2タグ

<div class=”article-inner”>

<section>

<h2>テキスト</h2>

</section>

</div>

<div class=”article-inner”> //親要素
<h2></h2> //.article-innerの子孫要素
</div>

Gush4の本文中の親要素『クラス属性article-inner』内にあるのh2全ての装飾って意味でCSSのセレクタは

.article-inner h2 {hoge: geho;}

※親要素.article-innerと、子要素h2の間に半角スペースが入る

  • 親(サイドバー)のタグ『div id sub』の中にあるh2タグ

<div id=”sub”>

<aside>

<h2>テキスト</h2>

</aside>

</div>

<div id=”sub”> //親要素
<h2>テキスト</h2> //#subの子孫要素
</div>

Gush4のサイドバーid subの子孫要素にあたる、全てのh2タグを装飾したい時のセレクタ

#sub h2 {hoge: geho;}

上の例でしたら親要素『id属性sub』の、子要素や孫要素の子孫要素『h2』を指定し装飾したいとき使えます。初心者でも覚えやすいセレクタですね。どれもh2タグだけど、親や祖先のタグを指定すると、該当のh2の装飾ができるパターンです。

優先順位は、#sub h2 > #sub > クラス > タイプセレクタ > 全称セレクタ

LINK初心者のCSSが反映されない理由!優先順位の詳細度

子孫セレクタと、タイプセレクタの優先順位

CSSが効かないっと、初心者がハマるのが優先順位です。使ってる親テーマで子孫セレクタを使ってるのに気付かず、優先順位の低いタイプセレクタを使ってる場合。またそもそもセレクタが違ってる場合を見てみましょう。

  1. 親テーマで子孫セレクタを使用して、style.cssに上書きするとき、優先順位が低いh2(タイプセレクタ)を指定しても効かない。

下記▼。Gush2の本文中のh2タグと親要素

<div id=”article_body”>(親要素→『#article_body』)
<h2>テキスト</h2>(#article_bodyの子要素→『h2』)
</div>

下記▼。Gush2の親テーマ。h2のセレクタの指定例。

#article_body h2 {  font-size: 22px; }(親要素#article_bodyの子要素h2で装飾してる)
  • h2 { font-size: 23px; }と上書きしても反映されない。

優先順位が#article_body h2のほうが強いから。タイプセレクタである『h2』の優先度が低くて反映されないのが原因ですねぇ。

  • 反映させるには、同じセレクタを選択すればOK!

#article_body h2 { font-size: 23px; }としたら、後に書いたスタイルが上書きされ23pxになるってワケです。

  1. Gush4のタグとCSSの指定例.article-inner h2
<div class=”article-inner”>(親要素→『.article-inner』)
<h2>テキスト</h2>(.article-innerの子要素→『h2』)
</div>

上記がHTMLタグ例。下記がそのh2のセレクタの例。

.article-inner h2 {  font-size: 22px; }(親要素.article-innerの子要素h2で装飾してる)

テーマによって親要素のセレクタが違うので注意。

  • Gush2の見出しのセレクタ#article_body h2 { font-size: 23px; }を指定しても反映しない。
  • Gush4には、#article_bodyが存在しないから反映しない。(セレクタの間違いの例)
  • Gush4では『.article-innerの子孫要素h2』を指定すれば反映する。下記はGush4のHTML。

    <div class=”article-inner“>

    <section>

    <h2>テキスト</h2>

    </section>

    </div>

この見出しで重要なこと1、2のまとめが下記

  1. 親テーマと同じ親要素のセレクタを付けたら上書き処理され反映!
  2. 親テーマが.article-inner h2としてる場合、h2と指定しても前述のほうが優先順位が強いので負けて反映しない。
  3. テーマに無い、HTMLタグをセレクタで指定しても反映されない(される訳がない…)。

初心者さんは気をつけてください。反映しないとき、注意しましょう♪CSSの基本シリーズは下記です。

LINKHTMLの入門!HTMLタグとCSSのセレクタの関係&要素

LINK初心者が要素の検証でカスタマイズできる方法!HTMLとCSS入門編

LINKセレクタの指定★親子孫要素を知れば装飾が反映!ブログ構造HTMLを見て理解

LINK初心者のCSSが反映されない理由!優先順位の詳細度

今ココ!class・id・子孫セレクタなど!HTMLタグの装飾、セレクタの指定方法

LINK子セレクタの説明!初心者向け、子孫セレクタとの違い

LINK隣接セレクタ!セレクタの指定方法と使用例。初心者向け

LINKレスポンシブ対応!メディアクエリの書き方と書く場所。あなたのテーマはスマホファースト、PCファースト!?

 さいごに

CSSで装飾をしはじめた頃なら、セレクタの指定方法が難しく感じますよね。何で反映しないの!?って原因の1つでもあります。初歩的なところを紹介したのは、はじめにコレだけ解れば、他の基本てきなセレクタをマスターしやすいからです。

1番知って欲しいのは、『優先順位の強さ』と『HTMLの親要素・子要素・子孫要素関連』『タグだの要素だのを知る』のがCSSが反映する近道です。

LINKHTMLタグとインラインレベル・ブロックレベル要素、属性の付け方など

コレさえ知れば、他のページを読んで知ったつもりになるコトが減って理解しやすいので、感覚的にツカミやすいですから。ついでにキャッシュって何かを知ってれば、ほぼ完璧かも(大げさに言っちゃったよぉ…w)。

他には、初心者向け子セレクタの説明と子孫セレクタとの違いもどうぞ^^

それでは、かうたっくでした♪

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー