HTML&CSS入門5〜HTMLの親要素、子要素の違い〜

 

 

こんにちは、すぐるです

 

 

入門の4では、htmlのボックス要素とインライン要素の違いについて学びました。入門の5では、htmlの親要素と子要素につて学び、要素を個別にデザインする方法も学びます

 

ーーーーーーーーーーーーーーー

HTML&CSSの入門5で学べること

 

♢親要素と子要素がわかる

♢要素を個別にデザインできる

ーーーーーーーーーーーーーーー

 

 

親要素と子要素とは

 

 

htmlタグは、入れ子のような構造をとることができます。入れ子の構造を取ったときに、入れ子の外にくるタグを親要素、入れ子の内側にくるタグを子要素と呼びます

 

次のhtmlファイルをご覧ください

 

緑色の枠線で囲ったところをよく見てみると、まず<header>タグがあって、<div>タグがあって、<h1>タグがあります。この3つのタグが入れ子のような構造になっていることがわかります

 

<div>タグからみると<header>タグが親タグなので、<header>タグは親要素、<div>タグは子要素と言うことができます。しかし<h1>タグからみると、<div>タグは親要素になります

 

このように、何が親要素になって、何が子要素になるのかは入れ子の構造によって決まります。そして、入れ子の構造はどこまでも続けることができます。

 

もう少しわかりやすいようにcssで背景を指定して、親要素と子要素の構造が見えるようにしましょう

 

次の記述をcssファイルに追加してください

 

要素の高さを、親要素から大きい順位に指定しました。背景色がピンクが一番高くて、次に水色、最後に黄色と続いています。どのような表示になるのか予想しながらブラウザを開いて見ましょう

 

上の図を確認してみると、cssで指定したとおり、しっかりと親要素から高さ順にピンク→水色→黄色の順できています。ここから分かることは、子要素は親要素の中に存在しているということです

 

 

要素を個別にデザインするには

 

 

htmlタグで囲った要素を、それぞれ別の色で指定したいときがあると思います。そんなときは、特定の要素に、id属性を持たせることで個別にデザインをすることができます

 

id属性は、たとえば<p id=”example”>などのようにタグの中に記述し、exampleの部分は自分が好きなように名前をつけることができます

 

つまりid属性とは、タグに固有の名前をつけることができるIDのようなものです。書き方は<p id=”example”>のように記述し、ダブルクウォーテーションマークは忘れないようにします

 

では、今回もしっかりと実践をしていきます。3つの<h1>タグをそれぞれ別の色で指定してみたいと思います

 

次の記述をhtmlファイルと、cssファイルに追加してください

 

htmlファイル

<h1>タグにそれぞれid=”blue”、id=”red”、id=”green”というid名をふってあげました

 

cssファイル

id名でhtmlタグを指定する場合は、h1#blueのように、h1タグのとなりにをつけてからid名をつなげて指定します

 

このように記述したことで、同じ名前のタグでも個別に背景を指定できるようになります。ブラウザを確認してみましょう

ブラウザを確認してみると、しっかりとそれそれ別の色で指定することができています。このようにid属性は、より細かいデザインをするときに非常に便利なので、使いこなせるようにしたいです

 

 

しかし困ったことに、id名は一つのhtmlファイル内で、違うタグに同じid名を使うことはできません一つのタグにつき一つのid名が基本です。これでは、複数のタグを同時にデザインするときに困ってしまいます

 

そんなときは、class属性を使うことで問題を解決することができます。class属性もid属性と同じように、タグに名前を指定しますが、別のタグに対しても何回も使うことができます

 

一つのclass名で、複数のタグを同時にデザインすることができるということです

 

実際にやってみましょう。次の記述をhtmlファイルとcssファイルに追加してください

 

htmlファイル

上の画像を見てください。違うタグに対して、同じクラス名を複数回指定しています

 

cssファイル

id名をつけてタグを指定するときは#をつけましたが、class名をつけてタグを指定するときは . ドットをつけます

 

ブラウザを開いて、しっかりと記述が反映されていることを確認しましょう

しっかりと、cssが反映されていることが確認できます

 

 

親要素と子要素の関係について理解し、id名とclass名を使いこなせるようになることで、柔軟なウェブデザインができるようになります

 

 

 

本気でWebデザインを学ぶなら

 

本気でウェブデザインを学ぶなら、Udemyのオンライン講座 が超おすすめです

ぼくは19歳のときUdemyでWebデザインの勉強をはじめて

その半年後にフロントエンジニアとして仕事を取ることができました

 

こうなることができたのは、完全にUdemyのおかげだと思っています

Udemyのコースはどれも質が高くてすごい分かりやすいです

しかし、量が豊富なので、勉強するにはかなり骨が入りましたが(笑)

 

ちなみに、ぼくは今でも複数のコースで学んでいます

 

もし、キャリアアップしたい。Webスキルをつけて収入を上げたい。という人がいたら、Udemyで学ぶ価値は大いにあると思います

 

最後に、ぼくが一番はじめに受けていたコースは、「 未経験からプロのWebデザイナーになる! 」っていうコースです

未経験からプロのWebデザイナーになる!

 

かなり丁寧に解説されていて、19歳のポンコツな頭でも理解することができました

ついでにPhotoShopも応用的なところまでこのコースで学べます

 

他にもたくさんのWeb系のコースがあるので、ぜひ自分にあったコースを探してみてください

 

Udemy  はこちらから!