CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント

本日は、実用的なCSS(スタイルシート)のお話。CSSコーディングを始める一番最初にbodyタグに設定しておくと、結構便利かな?と思われるポイントをまとめてみました。。

margin:0; padding:0;

margin:0; padding:0;って設定しておくと、とりあえずブラウザの標準で設定されている余白を無くす事ができますね。ブラウザごとにこの余白の設定はまちまちなもので、わたくしは最初に0にしてます。。(デザインにもよりますが。。)

line-height:1.4;

これは、行間設定ですわ。1.4はモニタで文章を読むときに、人間が一番読みやすいと言われている行間設定です。。

color:#333;

文字の色ですね。これも、デザインによりけりですが。。真っ黒な文字色よりも、濃いグレーくらいのほうが目にやさしい?(好みの問題ですが。。。)

font-family:Arial, sans-serif;

フォントの設定ですね。こちらはお好みのフォントで良いかと思われますが。。

font-size:0.9em;

フォントサイズは、わたくし最近は、0.9emに設定するようにしてます。12pxとか14pxとかpxで指定される方も多いかと思われますが。。。1emに設定しておくと、ブラウザの標準設定では、実際には16pxで表示されるようです。

日本語のような2バイト文字では、16pxちょっと大きすぎるかなぁ。。って感じなので、0.9emに設定。16×0.9=14.4なので、ブラウザの設定を変更していないユーザーさんには、実際には14.4pxで表示されてるはず。ちなみに0.875emって設定すると14pxで表示されます。

ブラウザの設定でフォントのサイズを大きめに変更してるユーザーさんには大きく表示されるので、pxで設定するよりも、親切設定って事ですね。。

っちゅうわけで、まとめてみると。。

body {
margin: 0;
padding: 0;
line-height:1.4;
color:#333;
font-family:Arial, sans-serif;
font-size:0.9em;
}

これは、あくまでも参考ということで。。デザインによっても設定は微妙に変わってくると思いますが。。一般的にはこの辺の設定は使いまわせるのではないでしょうか??

デザインblogランキングデザインblogランキング

デザインblogランキング

コメント 25 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



