CSSによるページ構築の手順

CSSによるページ構築の手順

入力内容のチェック

• 入力内容（文法）チェックは、必須です

1. W3C Markup Validation Service（HTMLのチェック）
2. W3C CSS Validation Service（CSSのチェック）

文書構造のグループ化

• グループ化とは、div要素によるコンテンツのブロック化
• この「グループ化」をするときに、「id名」「class名」を使い分けて、グループの意味を作っていきます
• 「コンテンツのブロック化」であるので、１行を「div要素」で囲まないことが鉄則
• 見出しと本文のまとまりとを一緒に構造化

一般的には「class名」を使ってグループ化をします（id名は、JavaScriptでの指定に利用します。）

情報を「線形化」する

• グループ化された「情報」は、ひとつのブロックとしてとらえます
• 情報は上の行から順に読まれる

線形の情報の視覚を変える

• HTMLはブロック化しないと横並びはできない

グループ名をつける

• グループ化で利用される「div要素」は、あくまでも「空っぽな箱」で文書構造としての意味は持ちません

classセレクタで指定する

• 「classセレクタ」は、１ページに何度も使用することが可能（共通する構造をグループ化する）

《例》

<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
</div>

class属性とid属性の名前の付け方

• グループ化の場合、「div要素」に「class/id属性」を付加します
• id は一意性のある領域や要素に対して名付ける
• class は同じ機能をもつ領域や要素に対して名付ける
• その名前は、色形をあらわす名称ではなく、意味や機能をあらわす名前が最適

命名規則

• キャメルケース(CamelCase)
• 複合語をひと綴りとして、要素語の最初を大文字で書き表すこと
• globalNav（キャメルケース：大文字で単語区切り）：通称ラクダ
• global-nav（ハイフン区切り）：通称ケバブ
• global_nav（アンダースコア区切り）：通称スネーク

その他の例は「TAG index：ID名とクラス名」