- ベストアンサー
ＣＳＳで、わからないところがあります
ＣＳＳを独学で勉強していますがあるところでソースをもらったのですがこういうのがありました。 ＣＳＳのはフォルダを作っています。 default.css import.css style.css の3つです。 内容は下に書いています。 default.cssには @charset "UTF-8"; body { margin: 0; padding: 0; background-color:#FFFFFF; text-align:left; } import.cssには @charset "UTF-8"; /* CSS Document */ @import "default.css"; @import "style.css"; style.css これは他のＣＳＳと同じように沢山書いています。 @charset "UTF-8"; /* CSS Document */ * { font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック'; font-size: 14px; line-height: 1.6em; } 以下続く 質問1 なぜ3つも必要のなのでしょうか？style.css1つにまとめてもいいのではないでしょうか？ 質問2 style.cssの * { font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック'; font-size: 14px; line-height: 1.6em; } これはアスタリスク*に対して指定しているのでしょうか？ 質問3 ＨＴＭＬ側にはShift_JISとなっていますが、ＣＳＳは@charset "UTF-8";となっており、これって間違いではないのでしょうか？ ネットで調べたら、文字化けの要因になると書いていました。 これはあっているのでしょうか？ ＨＴＭＬ側 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> 質問4 <div id="header" style="background-image:url(img/header.jpg);"> <div id="a"> <div id="b"> <h1 id="a">猫の気持ち</h1> <div id="c"> <span class="blue big3 b">猫の気持ち</span> </div> というソースがありました。 <span class="blue big3 b">猫の気持ち</span> の中の、blue big3 bというの指定が見当たりません。 blue big3 b という各自の指定はＣＳＳでされています。 3つを合わせて指定することができるのでしょうか？ それともこれってタグですか？ <span class="">って、 色、サイズ、太さをこのように指定するとこのようになるのでしょうか？ 確かに色は青で太字でしたbig3は不明ですが・・・ 初心者並の質問ですみません。 よろしくお願いします。 ＣＳＳの簡単なサイトを見てもやはりよく分からないのです。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
既に適切なお答えが出ていますので、補足的な事のみ。 > 質問3 CSSファイル中の記述（フォント指定やコメントなど）に日本語が出てこないのであれば、CSSファイルとHTMLファイルのエンコードが異なっていても実質上の問題は出ないかとは思います。ただ、HTMLとCSSのエンコードは合わせるのが一般的だと思いますが…わざわざ変えてあるとしたら、その意図はわかりかねます。 > 質問4 CSSの記述のルール（文法）がまだよくわかっていないので混乱されている様に思われます。 勉強されているのであれば、いきなり色々ソースを検証するよりも先ずそこをきちんと理解しておいた方が良いです。理解してからの方がソースを読み解くのも格段に楽になりますから。 既にご回答の出ている通り、classの値は複数を指定できるという事です。ですから、 > blue big3 bというの指定が見当たりません。 上記の値は"blue big3 b"という一つの値ではなく、"blue", "big3", "b"という別々のclassを一つの要素（タグ）spanに対してまとめて指定しているわけです。なので、 > 3つを合わせて指定することができるのでしょうか？ そうです。 > それともこれってタグですか？ 違います。 > <span class="blue big3 b">猫の気持ち</span> 上記の部分で「タグ（tagname）」と言えるのは <span></span>の部分だけです。 「class="blue big3 b"」の「class」の部分はタグの「属性」であり、「"blue big3 b"」の部分は「属性値」と言います。 タグネームと属性は予め用意されたいくつかの記述以外は存在しませんが、「属性値」に関してはその限りではなく、（規則に則った）任意の値が入れられるものがあります。属性classの場合の属性値は、CSSで定義された値である限り、任意に選べます。 なので、 > <span class="">って、色、サイズ、太さをこのように指定するとこのようになるのでしょうか？ 違います。この場合は上記のclassの属性値として指定された値がCSS側で設定されており、その設定されたプロパティの内容がそれぞれ 「文字色：青（.blue { color: #00f; }）」 「文字サイズ：（基準サイズより）大きい（.big3 { font-size: 140%; }）」 「文字の太さ：太字（.b { font-weight: bold; }）」 ※（）内は想像による一例です。 といった様な指定がされているからこそ、結果として > 確かに色は青で太字でした というスタイルで表示されるのです。これがもし、CSS側の指定で、class名が同じでもプロパティが： .blue { color: #f00; } .big3 { font-size: 75%; } .b { font-weight: normal; } となっていたとしたら、HTML側の記述が全く同じ「<span class="blue big3 b">猫の気持ち</span>」であったとしても、テキスト部分の表示のスタイルは「文字色は赤、文字の大きさは基準サイズより小さく、太字ではない」状態で表示される、という事です。 この後者の例で（class名の持つイメージと実際のスタイルにギャップが生じる）おわかりになって頂けたかと思いますが、class名の付け方としてこういう物理的なネーミングは推奨されません。「猫の気持ち」というテキストが何か特別な意味を持つからこそ「（基準のテキストから）色を変えて、大きくして、太字にして」目立たせたいのであれば、class名にもその「特別な意味」を表すネーミングをしておくのが望ましいとされます。 CSSの文法等については、このあたりがわかりやすいかと思います。 http://w3g.jp/css/guide/ http://www.tagindex.com/stylesheet/basic/index.html
その他の回答 (3)
- salonpath
- ベストアンサー率48% (194/399)
A1 本当の意図は作成者にしかわからないと思います、ソースをもらったのなら直接聞いてみればどうでしょうか？ この人なんで1つのトピに4つも質問を載せてるんですか？とどこかで質問されるようなもんですよね。 想像で答えるとすると@import "style.css";でIE4をはじいてます その前にhtmlからimport.cssをリンクする時に mediaをscreen,printなんかにしてたらNN4をはじいてると思います。 A2 全称セレクタといって全ての要素に適用されるそうです。 A3 この場合もしかしたらどっかのブラウザでfont-family（ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック）が文字化けして意図したfont-familyが適用されてないかもしれないですね。 A4 http://gyauza.egoism.jp/clip/archives/2007/05/070518-css-class/ [引用](X)HTML上で、複数のclassを指定できるのは結構有名な話です。 とのことです。
- sh_hirose
- ベストアンサー率66% (56/84)
参考サイトを張り忘れたので張っておきます。 WEB関係では結構お世話になってますｗ
- sh_hirose
- ベストアンサー率66% (56/84)
質問１：これは作成者の好みにもよりますが、分けるのはそのページだけでなく他のページでも使用する可能性があるからだと思います。 例えばＡ、ＢというページがあったとしてＡにはbase.cssとstyle.cssを、Ｂにはbase.cssとstyle2.cssを使用するってな感じです。 base.cssはＡにもＢにも共通なのでひとつにまとめてしまいます。 質問２：すべての要素という意味 質問３：HTML側で<style type="text/css" src="base.css" charset="UTF-8"/>のようにcharsetが記載されていれば問題はありません。 質問４：classに複数指定したい場合には半角スペースで区切ります。 CSSでblueが文字を青、big3でフォントサイズを12pt、bで太字を指定されていたら<span class="blue big3 b">猫の気持ち</span>は、フォントサイズ12ptで太字で青色で「猫の気持ち」が表示されます。
