CSSセレクタ指定、HTMLタグ:親子・子孫要素をしれば装飾が反映。基本から説明するね

初心者はカスタマイズしたいのに、CSSが反映されないって事があって…。(祖先)親要素(のセレクタ)を指定し、装飾すれば面白いほど自由に反映します!

HTMLタグを見て親要素を知り、スタイル指定方法の基本(子孫セレクタ・隣接セレクタなど)を覚えてください。簡単なブログ構造(親・子要素などの関係)がわかれば、第一段階突破です。

今使ってるWordPressテーマの構造を例にあげるので、基本である親子関係を理解してください。コレを見て意味を知れば、ほかのブログで言ってる事が理解できますよ^^

簡易HTML書いたエディター:基本の基

スポンサーリンク

ブログ構造で親要素を見て、セレクタの付け方を理解

親・子要素・子孫に祖先・兄弟要素があります。HTMLから始まるブログの構造は、HTMLタグを入れ子にして階層化したものです。

  • 装飾したい場所は、装飾したいタグの『要素』である
    • その上の階層は、親要素に
    • その下の階層は子孫要素
  •  親要素・子要素の関係とは
    • 『家系図』と思えば解りやすい。

同じ親要素内にある子要素同士は、兄弟要素。親の子は『子要素』。

親の子の子(孫要素)は、親要素の子孫要素。また、直結した上の階層になる要素は、祖先要素になります。

はじめに要素とタグを軽く説明しないと、大混乱ですよね♪『要素』の使い道の幅広さで大困惑して、教えてくれた人に冷たく怒られ、かなり悲しい思いをしました^^;

『タグ』と言ったり『要素』言った表現が様々あるので、超シンプルに説明します♪

要素とは何?タグと要素の説明

要素はタグも含めて要素

HTMLタグに囲まれたテキストだけでも、タグを含めても『要素』と言う。タグだけでも『要素』。HTMLの要素はブログ全体のHTMLでもあります。

HTMLタグとCSSのセレクタの関係で記してるとおり、『HTML』は『HTMLタグ』を入れ子状にしたブログの骨組みです。HTMLタグは初めと終わりのタグがありますよね。少し補足すれば下記。

<p class=”pink”>(<開始タグ>)装飾されるテキスト内容</p>(</終了タグ>)

HTMLタグは『開始タグ』と『終了タグ』に囲まれた要素(テキストや画像など…)をCSSで装飾できるのは、HTMLタグでマークアップした範囲を指定するからですね。

HTMLタグの開始タグ、囲まれたテキスト、終了タグ。これらは要素として表現されると覚えておきましょう!

開始タグ『<p class=”pink“>』段落pの(属性)クラス名が『pink』ですよって意味。“pink”は、ほかの名前とカブらないよう、自分で付けます。

タグに囲まれたテキストをpinkに装飾した画像

クラスピンク.pinkをCSSで指定し、装飾すれば上の画像のように自由に装飾できます。自分でカスタマイズするときは下記。

  1. 投稿画面のテキストで装飾したい部分にHTMLタグ<p class=”pink”>などとつける
  2. マークアップしたタグ<p class=”pink”>ほげ</p>をセレクタ『.pink』で指定
  3. .pinkをスタイルシートで装飾すればOK

※下記は装飾例。実際にすれば『全ての段落が、ドッpink♡』になっちゃうので注意♪

LINK目次:HTMLタグにclass名を付けカスタマイズしやすくする

HTMLの親要素と、子要素の関係を覚える

ブログは、HTMLの子要素に『head』と『body』があり、そのbodyの下層に、ブログタイトル部分のheader#contents、#footerの、子要素のタグの階層があります。

bodyの中身

これらはbodyの子要素、『#contents』の中には入れ子で#main『主要なコンテンツ』、#sub『サイドバー』の子要素があります。※この『子要素#main、#sub』から見た親要素は『#contents』

大枠bodyの中にもう1つ#footer『ブログの足元最下部』という子要素がありの子要素にはfooterがあります。※画像はHTMLタグを装飾するときに使う(Gush4の)セレクタで表示。

  • HTMLは『ルート要素』って呼ぶ。らしい※記事下のほうで本を紹介
  • ※『#contents』の中に兄弟要素の#main、#subがある。後述
  • ※bodyからみれば、親要素がHTML<html lang=”ja”>

上の図をリストにしたものが下記です。その後、子孫、兄弟、先祖要素を見てくださいね。

  • body
    • .head-wrap(ヘッダー)
    • #contentsの中身
      1. #main(メイン)
      2. #sub(サイドバー)
    • #footer(フッター)
      1. footer
ポイント

bodyの子孫要素は『.head-wrap』『#contents』『#footer』。『#contents』下層『番号付きリスト』の『#main』『#sub』。『#footer』の下層には『footer』

1『#main』と、2『#sub』は、兄弟要素

『#contents』『#main』『#sub』『footer』の祖先要素は、『body』

問題!HTMLタグの問いに答えてね^^

HTMLタグ問題。

  1. 段落<p>の子要素の開始タグはなぁんだ
  2. 段落<p>の親要素の『終了タグ』は何だ?

