☆大下パラ大豆☆コミュのウラ授業　第3回　CSSについて（サイト構築実践２以上）

さてさて。

現在のサイト２の授業内で、新たに追加してお教えしている事を書いていきますが、まずはCSSについて。

IEやFirefox（以下FF）、NNやOperaなどなど。
ブラウザによってHTMLの見え方（表示の仕方）が違う、というお話は散々していました。
が、その辺のお話です。

ブラウザは本来、HTMLとで書かれた文章を閲覧するために作られています。
また、文章を書く際には、題名を作ったり見出しで文章を区切って分かりやすくしたり、文章中に出てくる単語や文章について、補足説明するために別のページを表示したり、画像で説明したりと、分かりやすく区別するために「タグ」を用いて関連づけています。

これが、「HTMLは文書ファイルである」と言われる所以です。

ただこれは、画像表示やリンクを除き、区別するだけのタグでしかないのです。
そこで、区別したタグ（文章）を見やすくするために、「大見出し」は大きく太く、リストは記号や数字を使って、段落は１行のスペースを空けてなど、ある程度の共通した「見やすさ」や「読みやすさ」を考慮したCSSを通して、HTMLの文章を閲覧しています。

ということは。
ブラウザごとにCSSが組み込まれている。と言う事になります。
あのブラウザ表示の違いは、ある程度の共通化されたCSSが原因なんです。

そこで、CSSレイアウトを組むにあたり、徹底して言っていた事が「マージン0、パディング0」です。
これは、すでにあるブラウザのCSSをリセットするために、徹底して作業してもらっていたんです。それでも『忘れてしまう』と言う方のために、ブラウザのCSSをリセットするCSSを用意しておきました。

ま、最近巷で良く出回るようになったので、そろそろいいかなぁ？という感じなのでお配りします。これは、賛否両論なので出し渋っていましたが。
http://www.guild-web.com/reset.css
ダウンロードして使ってください。
興味ある人はググってみると色々と出てきますが、一先ずはこれだけで十分だと思います。

さて、使い方。
メインで使うCSSファイルの1行目に
@import url("reset.css");
と入力し、2行目からは普段通りにCSSを設定していきます。
もう「マージン0、パディング0」を徹底しなくても大丈夫です。

これで、日本語サイトでよく使われるタグは全てリセットされます。
reset.cssを読み込んでHTMLを表示させると、見出しもリストも段落も同じ文字サイズで、
ただの文章の羅列になります。
慣れるまで見にくいですが、これがHTMLなんです。
そこに書かれたタグに挟まれる単語（文章）が、ブラウザで表示するときや検索エンジンがデータベースに登録していく時に、タグで見分けて処理しています。

SEOで最も重要なのは、HTMLの正確なマークアップ（コーディング）なんですね。
もちろん、文章力も必要です。

次回はいつになるか分かりませんが、ライティングにつて書いていきますね。