さて、引き続きもう少しだけ解説を。
body {
color:#333; /* フォアグラウンドの色指定 */
background-color:#fff; /* バックグラウンドの色指定 */
font-family:Arial, Helvetica, sans-serif; /* フォントの指定 */
}
最初にbodyとユニバーサルセレクタを設定した後、モジュール毎の設定をしていきます。
フォアグラウンドの色とバックグラウンドのデフォルト指定をします。
フォント指定をします。フォントの種類と、それが無い場合の省略時のフォントタイプを指定します。
ここで一つ注意が必要なのですが、Safariの場合、「Sans-serif」省略時フォントは「ヒラギノ角ゴ」なのですが、ヒラギノ角ゴはunicode参照文字に完全対応していません。例えば、ローマ数字などを表示させる場合、数値参照で表示させますが、ヒラギノ角ゴは表示できないといったマニアックな問題が発生します。よって、Mac用にOsakaを充てておくのが得策かもしれません。これはお好みでどうぞ。
テキスト関連モジュールはそれぞれ、文字の大きさやdisplay設定などをしていただくということで省略。
ハイパーテキストモジュール(リンク設定)は、擬似クラスの出現順に気をつけます。
a { text-decoration:none; }
a:link { color:#123; }
a:visited { color:#456; }
a:hover { color;789; }
まず、aタグに対してのデフォルト設定を決めます。上記の場合は装飾なしです。
次に、擬似クラスの指定をしますが、この出現順は「link」→「visited」→「hover」の順で指定します。この順番が違うと、動作が上手くいきません。
ul,
ol,
dl { list-style-position:inside; }
次にリスト関連モジュールですが、ここで重要な点はリストマーク表示位置。通常リストとして使用する場合は殆どinside、つまり内側にリストマークを入れますが、ナビゲーションなどで利用する場合は、個々にoutsideを指定します。WinIEの場合、「list-style-type:none;」を指定してもリストマークボックスが消えないことがあるからです。
テーブルなど、その他の設定は好みで指定していただくとして、その他重要な点を挙げておくと・・・
img {
border:none;
vertical-align:bottom;
}
画像の枠線をデフォルトのままにしておくと、リンクを設定した場合にボーダーが現れるので、いちいち指定が面倒な場合はここで指定しておきます。「vertical-align:bottom;」を設定する理由は、画像でのナビゲーションリストなどを作る場合に、リストの間に隙間ができてしまうIE6のバグへの対応です。これは「li」タグに指定するのが方法としてベストなのかもしれませんが、たいていの場合は画像を仕込む時に起きるので、私の場合は「img」タグに仕込んでおきます。(私は故あって画像置換を使いませんので・・・。)
という感じで、一通りYUIから流用したデフォルト設定についての解説を完了します。
これに、それぞれの構造指定、部分指定を加えていくと、見栄えにあまり差異がなくスタイルを指定できます。
body {
color:#333; /* フォアグラウンドの色指定 */
background-color:#fff; /* バックグラウンドの色指定 */
font-family:Arial, Helvetica, sans-serif; /* フォントの指定 */
}
最初にbodyとユニバーサルセレクタを設定した後、モジュール毎の設定をしていきます。
フォアグラウンドの色とバックグラウンドのデフォルト指定をします。
フォント指定をします。フォントの種類と、それが無い場合の省略時のフォントタイプを指定します。
ここで一つ注意が必要なのですが、Safariの場合、「Sans-serif」省略時フォントは「ヒラギノ角ゴ」なのですが、ヒラギノ角ゴはunicode参照文字に完全対応していません。例えば、ローマ数字などを表示させる場合、数値参照で表示させますが、ヒラギノ角ゴは表示できないといったマニアックな問題が発生します。よって、Mac用にOsakaを充てておくのが得策かもしれません。これはお好みでどうぞ。
テキスト関連モジュールはそれぞれ、文字の大きさやdisplay設定などをしていただくということで省略。
ハイパーテキストモジュール(リンク設定)は、擬似クラスの出現順に気をつけます。
a { text-decoration:none; }
a:link { color:#123; }
a:visited { color:#456; }
a:hover { color;789; }
まず、aタグに対してのデフォルト設定を決めます。上記の場合は装飾なしです。
次に、擬似クラスの指定をしますが、この出現順は「link」→「visited」→「hover」の順で指定します。この順番が違うと、動作が上手くいきません。
ul,
ol,
dl { list-style-position:inside; }
次にリスト関連モジュールですが、ここで重要な点はリストマーク表示位置。通常リストとして使用する場合は殆どinside、つまり内側にリストマークを入れますが、ナビゲーションなどで利用する場合は、個々にoutsideを指定します。WinIEの場合、「list-style-type:none;」を指定してもリストマークボックスが消えないことがあるからです。
テーブルなど、その他の設定は好みで指定していただくとして、その他重要な点を挙げておくと・・・
img {
border:none;
vertical-align:bottom;
}
画像の枠線をデフォルトのままにしておくと、リンクを設定した場合にボーダーが現れるので、いちいち指定が面倒な場合はここで指定しておきます。「vertical-align:bottom;」を設定する理由は、画像でのナビゲーションリストなどを作る場合に、リストの間に隙間ができてしまうIE6のバグへの対応です。これは「li」タグに指定するのが方法としてベストなのかもしれませんが、たいていの場合は画像を仕込む時に起きるので、私の場合は「img」タグに仕込んでおきます。(私は故あって画像置換を使いませんので・・・。)
という感じで、一通りYUIから流用したデフォルト設定についての解説を完了します。
これに、それぞれの構造指定、部分指定を加えていくと、見栄えにあまり差異がなくスタイルを指定できます。