Webデザインの勉強 | 風姿花伝

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

この「グループ化」をするときに、「id名」「class名」を使い分けて、グループの意味を作っていきます。

文書構造のグループ化

• グループ化とは、div要素によるコンテンツのブロック化

• 「コンテンツのブロック化」であるので、１行を「div要素」で囲まないことが鉄則
• 見出しと本文のまとまりとを一緒に構造化

情報を「線形化」する

砕いて言えば、ワープロソフトの１文字が縦に改行されていくイメージです。

その「１文字」は、ひとつのブロックで、なかに情報のかたまりが入っていると考えます。

• 情報は上の行から順に読まれる
• HTMLはブロック化しないと横並びはできない
• 先に読ませながら、右に並べるときに設定するのが「float : right」

idセレクタで指定する

「idセレクタ」は固有名詞的扱いで、１ページに一度使用する。

グループ名をつける

「おむすび」はラップで包む

ラップで包んだ「おむすび」は、ケースに入れる

「container」と「wrapper」のどちらかが優先順位が高いというわけではありません。

あくまでも、HTMLの性質は「横並び」ができないため、いろいろ変則的なことをします。

そのときに、横並びにしたものが「はみ出さないように」指定するのが「container」と「wrapper」の役割です。

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

グループ化の場合、「div要素」に「id属性」を付加します。

• id は一意性のある領域や要素に対して名付ける
• class は同じ機能をもつ領域や要素に対して名付ける
• その名前は、色形をあらわす名称ではなく、意味や機能をあらわす名前が最適

命名規則

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

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