大和但馬屋日記

はてなダイアリーからの移行中

CSS再構築(その一) body要素

  • サンプル文書0(スタイルが一切定義されてゐない状態。設定画面のテーマの欄も「指定なし」を選択した。)

とりあへず、大枠から手を着けることにした。大枠といへばまづはbody要素だらう。
まるで呪文の様に、HTML文書の始めの方と終りの方に書けと言はれて書かされる要素である。もちろん、はてなダイアリーでは始めから用意されてゐるので、ユーザーが普段その存在を意識することはない。といふか、はてなダイアリーを普通に使ふ分にはどんなHTMLタグも意識する必要はないのだけれど、それではCSSが書けない。
で、こんな風に書いてみた。

body { 
    color:#033 ; /* 文字色の設定 */
    background-color:#3cc ;  /*背景色の設定 */
    margin:0 ; padding:0 ; /*枠の外側・内側の余白の設定*/
    font-family:osaka,verdana,sans-serif ; /*フォントの種類の設定*/
    font-size:100% ; /*フォントの大きさの設定*/
    }

body * { font-size:100% ; }

かうすることで、このダイアリーはサンプル文書1の様な見てくれになるはずである。なほ、サンプル文書の方でははてなヘッダなどの画像が表示されないが悪しからず。
何をしてゐるかはソースの注釈にある通りである。body要素に設定しておく項目としてこれが適切かどうかは正直わからないが、とりあへず私が設定しておきたいのはこれだけだ。
よく議論になるのがフォントサイズとフォントの種類の設定についてである。ここでは100%として、閲覧者のブラウザの標準設定の大きさに準拠する様にしてゐる。かうしておけば、閲覧者がブラウザの文字サイズを読みやすい様に変更できるので具合がいい。また、標準サイズが人によつて違ふからには100%以外の数値にすることに意味はない。
最後の body * { font-size:100% ; } は、body要素の中にあるすべての要素に対しても同じ様にフォントサイズに100%を適用せよといふ意味。おかげで、見出し要素だらうが何だらうがすべて同じ文字サイズとなつてゐる。これはこれで好みなのだが、見易さといふ点ではよろしくないだらう。見出しは見出しらしくあるべきだが、これは後で調整する。
もう一つ、フォントの種類の設定についてだが、これも設定すべきでないといふ意見があり、無碍にそれを否定すべきではないとは思ふ。ただ、個人的に標準的なパソコン用のセリフ付フォントは解像度の低いモニタ上では読むに耐へないものだと思つてゐるので、閲覧者が特に指定しない限りサンセリフ体で表示するようにさせていただいてゐる。この点、押付けがましいことには違ひないので要審議。
とりあへず、この項終り。次は日記本体を読み易くする方向で。