HTMLの要素について

皆さん、こんにちわ。駆け出しWEBデザイナーのarakurePDです。今回はHTMLの階層関係について書いていこうと思います。

まず、最初にHTMLの基本的な書式やタグについておさらいしていこうと思います。

HTMLには役割や機能が異なるタグが多数定義されています。開始タグと終了タグでコンテンツを囲むのがHTMLの基本的な書き方ですね。〈　〉の中にはタグ名を書くことになっており、それぞれ意味が決まっています。HTMLの役割は適切なタグを選んでコンテンツを囲み、そのコンテンツに意味づけする事です。

タグには追加の情報を付け加える事があり、それを「属性」と言います。属性は必ず付くわけではなく、1つも付かない事もあれば、複数付く事もあります。(classなど)

属性には「値」を設定する必要があり、属性と値を＝(イコール)でつなげてセットで記述します。【〈タグ名　属性＝”値”〉】このようにタグとタグに囲まれたコンテンツをひとまとめにして要素と呼びます。

1つのHTMLドキュメントはこういった複数の要素で構成されています。

親要素、子要素とは

HTMLの勉強をしていくと親要素や子要素と言った名称をよく耳にするようになります。

では親要素、子要素とはいったいなんなのでしょうか？

HTMLタグにおける含む・含まれるの関係を親子関係と呼びます。

特定のHTMLタグを基準に考えた時、その要素を含むすぐ上の要素を「親要素」と呼びます。

  • 親要素…自分を含む要素
  • 子要素…自分に含まれる要素

親のさらに親の要素を「先祖要素」、子のさらに子の要素を「子孫要素」と呼びます。

また「兄弟要素」なんてのもあります。

「兄弟要素」とは、特定のHTMLタグを基準に考えた時、親要素を同じくする並列の関係を「兄弟要素」と呼びます。さらに自分より先に記述されている要素を「兄要素」、自分より後に記述されている要素を「弟要素」と呼びます。

  • 兄要素…自分より先に(上)に記述されてる並列関係の要素
  • 弟要素…自分より後に(下)に記述されてる並列関係の要素

姉妹もいるのでは？とお思いかもしれませんが(え？思ってない⁇)

姉妹はおりません。HTML家族は男系なんですね！

このようなHTMLの階層関係をしっかりと把握する事は、CSS(スタイルシート)を書く上でも重要なポイントとなります。

CSSの親子関係について

HTMLの親子関係について説明してきましたが、CSSセレクタにも親子関係があるんですね！

デザインをする上でかかせないCSSですが、状況に合わせてCSSでデザインしていくにはCSSの親子関係を理解するのも大切になってきます。

CSSの親子関係とは、スタイルが適用される順番の事を意味します。

基本的に親の要素を子は受け継いだ上で指定された要素を適用する事になる為、正しく理解して設定する事で作業効率を高めたり、可読性を高める効果があるんです。

CSSセレクタをうまく利用する事で、親クラスのスタイルを効率よく引き継いで表現する事も可能ですし、親クラスのスタイルを打ち消して表現する事も可能です。

では、CSSセレクタの基本的な書き方と親子関係の基本的な法則についてですが、スタイルを適用する要素をスペースで区切った場合は左から該当する要素を絞り込みます。

  • div p a{color:green}

上記の場合は<div>の中の<p>内で使用している<a>の要素を緑色にします。

スタイルを適用する要素をカンマ(,)で区切った場合は、並列の関係となり、該当する要素に同じスタイルを適用します。

  • .sample1,.sample2,{backgroundcolor:green}

上記の場合はsample1とsample2の背景を緑色にします。

この他にも書き方はあり、書き方によってどの要素にスタイルを適用させられるかが違ってきます。どのような規則によって要素が指定されているのかが分かれば、実務の効率化はもちろん、他の人の作成したCSSファイルを読んで勉強する事もより効率的になります。

HTML、CSSともにしっかりと親子関係を理解してさらにステップアップしていきましょうね！