いつもは、既存のテンプレートを使うので、スタイルシートを自分で最初から設定することは無いのですが、それでも改訂を実施していくと、どこで何を設定して、どこを改訂したのかが解らなくなってしまいます。そこで、自分なりのルールを作ろうと考えてはいるのですが・・・

まずは、Body に関する設定ですが、とっても参考になる投稿記事を発見！「DesignWalker::CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント」という記事がそれですが、まったくそのまま適用できますね。私は、ちなみに次のように設定しています。

body {
margin:0; padding:0;
line-height:1.4;
background:#666666;
color:#333333; font-family:Arial, sans-serif;
font-size:10pt;
}

1、2行目の margin、padding、line-height は、上記の投稿記事の推薦通り！ブラウザごとに違っている余白を無くす為に margin と padding を “0″ に設定し、行間設定は、モニターで人間が最も読み易いそうである 1.4 を設定（これは、上記の投稿記事を読むまで知りませんでした・・・）。更に、最近は、3行目に background を設定しておくようにしています。私の場合、ブラウザ全体に広がるサイトページがあまり好きではないので、background の色、またはイメージを設定し、background にも拘って！？います。

4、5行目でフォントに関する設定。通常は、色（color）、種類（font-family）、大きさ（font-size）を設定します。フォントの大きさは、「固定しないこと」というのが鉄則のようですが、私は自分勝手にいつも 10pt に設定してしまいます。実は、自分が最も好きなサイズなもんでして・・・そういう意味では、自分勝手な設定で閲覧者を重視していないサイト、と言えるかもしれません。

そうそう！上記から、できるだけ前半部分に形に関するスタイルの設定（margin、padding、line-height、background、border 等）、次にフォント等文章や文字に対する装飾に関する記述という自分なりのルールを決めています。

と、ちょっとかっこいい事を言っていますが・・・実践が伴わない・・・

上記の投稿記事をベースに、とっても興味深い記事、「CSS Happy Life::bodyに設定しておくと便利な3つのポイントとおまけ」を発見。こちらでは、background を記述していますね！さらに CSS 記述に関する詳細な説明もあるので参考になります！

RSS 2.0 comments feed.
You can leave a response, or trackback from your own site.

(0) (0) (0) (0) Total: 0