25 Responses to “CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント”

  1. sans-serif Says:

    使用フォントを sans-serif に指定した HTML ファイルを Internet Explorer で表示すると文字化けします、と Microsoft が言っています。
    日本語サイトで広範囲のユーザーを対象とする場合は注意。

  2. Happy Engineer Life (PukiWiki/TrackBack 0.3) Says:

    CSS

    Tag: CSS CSS ライブラリ 関連ページ コメント CSS CSS セレクタに関するおさらい | WWW WATCH 53 CSS-Te…

  3. 管理人 Says:

    sans-serifさん
    貴重な情報ありがとうございます。。確かに。。。

    * フォントとして sans-serif が適用される(前提となる条件)
    * ブラウザに IE5.x or IE6 を使用している(イ)
    * ある特定のフォントがPCにインストールされている(ロ)
    * OS が Windows 2000 / XP 以外の Windows である(ハ)

    上記のような、条件がそろうと文字化けが起こる可能性があるようです。。

  4. 山田 Says:

    フォントの固定するのは最悪ですよ。おじいちゃんやおばあちゃんもインターネッツやるんだからね!

  5. 管理人 Says:

    山田さん
    コメントどうもありがとうございます~!!実際、日本のおじいちゃんやおばあちゃんもネットやってるんですかね??サイトによっては、そういった事も考慮した作りにすることは大切ですよね~。

  6. むるむる Says:

    じいちゃんばあちゃんでなくてもフォントサイズには悩まされますよ。「16pxちょっと大きすぎるかなぁ。。」と思われる方が、ブラウザの設定を14.4pxなどになさればいいのではないでしょうか。
    見たい(ブラウザに設定している)サイズより縮小表示されてしまうわけですから、親切にはならないと思います。

  7. OmaPi Says:

    colorだけ指定するのってどうなんでしょう。
    background-colorも指定するべきでは?

  8. 管理人 Says:

    むるむるさん
    貴重なご意見ありがとうございます。確かに、標準設定から小さく変更してるわけですから、親切ではないかも。。むしろ、不親切か。。。ごもっともです。。。

    OmaPiさん
    確かに、background-colorも指定するべきですね。。。ご指摘どうもありがとうございます。

  9. たつもとちまき Says:

    line-height:1.4;には単位が欠けていて文法エラーになるので、1.4emとか140%とかに直しましょう。

    16px環境で0.9em指定すると割り切れないので、実際には14pxのフォントを表示する(ブラウザによっては15なのかな?)事になります。14.4pxにはならないでしょう。

    読みやすさを考慮するなら、文字色を淡くするよりも、背景を純白でなくする方が効果があると思います。

    あと、他のほとんどの方には問題はないでしょうけど、うちでは、ArialやVerdanaなどの英語フォントが指定されているページに日本語の文字が混ざっていると、ブラウザが異常終了します。

  10. ebi Says:

    ターゲットを踏まえた上で何を伝えたいのかってところですよね。つまり伝えたいことが損なわれるのであれば、16pxはでっかいワケですよ。

    じいちゃんが見ることを常に考えて、でっかいフォントを使うって方がナンセンスじゃないんですかね。
    20pxならいいのかってことでもないでしょ(笑)

  11. quaa Says:

    たつもとちまきさん
    line-heightの単位無しの値は仕様によって定められています。1.4と、1.4emまたは140%では子孫要素への継承の仕方が違います。
    http://www.y-adagio.com/public/standards/tr_css2/visudet.html#propdef-line-height

  12. 悠希 Says:

    marginとpaddingですが、bodyに設定すると子孫要素への継承が行われない要素があったように思います。
    ですので、marginとpaddingはグローバルセレクタで設定する方が良いのではないでしょうか?

    もちろん、全部のmarginとpaddingを0にする必要がなければbodyでよろしいかと思いますが。

    文字指定をemで指定するのはpxと違ってブラウザ側で文字サイズを変更できるのであまり問題ないと思いますよ。
    ただ、わかりやすい所に文字サイズ変更のボタンがあると便利ですね。

  13. 管理人 Says:

    コメントいただきましたみなさま、大変参考になるご意見、本当にありがとうございます!中途半端なエントリーを投稿してしまった為、このような結果になってしまったこと。。。反省しております。。まだまだ、このエントリーに関しては議論の余地が残っていると思われるため、あえて本文の修正はしないで、このまま残しておこうと思います。

  14. CSS HappyLife Says:

    bodyに設定しておくと便利な3つのポイントとおまけ

    CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント – デザインウォーカー | DesignWalker – ロサンゼルスで働くウェブ…

  15. Verdana Says:

    僕もどちらかと言えば、%派です。
    フォントサイズとラインハイトは%で指定することで、
    相対的に大きさが変えられる。以前、政府のサイトを
    作ってた関係で、ユニバーサルデザインという方法を
    勉強させられた結果、やはり爺さん婆さんも見やすい
    サイト作りというのが、%で指定する、というやり方
    でした。昔むかしの話ですが、やっぱりこちらのサイトも
    文字はでかいですが、見やすいですし、読みやすいですね。

  16. 管理人 Says:

    Verdanaさん
    確かにそうですね。。ひとりでも多くの方にサイトやブログを見てもらう。ということを考えると、ユニバーサルデザイン。。。避けては通れませんね。。貴重なご意見ありがとうございます!!

  17. LifeHacks with Aipo Says:

    CSSでテキストフィールドの見た目を制御する

    CSSでフォームの見た目を制御するで書いたとおり、フォームの見た目を調整していきます。 ウィンドウズのIE6,IE7,Firefoxでチェックしていきます…

  18. 萌え理論Blog Says:

    [情報]CSSまとめ

    解説 CSSとは CSS*1とは、(X)HTML文書の見栄えを整形するための、Web標準*2の指定方法です。要するにホームページをデザインする手段です。…

  19. cllackr Says:

    font-sizeはpxとかem、%よりも、ptのが良いような気もしますが…。
    CSS Media Typeで印刷用CSSを付けてるなら別ですが、10.5ptとかで指定しとくと印刷時にも読みやすいです。
    pxでは文字サイズを完全に固定するのでデザインする上では楽ですが、弱視の方やご高齢の方など、文字が小さくて読みにくいということで72dpiや96dipよりも高い解像度設定にしている方や、逆に低くしている方などにとってはとても使いづらいですから。

    オススメは、bodyには10ptや12ptで指定し、その中のh1やpなどは150%や88%というように親からの相対値で指定しておき、どこかにJavaScriptでbodyの文字サイズを書き換えるボタンなどを用意する、です。
    —例————————-
    body { font-size : 10pt; }
    h1 { font-size : 150%; }
    #dscr { font-size : 88%; }
    #fnt { font-size : 120%; }

    <body>
    <h1> Lorem Ipsum Dolor</h1>
    <p id=”fnt”><a href=”javascript:void(0)” onclick=”document.body.style.fontSize=’12pt'”>[+] Make text bigger</a></p>
    <p> Purus in consectetuer Proin in sapien. Fusce urna magna neque eget lacus. Maecenas felis nunc, aliquam ac consequat vitae feugiat at blandit vitae. Purus in consectetuer Proin in sapien. Fusce urna magna neque eget lacus. Maece lorem ipsum dolor. Purus in consectetuer Proin in sapien.
    Purus in consectetuer Proin in sapien. Fusce urna magna neque eget lacus. Maecenas felis nunc, aliquam ac consequat vitae feugiat at blandit vitae. Purus in consectetuer Proin in sapien.</p>
    <p id=”dscr”>January 20, 2006</p>
    </body>
    ——————————

    それと、上のコメントに

    marginとpaddingですが、bodyに設定すると子孫要素への継承が行われない要素があったように思います。
    ですので、marginとpaddingはグローバルセレクタで設定する方が良いのではないでしょうか?

    とありますが、たとえば * { margin : 0; padding : 0;} とするとol,ul,liなどにも影響します。それらのタグに全てmarginとpaddingが指定してあるなら問題はありませんが、そうでない場合は注意が必要です。

  20. 管理人 Says:

    cllackrさん
    詳しい、ご解説どうもありがとうございます。
    確かに印刷時の設定や、弱視の方やご高齢の方などへの配慮など、それぞれのサイト、ブログのターゲット層などを考慮しながらデザインすることは、非常に大切なことだと思います。貴重なご意見どうもありがとうございます。今後ともよろしくお願いいたします。

  21. アレ凝レセカイ Says:

    エセ文章上達法 下手でも上手く見せたいじゃない

    「最適な行間サイズってドレくらいだろ?」

    CSSをコーディングしてるときに出た疑問である。
    文章力がないからこそ、せめて人に読んでもらえるよう、

  22. 山本 Says:

    うーんやっぱりいろんな人の意見って勉強になりますね。
    現在はフリーでやってるもので、意見交換をすることもなく、独りよがりにならないように気をつけようと思ってはいるんですが。

    ちょっと話はずれますが、皆さんclass名やid名ってどうされていますか?

    たとえば、ロゴや上部メニューなどにはheader、メイン部分はmainやlayoutなどある程度に通った名前が使われているようですが、たとえば、3カラムの場合の右側部分、header部分のロゴの横にスペースを設ける場合など細かい部分ってどうしているんでしょう?
    ちょっと他の人のものぞいてみたくなったもので・・・。

  23. 管理人 Says:

    山本さん
    コメントどうもありがとうございます。確かに、結構classやID名って迷いますよね。特に、複雑なサイトになればなるほど。。。
    かなり前のエントリーですが。。こちらが参考になるかも。

  24. ナカハラWEBデザイン » Blog Archive » bodyに設定しておくと便利なポイント Says:

    […] ロサンゼルスで働くウェブデザイナーの日記。のCSS(スタイルシート)でb… […]

  25. CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント - Webマスターの為の情報共有サイト マウンテンブック Says:

    […] 引用サイトはコチラ […]

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