答えはザックリ下記。

  1. 段落<p>の子要素の開始タグは
    • <span class=”mojil”>
    • (ちなみに装飾したい時使うシンプルなセレクタは.mojil)
  2. 段落<p>の親要素の終了タグは
    • </section>

1問目は60点、2問目は40点!合計100点、おめでとうございまっす!

子孫要素の関係を覚える

リスト化することで階層を持たせて、どのタグがどの親、子孫になるかを見ると、迷いにくいかも知れません。

  1. HTMLのbodyの#contentsの子要素#main(主なコンテンツ部分)の子要素

Gush4のブログ構造#mainのセレクタ

#mainの子孫セレクタは、.article-wrap、article、ヘッダー(記事タイトル)、本文、本文下のカテゴリとタグアドセンスの下にパンくずリスト。そして、記事下の.article-underのSNS著者情報などに続くのがGush4の構造って感じですね。

青の.article-wrapの子要素はarticle。青から見れば、子孫要素→緑、赤。

  • .article-wrap
    • article
      1.  header:記事タイトル部分
        • p段落
          • h1タグ記事タイトル
      2.  .article-inner
        • section
          • 本文(本文中のh2やh3など)
        • .cat_tag
          • カテゴリとタグ
      3. aside(アドセンス)
      4. footer(SNSのボックスの親要素)
        • 記事下のパンくずリスト
        • アイキャッチ背景のSNS
        • .writer-box:著者情報

左#mainの概要。右bodyと#mainの子孫関係

右の画像はPCビューのbodyの表示です。body内の子孫要素#mainの部分に、左の画像の子孫要素が入れ子状に構成されてるんですね♪

左の画像。#mainの子要素には、.article-wrapの兄弟要素.article-underがあり兄.article-wrapの子孫要素ヘッダー、.article-inner、aside、footer。その後に(弟)の.article-underの記事下となります。兄弟要素は次。

兄弟要素を覚える

ある要素から見て、子要素が沢山ある状況が兄弟要素になります。上述でピンと来てましたか!?別のパターンで兄弟要素を見てみましょう♪

記事下から、サイドのSNSや、フッターの手前まで

.article-underの子要素.relations。その子要素が兄弟要素

.article-wrapの下へと続く.article-underは関連ページの紹介、コメント、前の記事・次の記事が兄弟要素

  • .article-under(本文の下)
    • .relations( 関連記事)
      • .rel-title(h2タグ『こちらも読まれてます』)
      • . rel-in(番号なしリスト『ul』のリスト)
        • 『li』のなかに
          • .rel-in-box(過去記事の画像とタイトルやリンクなど)
    • .comment-wrap(コメント投稿)など
      • ※子孫には(h3タグ)など
      • 以降(略

更にサイドバーで例えます。

HTMLのbodyの#contentsの子要素#sub(サイド)の子要素asideの子要素は、.side-leftと.side-rightになって、兄弟要素になります。

  • #sub
    • aside
      1. .side-left
        • .side-sns
          • h2
      2. .side-right
        • .side-contents
          • 新着記事(h2タグ)(番号なしのリスト『ul』の『li』になってる)

先祖要素の関係を覚える

祖先は、直結した親の親要素を祖先要素といいます。まずHTMLのbodyの#footerの中の子孫要素を見てください。画面最下部の『.footer-bottom』の祖先要素はどれになりますか?

フッターの要素

footerの中に、.footer-wrapと.footer-bottomがある。

どっちが見やすいだろぉ?リストにしてみますね!

  • #footer
    • footer
      1. .footer-wrap
        • .footer-in
          • フッターの『h2やh3』タグSNSのボックスなど※ほか子孫要素は略
      2.  .footer-bottom
        • コピーライト『©2015-2016 ビバ★りずむ』などがある

.footer-bottomのの親要素は、リストを見る限りfooterですよね。その親が#footer。

祖先要素は、#footerでした。これだけかなぁ!?っと思いきや。

フッターボトムの祖先要素を画像で表示

親要素のfooter、それ以上の直結した要素、#footer、bodyも『祖先要素と呼ばれる』と後述の本で知りました。

さいごに

祖先、子孫、親、子、兄弟要素の関係とセレクタの指定を親テーマの記載と合わせて見たら、CSSが反映しないなんて事がグッと減りますよ。あとは、色々なセレクタの指定方法を知れば、CSSで装飾したい箇所を1人で出来るようになる第一歩です♪

ブラウザのキャッシュサーバーのキャッシュが関係してる場合もあるけど、該当セレクタに祖先要素を指定する『子孫セレクタ』や『子セレクタ』(親要素hoge内の子要素gehoのみ全装飾)hoge > gehoなど指定すれば、カスタマイズの幅が広がります。

要素の検証で自分のテーマの親要素を確認したら、すんなりわかりますよ!要素の検証で、簡単なカスタマイズを実践したものも参考までにどうぞ♪

LINK超時短!!ブログのテーマカラー、背景色やボーダーを一気に変更する方法 #gush4

ほか、初心者が解りやすい優先順位について書きたかったけど、またいつか♪

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

トップへ戻る