- 締切済み
フォント関連の指定はなぜ全称セレクタでしないのか
*{margin:0; padding:0;} body, h1, h2, h3, h4, h5, h6, pre, li, dt, dd, th, td, p {font-family:honyarara;} スタイルシートの冒頭にこんな↑↑↑感じに書いてあるのをよく見かけるのですが、 これをこう↓↓↓書かない理由はなんでしょうか。 *{margin:0; padding:0; font-family:honyarara;}
- みんなの回答 (3)
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
>*{margin:0; padding:0;} >body, h1, h2, h3, h4, h5, h6, pre, li, dt, dd, th, td, p {font-family:"MS P明朝","平成明朝",serif; } >みたいな煩雑な表記を選択するのだろう、という疑問です。 もちろん無知という側面が最大の要因ですが、それ以外にmarginとpaddingは継承しないプロパティであること。そのためにすべての要素に対して指定しなければならないこと。継承されるプロパティについては、一つ一つのタイプセレクタを書く必要があるということ。 さすがにこの様な書き方はしませんが html,body{margin:0;padding:0;} body{font-family:"MS P明朝","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","平成明朝","DHP平成明朝W3",serif;} h1,h2,h3,h4,h5,h6,dt{font-family:"MS Pゴシック","ヒラギノ角ゴ Pro W3",Osaka,sans-serif;} のような書き方はします。 要は、わかりやすければよいわけで 最初にウィンドウと内容のスキマを消しておく。 ついで、少しずつ詳細度の高いもの、指定したいブロック・・・とどんどんと書き進めていきます。 ナビゲーション中のdtなどは異なる書体にしたければ /* ここからナビゲーションの指定 */ div.nav{****} div.nav dl,div.nav dl dt,div.nav dl dd{ display:block;list-style:none; margn:0;padding:0; font-family:"MS P明朝","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","平成明朝","DHP平成明朝W3",serif; } とかすればよい。詳細度はそれぞれ[0,0,1,2][0,0,1,3][0,0,1,3]ですから、順番に関わらず上書きされる。 まあ、なんで「トンネル内でライトをつけないのでしょう」と言われても、本人に聞かなきゃわからない。道交法では「トンネル内の照明が暗く50m先まで明瞭に見えない場合」となっているが、突然のトンネル照明の消灯や出口付近での対向車からの視認性を考えればそれでも・・結構つけない人が多い。理由はわかりません--本人に聞かなきゃ。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
>多くの人が margin や padding を全称セレクタで指定するのに、 そんなことはありません。 先にも書きましたように。それは某オーサリングツールのデフォルトだからです。(DWとか) >フォント関連の指定はなぜわざわざそれと別にするのだろうか、 それもありません。少なくともちゃんとしたスタイルシートでは見たことがありません。 書けば、body{font-family:****;}だけでよいはずです。 繰り返しますが body, h1, h2, h3, h4, h5, h6, pre, li, dt, dd, th, td, p {font-family: は、まったく無意味な書き方です。--知っている人が、そんな馬鹿な書き方をするわけないです。 >フォントファミリをすべて指定するとスタイルシートが煩雑になる、なんてことはないでしょう。 この時点ですでに煩雑ですし、少なくともpre要素で再指定しなければなりません。
お礼
>この時点ですでに煩雑ですし *{margin:0; padding:0;} という書き方をする人たちが、なんで *{margin:0; padding:0; font-family:"MS P明朝","平成明朝",serif; } みたいな簡潔な表記を避け、わざわざ *{margin:0; padding:0;} body, h1, h2, h3, h4, h5, h6, pre, li, dt, dd, th, td, p {font-family:"MS P明朝","平成明朝",serif; } みたいな煩雑な表記を選択するのだろう、という疑問です。 この時点とはどの時点のことか、わかりませんが、 言われてみれば、「そういう書き方をする人に聞いた方がいい」という気もしてきました。 ORUKA1951さんがそんな表記を選択されない(ので、こんな疑問に答えられるわけもない)ことは、よくわかりました。 >できればユーザーの好みで読んでほしいから・・ これは僕も同感で、すべてのユーザーが自分なりの好みで表示をカスタマイズしてるのであればそれでいいのですが、実際はそんなことないと思うんですよ。例えばMac版Safariのデフォルト表示フォントはヒラギノ明朝です。たぶんMacユーザーのほとんどはそんなことは意識せず、デフォルトのまま使ってるんじゃないでしょうか。フォントについて何も指定しないサイト「A」を作ると、たぶんほとんどのMacユーザーには、本文も見出しもヒラギノ明朝で表示されます。 ところが、その「ほとんどのMacユーザー」たちがアップルのホームページにアクセスすると、本文も見出しもヒラギノゴシックで表示されるわけです。アップルのホームページはそういうCSS だから。 みなさん思うでしょう。サイト「A」は明朝で、アップルのサイトはゴシックなのね、と。アップルは「本音ではゴシックの方がいい」と思いながら「ブラウザのデフォルトには明朝」という訳の分からない選択をしています。すると、「フォントについては何も指定しない」のがベストだとばかりも言えなくなってくると思うわけです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
*{margin:0; padding:0; font-family:honyarara;} は、あまりに酷いので論外ですが・・・ 説明すると、全称セレクタは詳細度0とはいえ、ブラウザのデフォルトの指定をすべて消し去ります。結果的にolやul,blockquoteも全部margin,paddinがゼロになってしまう。そのため、改めて指定する必要があるためスタイルシートが煩雑になります。 また、当然CSS2から導入されたセレクタなのでCSS2に非対応の古いブラウザには無効です。 body, h1, h2, h3, h4, h5, h6, pre, li, dt, dd, th, td, p {font-family:honyarara;} もあまり使いたくない指定です。理由は上と同じです。詳細度がd=1になることくらい。 そもそも、font-familyは継承されるプロパティ 【引用】____________ここから 'font-family' Value: [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit Initial: depends on user agent Applies to: all elements Inherited: yes←継承:yesと書いてある。 Percentages: N/A Media: visual Computed value: as specified  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Fonts( http://www.w3.org/TR/CSS2/fonts.html#propdef-font-family )]より ですので、親要素に記述すれば良いです。すなわち body{font-family:******,serif;} とフォント名を羅列して,最後に総称ファミリ名を書くことが推奨されています。 よって、いずれもスタイルシートをまったく理解していない人が使っているのではないかと・・・ 1) まあ、*{margin:0;padding:0;}はあるオーサリングツールのデフォルトです。 その意味を知らずに、長々しく煩雑でメンテナンス不能なスタイルシートをそのまま使っている人。 2) body, h1, h2, h3, h4, h5, h6, pre, li, dt, dd, th, td, p はそもそもまったくスタイルシートを知らない人が書いているもの。カスケーディング自体に無知。 ★そもそもpreにmonospace以外のフォントを指定することは、否定されている。 私は、サイト全体のデザインを統一するために永続的スタイルシートには html,body{margin:0;padding:0;} body{font-family:"MS P明朝","平成明朝",serif;} p{text-indent:1em;margin:0 100%;} 位しか書いていません。 できればユーザーの好みで読んでほしいから・・
お礼
全称セレクタで margin や padding をいったん無効化することの是非についても 興味はありますが、それはこの質問の趣旨ではありません。 多くの人が margin や padding を全称セレクタで指定するのに、 フォント関連の指定はなぜわざわざそれと別にするのだろうか、という疑問です。 margin や padding をすべて無効化するとスタイルシートが煩雑になる、というのは理解できますが。 フォントファミリをすべて指定するとスタイルシートが煩雑になる、なんてことはないでしょう。
お礼
ありがとうございました。