読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

ページ構築の手順

ページ構築の手順


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

文書構造のグループ化

  • グループ化とは、div要素によるコンテンツのブロック化
  • 「コンテンツのブロック化」であるので、1行を「div要素」で囲まないことが鉄則
  • 見出しと本文のまとまりとを一緒に構造化
情報を「線形化」する

砕いて言えば、ワープロソフトの1文字が縦に改行されていくイメージです。
その「1文字」は、ひとつのブロックで、なかに情報のかたまりが入っていると考えます。

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


idセレクタで指定する

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


グループ名をつける
  • グループ化で利用される「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名とクラス名

id属性とclass属性の使い分け

  • いずれは、HTMLに付与する名前は、すべてclass属性で良いということにします
  • id属性は、jQueryなどのページ内に動きをつけるときに利用する名前として使うことが多くなります
広告を非表示にする