⭐<div>タグ
構造上のひとかたまり。
いまはもう、その構造に初めから意味をもたせた<header><main>などがもうHTML5には用意されている。
><div>とは 「DIV」とは、単体では特に意味を持たないタグですが、<div>で囲った部分をブロックレベル要素としてグループ化することができるタグです。 グループ化することで、align属性により水平方向の位置をまとめて指定したり、指定した範囲にスタイルシートを適用したりすることができます。
<div>と<span>の使い分け
divはブロック要素、spanはインライン要素らしい。
>ブロック要素
ブロック要素はレイアウトの一つのまとまりとして扱われる要素です。先程の実行結果のように、divタグを使った部分はレイアウトが詰まった一つの箱として扱われるイメージです。
このブロック要素ではmargin、paddingなどのレイアウトやwidth、heightなどのサイズも自由に決めることができます。このブロック要素は追加すると基本的には縦に並んでいくのですが、これを横に並べる方法は後ほど紹介します！
>インライン要素
インライン要素は行の一部（インライン）として扱われる要素です。先程の実行結果のように、spanタグを使うと文字の部分だけ、色が変わりましたね。
このspanタグではwidth、heightなどのサイズの調整ができないという点に気をつけましょう。spanタグは追加していくとブロック要素とは違って、基本的には横に並んでいきます。spanタグの詳しい使い方についてはこちらの記事をご覧ください。
昔は<header>とかは書かずに<div>を使っていた。
HTML5で使えるようになった。
なので、古いHTMLを修正したりするときに<header>などが使えない場合があるので注意。
❤まずheaderなどのマークアップをし、
それからその中をh1などで細かくマークアップしていく。
sakuraエディタで行番号をクリックするとその行が、複数選択すると複数行が選択できる
→headerのかたまりを全部選択
→tabキーでインデントする
見出しの1番であろうところを<h1>で囲う
⭐<nav>タグ
ナビゲーション部分のブロック
<nav>は<header>内に入れ子にする人もいるし、単体にする人もいる。
入れ子にしてもよい。
<nav>のなかをさらに箇条書きとして意味づける。
→<ul>箇条書きリストで囲う
ただしいまこの状態だと・HOME ～・CONTACTが一塊になっているので、
→ひとつひとつを<li>でマークアップする。
<header>
<h1>Healthem アナタの健康サポート</h1>
<nav>
<li>・HOME</li>
<li>・ABOUT</li>
<li>・NEWS</li>
<li>・CONTACT</li>
</ul>
</nav>
</header>
❤ありがた迷惑でもあるが、ブラウザは、「<h1>ですね、じゃあ大きい文字にして目立たせておきますね」
「ああ<ul>ですね、じゃあ中黒点があったほうが分かりやすいですよね」と勝手に見やすく付け加えてくる。
→だからまずタグ付けして、そのあとcssで実際の見え方を調節する。
中黒じゃなく何かアイコンにしたいとかならcssでコントロールする。
基本的に<li>のなかのコンテンツには中黒をテキストとしては入れないらしい。
なお<nav>のなかは、<ul><li>を使うのが基本になっている。これがほとんど。
❤だから全体の流れとして、おそらく、
1.クライアントからもらったテキストデータを<body>に流す
2.テキストの内容を見極めて<header><main><footer>などの、ざっくりしたブロック付けをする
3.その中身を精査して、<h1>とか<nav>とかのタグ付けをする
4.ブラウザが勝手に文字を巨大にしたり中黒をつけたりしてくれる
5.それをCSSのほうで見た目を整える。
さて、企業ロゴである<h1>や、<li>もリンクがないといけないですね。
