CSSの書き方が解った所で、早速コーディングに・・と行きたいのですが、その前にもう少し、下準備が続きます。
ここでは、

１：文字コード（キャラクタセット）の指定

２：CSSのプロパティを初期化

３：基本となるスタイル指定(フォントやボーダー等)

ここまでを、コーディングの下準備と考え、効率の良いコーディングをするためにしっかり準備したいと思います。

１：文字コード（キャラクタセット）の指定

文字コードの説明を始める前に、文章構造を書きこむHTMLファイルを見てみましょう。タイトルやキーワードなどを埋め込む 「metaタグ」というものがあります。

ここはSEO的にも非常に重要な部分ですので、皆様も良くご存じかと思います。さて、このmetaタグには、keywordを指定する種類の物があり、お店の名前や、商品名など、日本語を記述する場合があるかと思います。

この部分の日本語を文字化けさせないで、正しく表示させるためには、日本語を使用しているmetaタグよりも前に、ブラウザにどの文字コードを使用しているのか、明確に教える必要があります。（最近では、ブラウザが自動的に認識し、勝手に表示してくれるようですが、やはり文字コードは指定していた方が良いでしょう。）

文字コードと言えば、代表的なものにShift_JISやEUC－JPなどがありますね。ちなみに、文字コードの名前は大文字、小文字は区別されません。shift_jis、euc-jpでもOKです。

CSSでも、コメント内やプロパティの値に、日本語を使う場合があります。

このような場合、やはり文字コードの宣言をしておかないと、HTMLファイルと同じ事が起こります。
スタイル指定自体が無視される事もありますので、とにかく一番先頭には文字コードの宣言を入れる事をお勧めします。書き方は以下の通りです。

/*と*/で囲まれた部分が、「コメント」です。CSSでは、人間が解りやすいようにメモ書きが出来る事になっています。
何に対するスタイルの指定なのか、どんな目的でこのコードを書いたのか、という事を書いておくと、後に見返した時、便利です。
これでバッチリコメントも書けますね！

２：CSSのプロパティ初期化について

現在、多く使われているブラウザと言えばIEです。
しかしながら、FirefoxやOperaといったブラウザもだんだん需要が増えています。お客様によっては、IE以外のブラウザを使用しているかもしれませんので、出来ればどのブラウザで閲覧しても、同じように表示出来れば良いですね。

所が、ブラウザによって、CSSのプロパティのデフォルト値(初期値)が違うため（bodyタグやリスト要素など）、同じ記述をしても違う表示結果になってしまう事があります。全ての初期値を把握し、ブラウザ毎のCSSを書かなくてはいけない・・となると現実的ではありませんので、

一旦、全てのセレクタで問題となるプロパティを初期化してしまうと、簡単です。

デフォルト値を上書きしてしまい、全てのブラウザで同じ値(ここでは0)に書き変えるという考え方です。

上記の文章で、セレクタに「*」が指定されています。これは、全称セレクタと呼ばれ、全ての要素にスタイルを指定する事が出来ます。
ユニバーサルセレクタとも呼ばれます。

これで、余白関連のプロパティの値をリセット出来ました。全称セレクタは一番優先順位が低くなっていますので、改めて余白を指定してやると、上書きされる仕組みになります。

次のページでは、混同しやすいmarginとpaddingについて、もう少し解説します。

ページ: 1 2

トラックバックURL