ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

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

  • mixiチェック
  • このエントリーをはてなブックマークに追加
さてさて。

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

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

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

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

ただこれは、画像表示やリンクを除き、区別するだけのタグでしかないのです。
そこで、区別したタグ(文章)を見やすくするために、「大見出し」は大きく太く、リストは記号や数字を使って、段落は1行のスペースを空けてなど、ある程度の共通した「見やすさ」や「読みやすさ」を考慮した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の正確なマークアップ(コーディング)なんですね。
もちろん、文章力も必要です。

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

コメント(0)

mixiユーザー
ログインしてコメントしよう!

☆大下パラ大豆☆ 更新情報

☆大下パラ大豆☆のメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

人気コミュニティランキング