CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント へのコメント http://www.designwalker.com/2007/02/css-body.html ロサンゼルスで働くウェブデザイナーの日記。 Tue, 02 Feb 2010 13:44:57 +0000 http://wordpress.org/?v=2.9.1 hourly 1 CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - Webマスターの為の情報共有サイト　マウンテンブック より http://www.designwalker.com/2007/02/css-body.html/comment-page-1#comment-333 CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - Webマスターの為の情報共有サイト　マウンテンブック Sat, 17 Jan 2009 15:11:42 +0000 http://new.designwalker.com/2007/02/css%ef%bc%88%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88%ef%bc%89%e3%81%a7body%e3%81%ab%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%8a%e3%81%8f%e3%81%a8%e4%be%bf%e5%88%a9%e3%81%aa5.html#comment-333 [...] 引用サイトはコチラ [...] [...] 引用サイトはコチラ [...]

]]> ナカハラＷＥＢデザイン » Blog Archive » bodyに設定しておくと便利なポイント より http://www.designwalker.com/2007/02/css-body.html/comment-page-1#comment-332 ナカハラＷＥＢデザイン » Blog Archive » bodyに設定しておくと便利なポイント Tue, 28 Oct 2008 00:59:25 +0000 http://new.designwalker.com/2007/02/css%ef%bc%88%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88%ef%bc%89%e3%81%a7body%e3%81%ab%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%8a%e3%81%8f%e3%81%a8%e4%be%bf%e5%88%a9%e3%81%aa5.html#comment-332 [...] ロサンゼルスで働くウェブデザイナーの日記。のCSS（スタイルシート）でb... [...] [...] ロサンゼルスで働くウェブデザイナーの日記。のCSS（スタイルシート）でb… [...]

]]> 管理人 より http://www.designwalker.com/2007/02/css-body.html/comment-page-1#comment-326 管理人 Thu, 03 Jan 2008 08:37:17 +0000 http://new.designwalker.com/2007/02/css%ef%bc%88%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88%ef%bc%89%e3%81%a7body%e3%81%ab%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%8a%e3%81%8f%e3%81%a8%e4%be%bf%e5%88%a9%e3%81%aa5.html#comment-326 山本さん コメントどうもありがとうございます。確かに、結構classやID名って迷いますよね。特に、複雑なサイトになればなるほど。。。 かなり前のエントリーですが。。<a href="http://articles.techrepublic.com.com/5100-22-5286783.html" rel="nofollow">こちら</a>が参考になるかも。 山本さん
コメントどうもありがとうございます。確かに、結構classやID名って迷いますよね。特に、複雑なサイトになればなるほど。。。
かなり前のエントリーですが。。こちらが参考になるかも。

]]> 山本 より http://www.designwalker.com/2007/02/css-body.html/comment-page-1#comment-325 山本 Fri, 14 Dec 2007 15:15:51 +0000 http://new.designwalker.com/2007/02/css%ef%bc%88%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88%ef%bc%89%e3%81%a7body%e3%81%ab%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%8a%e3%81%8f%e3%81%a8%e4%be%bf%e5%88%a9%e3%81%aa5.html#comment-325 うーんやっぱりいろんな人の意見って勉強になりますね。 現在はフリーでやってるもので、意見交換をすることもなく、独りよがりにならないように気をつけようと思ってはいるんですが。 ちょっと話はずれますが、皆さんclass名やid名ってどうされていますか？ たとえば、ロゴや上部メニューなどにはheader、メイン部分はmainやlayoutなどある程度に通った名前が使われているようですが、たとえば、3カラムの場合の右側部分、header部分のロゴの横にスペースを設ける場合など細かい部分ってどうしているんでしょう？ ちょっと他の人のものぞいてみたくなったもので・・・。 うーんやっぱりいろんな人の意見って勉強になりますね。
現在はフリーでやってるもので、意見交換をすることもなく、独りよがりにならないように気をつけようと思ってはいるんですが。

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

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

]]> アレ凝レセカイ より http://www.designwalker.com/2007/02/css-body.html/comment-page-1#comment-331 アレ凝レセカイ Thu, 19 Apr 2007 02:36:53 +0000 http://new.designwalker.com/2007/02/css%ef%bc%88%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88%ef%bc%89%e3%81%a7body%e3%81%ab%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%8a%e3%81%8f%e3%81%a8%e4%be%bf%e5%88%a9%e3%81%aa5.html#comment-331 <strong>エセ文章上達法　下手でも上手く見せたいじゃない</strong> 「最適な行間サイズってドレくらいだろ？」 CSSをコーディングしてるときに出た疑問である。 文章力がないからこそ、せめて人に読んでもらえるよう、 ... エセ文章上達法　下手でも上手く見せたいじゃない

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

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

]]> 管理人 より http://www.designwalker.com/2007/02/css-body.html/comment-page-1#comment-324 管理人 Tue, 27 Mar 2007 19:27:30 +0000 http://new.designwalker.com/2007/02/css%ef%bc%88%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88%ef%bc%89%e3%81%a7body%e3%81%ab%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%8a%e3%81%8f%e3%81%a8%e4%be%bf%e5%88%a9%e3%81%aa5.html#comment-324 cllackrさん 詳しい、ご解説どうもありがとうございます。 確かに印刷時の設定や、弱視の方やご高齢の方などへの配慮など、それぞれのサイト、ブログのターゲット層などを考慮しながらデザインすることは、非常に大切なことだと思います。貴重なご意見どうもありがとうございます。今後ともよろしくお願いいたします。 cllackrさん
詳しい、ご解説どうもありがとうございます。
確かに印刷時の設定や、弱視の方やご高齢の方などへの配慮など、それぞれのサイト、ブログのターゲット層などを考慮しながらデザインすることは、非常に大切なことだと思います。貴重なご意見どうもありがとうございます。今後ともよろしくお願いいたします。

]]> cllackr より http://www.designwalker.com/2007/02/css-body.html/comment-page-1#comment-323 cllackr Tue, 27 Mar 2007 07:41:23 +0000 http://new.designwalker.com/2007/02/css%ef%bc%88%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88%ef%bc%89%e3%81%a7body%e3%81%ab%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%8a%e3%81%8f%e3%81%a8%e4%be%bf%e5%88%a9%e3%81%aa5.html#comment-323 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> ------------------------------ それと、上のコメントに <blockquote>marginとpaddingですが、bodyに設定すると子孫要素への継承が行われない要素があったように思います。 ですので、marginとpaddingはグローバルセレクタで設定する方が良いのではないでしょうか？</blockquote> とありますが、たとえば * { margin : 0; padding : 0;} とするとol,ul,liなどにも影響します。それらのタグに全てmarginとpaddingが指定してあるなら問題はありませんが、そうでない場合は注意が必要です。 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が指定してあるなら問題はありませんが、そうでない場合は注意が必要です。

]]> 萌え理論Blog より http://www.designwalker.com/2007/02/css-body.html/comment-page-1#comment-330 萌え理論Blog Sun, 25 Mar 2007 03:16:46 +0000 http://new.designwalker.com/2007/02/css%ef%bc%88%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88%ef%bc%89%e3%81%a7body%e3%81%ab%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%8a%e3%81%8f%e3%81%a8%e4%be%bf%e5%88%a9%e3%81%aa5.html#comment-330 <strong>[情報]CSSまとめ</strong> 解説 CSSとは CSS*1とは、(X)HTML文書の見栄えを整形するための、Web標準*2の指定方法です。要するにホームページをデザインする手段です。... [情報]CSSまとめ

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

]]> LifeHacks with Aipo より http://www.designwalker.com/2007/02/css-body.html/comment-page-1#comment-329 LifeHacks with Aipo Thu, 15 Mar 2007 03:53:10 +0000 http://new.designwalker.com/2007/02/css%ef%bc%88%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88%ef%bc%89%e3%81%a7body%e3%81%ab%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%8a%e3%81%8f%e3%81%a8%e4%be%bf%e5%88%a9%e3%81%aa5.html#comment-329 <strong>CSSでテキストフィールドの見た目を制御する</strong> CSSでフォームの見た目を制御するで書いたとおり、フォームの見た目を調整していきます。 ウィンドウズのIE6,IE7,Firefoxでチェックしていきます... CSSでテキストフィールドの見た目を制御する

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

]]> 管理人 より http://www.designwalker.com/2007/02/css-body.html/comment-page-1#comment-322 管理人 Tue, 20 Feb 2007 20:04:16 +0000 http://new.designwalker.com/2007/02/css%ef%bc%88%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88%ef%bc%89%e3%81%a7body%e3%81%ab%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%a6%e3%81%8a%e3%81%8f%e3%81%a8%e4%be%bf%e5%88%a9%e3%81%aa5.html#comment-322 Verdanaさん 確かにそうですね。。ひとりでも多くの方にサイトやブログを見てもらう。ということを考えると、ユニバーサルデザイン。。。避けては通れませんね。。貴重なご意見ありがとうございます！！ Verdanaさん
確かにそうですね。。ひとりでも多くの方にサイトやブログを見てもらう。ということを考えると、ユニバーサルデザイン。。。避けては通れませんね。。貴重なご意見ありがとうございます！！

]]>