CSSで使えるタグはどのようなものがあるのか

2013/01/01 22:30

このQ&Aのポイント

CSSで使えるタグには、p、div、h1などがありますが、特定のタグに対して特定のスタイルを適用するためにclassを使うこともできます。
例えば、fontcolorを縮めてfc.redというclassを作成し、colorプロパティを指定すると、色を赤にすることができます。
また、classを複数にすることも可能であり、複数のスタイルを組み合わせたクラス名を指定することで、異なるスタイルを適用することができます。

noname#185370

その他(ソフトウェア)
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

xxQ_Qxx
ベストアンサー率76% (147/191)

2013/01/02 06:26 回答No.2

HTMLのマークアップは出来ていますか？ >cssで使えるタグにはどのようなものがあるのでしょうか >h1(文字サイズと兼用でしょうか?) >百歩譲って限られたタグしかないとしても色々違います。 HTMLやCSSの解説書やサイトなどを覗いてみるといいです。文法チェックもしてみてください。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html >cssとhtmlでは思想的にというか包括的に違うものなのでしょうか? HTMLで内容を記述し、CSSで見易く整えます。一緒に考えると混乱するので先ずHTMLを適切に作成し、その後にCSSでスタイルを指定するようにしてください。 >p.fc.red { color: red;}などのようにclassを複数にするようなことは可能ではないのでしょうか? 同じスタイルにするなら、同じclassを指定すればいいだけです。（一つのスタイルに異なる複数のクラス名をつけるのは無駄）一つのセレクタに複数のクラスを指定することは出来ます。【CSS】 .minibox { width: 200px; height: 200px; padding: 1em; margin: 0 2px 2px 0; float: left; } .type1 { background-color: #000; color: #fff; border: thick #000 solid; } .type2 { background-color: #ffc0cb; color: #000; border: thick #555 solid; } .type3 { background-color: #fff; color: #f00; border: thick #f00 solid; } .clear { clear: both; } 【HTML】 <div class="minibox type1"> <p>黒字に白い文字</p> </div> <div class="minibox type2"> <p>ピンクの背景、グレーの枠線、黒い文字</p> </div> <div class="minibox type3"> <p>白地で赤い枠、赤い文字</p> </div> <p class="clear type1">上に３つのボックスが並んでいます</p> 異なるセレクタに同じスタイルを当てる時はカンマで区切ります。【CSS】 em,strong { color: #f00; } 【HTML】 <p>運動会は<em>雨天</em>の場合は<strong>中止</strong>です</p>

質問者

お礼 2013/01/10 15:06

勉強になります。ありがとうございます。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/01/03 19:11 回答No.3

CSS(大文字で書きます。Cascading Style Sheet) CSSは、HTMLの文書構造に基づいて、どの要素にスタイルを指定するかを記述していきます。　そのための前提として、HTMLには文書構造だけが記述されていることがあります。ここで、どの要素であるかをCSSではセレクタ(選択手段)を用いて指定します。　p{color:red;} と書かれている場合、HTMLのp要素についての指定です。このようなHTMLの要素について指定する場合をタイプによるセレクタ---タイプセレクタ--といいます。　現行のCSS2(2.1)では、基点となるセレクタを記述後、それに様々なセレクタを組み合わせてHTML構文上のどの要素に対する指定であるかを指定していきます。 [全称セレクタ]　* 　すべての要素(タグ)に対して詳細度は[0 0 0 0] [タイプセレクタ] body p div h1 strong・・・ [擬似要素セレクタ] 　HTMLの要素(タグ)に該当します。　詳細度は[0 0 0 1] [属性セレクタ] [href] [属性セレクタ] [href="./"] [属性セレクタ] [class~="important"] [属性セレクタ] [lang|="en"] 　HTMLの要素、およびその要素の値によって指定します。 [classセレクタ] [.strong]は、属性セレクタの[class~="strong"]の省略形 [擬似クラスセレクタ]--リンクの擬似クラス/動的な擬似クラス　これらは詳細度が[0 0 1 0]です。 [一意セレクタ] #navi 　HTML上のid属性に一致します。詳細度は[0 1 0 0]です。 [style属性による指定] 　HTML上で、<p style="color:blue">などと書かれている場合、他の指定は無視され詳細度が[1 0 0 0]になります。　これらが基本になります。その上で・子孫セレクタ　半角スペース・子供セレクタ　> ・隣接セレクタ　+ をつかって指定していきます。 body>div p+p{color:red;} だと、bodyの直接の子であるdiv要素内のp要素の二つ目以降の色が赤と言う指定になります。詳細度は合計すると [0 0 0 4]です。　これは、出所(誰が指定したか)に続いて処理されますが、最初はチンプンカンプンでしょうが慣れれば、とても簡単で分かりやすい仕組みになっています。　しかし、その前に大前提としてHTMLがきちんとできていないと、スタイルシートは書けません。　スタイルシートに手をつける前に、HTMLをしっかり身につけましょう。たとえば、.redというような書き方はしてはなりません。将来背景色をピンクにしようとしたとき見づらいので青にしようとしたとき困るでしょう。　これこそHTMLで<font>要素が否定された原因でしたよね。もしその部分が重要なのでしたら、<strong>ここはとても重要です</strong>とマークアップして、スタイルシートでstrong{color:red;font-weight:bold;}と指定すべきです。 ※また、.redのような省略形は書かないほうが良いです。CSS1の時代の名残です。 div.red{}というふうに基点となるセレクタを書く癖をつけるほうが良いでしょう。＞<p class="red"> タイトル </p> これを→ <fc class="red"> タイトル </fc> 　その文書のタイトルでしたら <h1>文書タイトル</h1> とマークアップすべきです。 [具体的なHTMLの書き方] <body> 　・・・【中略】・・・　<div clas="section"> 　　<h2>本文見出し</h2> 　　<p>ここからひとつの段落・・・<strong>HTMLは文書構造をマークアップする</strong>・・・</p> とかになり、スタイルシートは div.section p strong{color:red;font-weight:bold;background-color:yellow;} とかです。　これでHTMLは機械が見てもどこに何が書かれているか、どこが重要かわかりますし、スタイルシートも、本文中の段落内の重要語句は「赤の太字で背景黄色」と誰が読んでもわかる。　⇒5. セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) 　⇒6. 値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )

質問者