文章構造をマークアップするルール
要素の入れ子（ネスト）と子孫関係
- HTML文書全体が、html要素を最上位（ルート）の先祖要素とする入れ子によるツリー構造になっています
- このとき注意が必要なのは「div要素」は、レイアウト指定のためのグループに利用するだけでツリー構造には、まった影響を与えないということ
- 「入れ子の正しくない例：P.034」に注意しましょう
ブロックレベル要素とインラインレベル要素
コンテンツ部分をマークアップ
- 読みやすいように段落内で改行する
- 大事な語句を強調する
- 画像を挿入する
- リンクを設定する
強制改行
- <br>
- forced line break
大事な語句を強調
- <em> または <strong>
- emphasis
画像を挿入
- img：image
- src：source
<img src="img/subaru.jpg" width="320" height="100" alt="すばる">
ページ構築の手順
この「グループ化」をするときに、「id名」「class名」を使い分けて、グループの意味を作っていきます。
文書構造のグループ化
- グループ化とは、div要素によるコンテンツのブロック化
- 「コンテンツのブロック化」であるので、１行を「div要素」で囲まないことが鉄則
- 見出しと本文のまとまりとを一緒に構造化
情報を「線形化」する
砕いて言えば、ワープロソフトの１文字が縦に改行されていくイメージです。
その「１文字」は、ひとつのブロックで、なかに情報のかたまりが入っていると考えます。
- 情報は上の行から順に読まれる
- HTMLはブロック化しないと横並びはできない
- 先に読ませながら、右に並べるときに設定するのが「float : right」
グループ名をつける
- グループ化で利用される「div要素」は、あくまでも「空っぽな箱」で文書構造としての意味は持ちません
「おむすび」はラップで包む
<div id="wrapper">
</div>
ラップで包んだ「おむすび」は、ケースに入れる
<div id="container">
</div>
「container」と「wrapper」のどちらかが優先順位が高いというわけではありません。
あくまでも、HTMLの性質は「横並び」ができないため、いろいろ変則的なことをします。
そのときに、横並びにしたものが「はみ出さないように」指定するのが「container」と「wrapper」の役割です。
id属性とclass属性の名前の付け方
グループ化の場合、「div要素」に「id属性」を付加します。
- id は一意性のある領域や要素に対して名付ける
- class は同じ機能をもつ領域や要素に対して名付ける
- その名前は、色形をあらわす名称ではなく、意味や機能をあらわす名前が最適
命名規則
- キャメルケース(CamelCase)
- 複合語をひと綴りとして、要素語の最初を大文字で書き表すこと
- globalNav（キャメルケース：大文字で単語区切り）
- global-nav（ハイフン区切り）
- global_nav（アンダースコア区切り）
その他の例は「TAG index：ID名とクラス名」
