CSSによるページデザイン - web-0127のブログ

初学者のCSS

CSSを理解しようとして、いまネット上にあるプロの解釈を読むと、頭が混乱すると思います。
日本語ですら、まともに作文を書くことができるようになるまで何年もかかりました。まだ勉強を初めて１周間です
原理原則、現在の傾向といろいろあるWebの技術ですが、初めてなのだからプロに笑われるようなことでも、ひとつひとつ丁寧に記述し理解して行きましょう。
慌てる必要はありません。シンプルにいきましょう。

《サンプル》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リセットCSSを記述する前に</title>
<style>
h1,p,ul {
  color: #FFF;
}
h1 {
  background-color: #95CCE2;
}
p {
  background-color: #EFB15F;
}
li {
  background-color: #98DC77;
}
</style>
</head>
<body>
<h1>ページのテーマ</h1>
<p>ここに本文が入る</p>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</body>
</html>

《プレビュー》

各要素間が、指定していないにもかかわらず空いているのがわかります
リストも２文字分インデントされています

これは、ブラウザが初期値としてもっている空きの値を利用してプレビューしているからです

《空きをなくす記述》

h1,p,ul {
  color: #FFF;
  margin: 0;
  padding: 0;
}

この状態から、自分の空けたい値を指定することにより、思い通りのレイアウトにするということが「リセットCSS」の目的です。

《ブラウザとの空きもなくす記述》

body,h1,p,ul {
  color: #FFF;
  margin: 0;
  padding: 0;
}

これからページを構築していく段階で、「初期値：0」であることにより、指定した値が反映されていることが確認しやすくなります。

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

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

文書構造のグループ化

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

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

情報を「線形化」する

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

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

idセレクタで指定する

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

グループ名をつける

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

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

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

「container」と「wrapper」のどちらかが優先順位が高いというわけではありません。
あくまでも、HTMLの性質は「横並び」ができないため、いろいろ変則的なことをします。
そのときに、横並びにしたものが「はみ出さないように」指定するのが「container」と「wrapper」の役割です。

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

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

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

命名規則

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

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