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

初心者はカスタマイズしたいのに、CSSが反映されないって事があって…。祖先要素(エレメント)を指定し該当要素のセレクタを付ければ面白いほど反映するんですよ。やりたい装飾が自由にでき、CSSが面白くなります!

HTMLタグを見て親要素を知って、子孫セレクタ(隣接セレクタなど)を覚えてください!このセレクタは基本です。簡単なブログの構造や親要素や子要素などの関係がわかれば、第一段階突破です♪

『親要素は親テーマで、子要素って子テーマ!』って思ってませんか?はじめは誰でも理解できませんよね。どのブログを見てもピンと来たつもりで居ないかなぁ。って心配になっちゃいます。

今使ってるWordPressテーマ、Gush4のブログの構造を例にあげるので、基本である親子関係を理解してください。親子!?何??とキョトンとしちゃうなら、コレを見て意味を知れば、ほかのブログで言ってる事が理解できますよ^^

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

スポンサーリンク

ブログの構造を見て、CSSのセレクタの付け方を理解する

親や子要素、子孫に祖先、兄弟要素とかあるけど、HTMLから始まるブログの構造は、HTMLタグを入れ子にして階層化したものです。装飾したい該当タグ『要素』を見て直下の階層は、子要素に。その下の階層は子孫要素となります。

要素の関係の『家系図』と思えば解りやすいかも。同じ親要素内にある子要素同士は、兄弟要素。親の子(子)、親の子の子(孫)は、親要素の子孫要素。また、直結した上の階層になる要素は、祖先要素。ってぐあいになります。

はじめに要素とタグを軽く説明しないと、大混乱ですよね♪私も要素(のくくり)がわからず教えてもらうときに、かなり悲しい思いをしましたもん…言わないけど…(涙)

なんせ使い道の幅広さで大困惑!タグと言ったり要素言った表現が様々あるなか、『タグの指定方法で要素という言い方に変わるのか!?』って…。そうなると、全く違った解釈になるので、説明入れておきますね♪

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

要素はタグも含めて要素

この画像関係をみて、HTMLタグに囲まれたテキストは要素とも言い、タグを含めても要素と言う。タグだけでも要素になる。HTMLの要素はブログの全体って意味ですね♪

HTMLタグとCSSのセレクタの関係で記してるとおり、『HTML』は『HTMLタグ』を入れ子状にしたブログの骨組みになります。HTMLタグって離れてるけど、上の画像を補足すれば下記。

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

HTMLタグは『開始タグ』と『終了タグ』があって、それに囲まれた要素(テキストや画像など…)をCSSで装飾できます。HTMLタグ、開始タグ、タグ、囲まれたテキスト、これらは要素として表現されると覚えておきましょうね。

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

この開始タグ『<p class=”pink”>』段落pのクラス名が『pink』ですよって意味で、私がほかのタグ名とカブらないよう『pink』と付けました。コレをCSSで指定したら、上の画像のように自由に装飾できます。自分でカスタマイズするときは下記。

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

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

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

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

bodyの中身

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

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

ココでの大枠bodyの中にもう1つ#footer『ブログの足元最下部』という子要素がありの子要素にはfooterがあります。

※画像はHTMLタグを装飾するときに使う(Gush4の)セレクタで表示。

  • HTMLは『ルート要素』って呼ぶそうです。※記事の下のほうで本を紹介
  • 後述しますが、※『#contents』の中に兄弟要素の#main、#subがある。
  • ※bodyからみれば、親要素がHTML、兄弟がhead、それ以外は子孫要素。

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

  • 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』は、兄弟要素

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

問題!次の問いに答えてね^^

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

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

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

書いた人:かうたっく

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

Twitterフォロー