こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！
前回に続き、html&css実践として、解説していきます。
今回は、divタグとタグの入れ子について解説します。
YouTubeにもアップしていますので、見ていただけたら嬉しいです！
divタグとは？
まず、divタグについて解説します。
divタグとは、<div>で囲った部分をブロックレベル要素としてグループ化することができるタグです。
ブロックレベル要素とは、見出しや段落、画像など、基本となる要素のことで、1つのブロックとして扱われます。
1つのかたまりのイメージです。
インライン要素というものもあり、こちらは1つのブロックではなく、その中の一部として扱われます。
ちょっとややこしいですが、ここではブロックレベル要素とインライン要素があると理解しておきましょう。
divタグも、「ブロックレベル要素としてグループ化できるタグ」と言われても分かりにくいので、1つのかたまりにできるタグと覚えておきましょう。
タグの入れ子とは？
次に、タグの入れ子について解説します。
タグの入れ子は、単純にタグの中にタグを入れることです。
htmlには、たくさんのタグが用意されていて、タグを使ってコーディングしていきます。
レイアウトが複雑になればなるほど、多くのタグを使い、タグの入れ子も多くなります。
divタグと、タグの入れ子のサンプル
では、実際にdivタグと、タグの入れ子のサンプルを書いてみます。
前回の#2のソースコードを使用します。
<body>
<div>
<h1>タグを使ってhtmlコーディングしよう！</h1>
<p>
こんにちは<br>
ユウです！
</p>
</div>
<p>
<a href="https://www.good-f-design.com/html-css-practice-01/">前回の#1</a>では、htmlの概要説明をしました。<br>
今回の#2では、タグを使ってhtmlコーディングをしていきます。
</p>
</body>h1タグと最初のpタグをdivタグで囲ってみました。
このようにタグをタグで囲むことを、タグの入れ子と言います。
入れ子の他に英訳のネストと言ったりもします。
さらに、タグの入れ子をすることで、このタグたちは親子になります。
サンプルの例だと、
- divタグ：親要素
- hタグ、pタグ：子要素
となり、大枠のタグを親要素、その中のタグを子要素という言い方をします。
書けたら保存してブラウザで確認してみましょう。
表示上は何も変更ありませんが、ソースコード上ではdivタグが追加されていることを確認できます。
なぜdivタグを入れるのか
表示上なにも変わらなければ必要ないかと思うかもしれませんが、divタグを入れる主な理由は、次回以降に解説するcssを適用させるために使います。
このサンプルのような少ないものであればdivタグは必要ありませんが、通常ホームページはデザインされていて、その通りにコーディングしていく必要があります。
そのためには、divタグを使ってcssを適用させることが必須になります。
divタグについて1点注意しないといけないことがあります。
divタグは、何の意味も持たないタグなので、必要以上に使用してはいけません。
極端に言うと、全てdivタグでもデザイン通りにコーディングすることは出来ちゃいますが、このようなやり方をしてしまうと、ブラウザが何の要素なのか分からなくなってしまい、ページの評価が下がってしまいます。
なので、見出しはhタグ、段落はpタグ等、ちゃんとタグを使い分けて、意味のあるコーディングを心掛けましょう。
タグの入れ子の注意点
タグの入れ子も注意点があります。
1つ目は、当たり前ですが、タグの閉じタグを忘れないように記述しましょう。
閉じタグがないと、親子関係がおかしくなり、レイアウトが崩れてしまいます。
html5では閉じタグを省略できるタグや、最近のブラウザは閉じタグがなくても調整してくれたりしますが、ちゃんと書いた方が綺麗に見えるし、理解も早いので必ず書くようにしましょう。
2つ目は、インデントです。
インデントとは、タグの入れ子をした際に、スペースを入れることを言います。
<div>
<h1>タグを使ってhtmlコーディングしよう！</h1>
<p>
こんにちは<br>
ユウです！
</p>
</div>この例だと、h1とpタグの先頭にスペースを4つ入れています。
このようにインデントを入れることで、タグの入れ子が分かりやすく、ミスも防げます。
インデントは「スペース」「タブ」の2種類あり、スペースが推奨されています。
さらにスペース2つ分、4つ分と、色々ありますが、4つ分が分かりやすくておすすめです。
最後に
以上、divタグとタグの入れ子について解説しました。
次回は、cssについて解説したいと思います。
cssを使うことで、ホームページをリッチに見せることができるようになります。
ホームページ作成には必須になるので、頑張って覚えていきましょう。
最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。
コメント