<div>タグ

構造上のひとかたまり

いまはもう、その構造に初めから意味をもたせた
<header><main>などがHTML5には用意されている

 

---

divはブロック要素、spanはインライン要素

>ブロック要素

レイアウトが詰まった一つの箱のイメージ

ブロック要素ではmargin、paddingなどのレイアウトや
width、heightなどのサイズも自由に決めることができる
基本的に縦に並ぶ

>インライン要素

インライン要素は行の一部（インライン）として扱われる要素

このspanタグではwidth、heightなどのサイズの調整ができない
基本的には横に並んでいく

昔は、<header>とかは書かずに<div>を使っていた

HTML5で使えるようになった

なので、古いHTMLを修正したりするときに
<header>などが使えない場合があるので注意する

　

まずheaderなどのおおまかな構造のマークアップをし、

それからその中をh1などで細かくマークアップしていくようにする

sakuraエディタで行番号をクリックするとその行が、
複数選択すると複数行が選択できる

headerのかたまりを全部選択して

tabキーでインデントしよう

見出しの1番であろうところを<h1>で囲う

---

ナビゲーション部分のブロック

<nav>は<header>内に入れ子にする人もいるし、単体にする人もいる

入れ子にしてもよい

<nav>のなかをさらに箇条書きとして意味づける

<ul>箇条書きリストで囲う

ただしこの状態だと・HOME ～・CONTACTが一塊になっているので

ひとつひとつを<li>でマークアップする

　

<header>

<h1>Healthem アナタの健康サポート</h1>

<nav>

<ul>

<li>・HOME</li> 

<li>・ABOUT</li> 

<li>・NEWS</li>

<li>・CONTACT</li>

</ul>

</nav>

</header>

 

ブラウザは
「<h1>ですね、じゃあ大きい文字にして目立たせておきますね」

「ああ<ul>ですね、じゃあ中黒点があったほうが分かりやすいですよね」
と勝手に見やすく付け加えてくる

だからまずタグ付けして、そのあとcssで実際の見え方を調節するといい

中黒じゃなく何かアイコンにしたいとかならcssでコントロールする訳

基本的に、<li>のなかのコンテンツには中黒をテキストとしては入れないらしい

なお<nav>のなかは、<ul><li>を使うのが基本になっている
これがほとんど

　

おおざっぱな全体の流れとして、

　

さて、企業ロゴである<h1>や、<li>もリンクが欲しい
(続く)