みなさん、はじめまして。
ホームページ制作を生業にしているFundemicです。
私はホームページ制作を独学で学んだのですが、どうにもこうにも、HTMLでコードを書いたら、「画面上にどんな形で反映されるのか分からない！」というのが最初の壁で、ここを乗り越えるのにとても苦労した記憶があります。
「自分でホームページを作りたい！」と、思っている方々に対して、そんな壁を乗り越える支えになればと思い、これから記事を書いていきたいと思います。（全何回になるかは分かりません。）
初回になる今回は、「HTMLのレイアウト基礎」をお届けします。
ホームページを制作するにあたり、基礎中の基礎になるので、しっかりと理解していきましょう。
HTMLタグはざっくり分けると2種類
事例を示して、説明していきたいところですが、その前に、「HTMLタグ」についての説明です。
HTMLタグには、「h1」とか「a」とか、いろんなタグがありますが、ホームページの画面を作っていくという観点でざっくり見ると2種類しかありません！
- ブロック要素
- インライン要素
…以上の、たった2種類しかありません。簡単でしょ？
問題なのは、どのタグが、どっちの要素なのか？って事ですが、それはまた次の機会に説明するとして、とりあえず次の二つのタグを使って、説明していきます。
- ブロック要素 → divタグ
- インライン要素 → spanタグ
divタグとspanタグは、それぞれの要素を代表する、汎用性があるタグです。ホームページの画面（レイアウト）を作るにあたっては、この2つのタグだけで完結できる程です。機能面を考えると、そうも言い切れませんが、少なくとも画面レイアウトを作る上ではこの2つで十分だと思います。
ですので、この2つをまずはしっかり覚えましょう。
次からは事例を示しつつ、説明していきます。
ブロック要素
divタグ、hタグ、pタグに代表される「ブロック要素」は、配置されると、基本的には親の幅に対して横幅目一杯まで領域を確保します。（下のコードではcssで各ブロックに色をつけています。）
親要素とは？
親要素とは、その要素を包み込んでいる要素のことをいいます。
上の例では、赤・緑・青の3つのdivタグを包み込んでいるのが「親要素」で、bodyタグが存在しています。（bodyタグは、実際コードとしては記述していませんが、勝手に入ります。）
インライン要素
spanタグ、aタグ、imgタグに代表される「インライン要素」は、配置すると親要素の範囲内で、親要素の左上を起点として「Z」の字を描くように配置されていきます。また、ブロック要素でないテキストは、インライン要素として認識されます。
spanタグは、もちろんインライン要素ですが、「spanタグに入っていない内容」とある部分も、インライン要素になります。
まとめ
短いかもしれませんが、今回の記事は以上になります。まとめです。
- タグは大別すると2種類（ブロック要素とインライン要素）
- ブロック要素は幅いっぱいに領域を確保する
- インライン要素は、親要素内でZ字に配置される。
これで本当のホームページができるのか？と、思われるかもしれませんが、ここまではホントに基礎中の基礎なので、ご心配なく！
ここに、スタイルシート（CSS）や色々なHTMLタグを組み合わせてホームページを形作っていきます。引き続き解説記事を書いていきたいと思いますので気になったら読んでいただけたらと思います。
次回は「ブロック要素のサイズとポジショニング（中央寄せ・右寄せ・左寄せ）」を書きたいと思います。
ここまで読んでいただき、ありがとうございました。
