- ベストアンサー
CSSでID指定の親子を重ねる理由
naokitaの回答
- naokita
- ベストアンサー率57% (1008/1745)
CSSファイルの中で、見やすくする為、何処の子か把握できる。 HTMLファイルでのtabインデントみたいなもの。
関連するQ&A
- idとclassの指定方法
id(class)の指定は、セレクタといっしょに指定（１）、セレクタを除いて指定(２) どちらが正しいというのはあるのでしょうか？ 【例】 <html> <head> <title>タイトル</title> </head> <body> <div id="sample"> <p>サンプル</p> </div> </body> </html> (1) div#sample p { color:#f00; } (2) #sample p { color:#f00; } どちらでも良いような気がしますが、実際の所どうなんでしょうか。
- ベストアンサー
- CSS
- CSS classの場合とidの場合の指定方法
h1などをブロック要素ごとに、違うスタイルを適用させたく、下記のように、記述したのですが、ブロック要素をidで指定する場合は同じように、#mainと#main h1で指定し、<div id="main">とすればよいのでしょうか？ それとも、h1は.main h1 とクラス指定して、<div id="main" class="main">とした方がよいのでしょうか？変な質問かもしれませんが、どちらも同じように表示するので、どちらがよいのか分かりません． <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css" media="screen"><!-- .main { width:100px;} .main h1 { color:red;} --></style> </head> <body> <div class="main"> <h1>aaa</h1> </div> </body> </html>
- ベストアンサー
- HTML
- 複数のidを指定する
こんにちわ。いつもお世話になります 少し、HTMLのことも含まれるのですが、 １つのHTMLドキュメントの中で、複数回、同じidを使用するのは文法違反ですか？ たとえば <span id="x"></span> <div id="x"></div> のような感じです やりたいことは、複数のspan(場合によってspanの数が変わる)のstyle.colorに 同じ値を指定したいです。 for()を使ってid名を変えて、繰り返すとかしないとダメですか？
- ベストアンサー
- JavaScript
- CSSについて
CSSについて質問させてください。 CSSをタグの中に直接書き込む場合 <div style="color:#ffa500; font-size:20pt; font-weight:bold; text-decoration:underline;"> このような場合のstyle="部分は、styleタグと呼んで いいのでしょうか？ divタグの中に記述しているので、styleプロパティと 呼ぶのでしょうか？ CSSのリファレンスにはstyleプロパティはありません。 ということは、やっぱりdivタグのstyleプロパティで CSSを指定していると考えるのでしょうか？
- 締切済み
- HTML
- floatをfooterに指定すると正しく表示ができない。
floatをfooterに指定すると正しく表示ができない。 画像の(3)のようにfooterにfloat:leftを指定しなければ綺麗に表示されるのは分かります。ところが、画像の(1)や(2)のように、footerにfloat:left;を指定して、次の行で<div style="clear:left"></div>と指定して、footerにfloat:leftを指定しなかったのと同様の処理をすると、(1)や(2)のようにwidthに対して様々な現象が起きてしまいます。 (1)はwidthを指定しない場合、width:auto;を指定した場合に見られ、(2)はwidth:100%;とした場合にwrapperよりはみ出すという現象が起きます。なぜ、floatを指定しないのと指定後解除するのとで同様の結果が得られずに違った結果になるのでしょうか？わかる方いらっしゃいましたら回答宜しくお願い致します。 以下はソースでそのままエディタに貼り付けると表示できます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> <style type="text/css"> <!-- /* default.css */ #container { background:red; border:10px solid fuchsia; padding:10px; } #left { float: left; width: 200px; height:100px; background:yellow; } #right { float: left; border:5px #000 solid; width: 200px; height:200px; background:black; color:#FFF; } #footer { float: left; height:200px; background:blue; border:5px #000 solid; color:#FFF; } --> </style> </head> <body> <div id="wrapper">WRAPPER <div id="header">HEADER</div> <div id="container">CONTAINER <div id="left">LEFT </div> <div id="right">RIGHT </div> <br style="clear:left"/> </div> <div id="footer">FOOTER </div> <div style="clear:left"></div> </div> </body> </html>
- ベストアンサー
- HTML
- CSSのクラス名・ID名の指定でワイルドカードか正規表現を使いたい
CSSでクラス名やID名を指定する場合に、 ワイルドカードか正規表現を使いたいと思ったのですが、うまくできません。 使えないのでしょうか？ また、他に、似たクラス名・ID名を一括で指定する方法はありますか？ 例） <div id="cat1">猫が１匹</div> <div id="cat2">猫が２匹</div> <div id="cat3">猫が３匹</div> #cat1, #cat2, #cat3{color:#FF00FF;} を #cat*{color:#FF00FF;} のようにまとめて指定したい。
- ベストアンサー
- HTML
- ＣＳＳについて教えてください。ｉｄ，ｃｌａｓｓ
<body> <div class="style1" id="header"> <div id="logo"><img src="images/banner.gif" alt="見本1"/></div> <ul id="globalNav"> <li><a href="index.html">見本2</a></li> </ul> </div> <div id="contentWrapper"> <div id="content"> <div id="primary"> ※参考書に上記の様な書き出し記述があるのですが、1.まず素人考えでコンテナの様な土台となるボックスはないと考えていいですか？ 2.ｉｄがｄｉｖに包含されいくつも出てきますが，ｉｄは一つしか使用できないため慎重にって事は無いのですか？ 固有を確定するために便利なのですか？ 3.div classのあとｉｄが使われている様に思うのですが、ｃｌａｓｓにもｉｄは使えますか？？ 的外れですみません
- ベストアンサー
- レンタルサーバ・ASP
- cssでの要素間の余白について。
ホームページを作成しており、画像の下にdivをくっつけて、配置したいのですが、どうやっても、余白が出来てしまいます。styleでdiv要素にmargin-bottom:0、h2にmargin-top:0と記述しても、余白が出来てしまい、困っています。 さらにdiv containerの大きさについても、styleでwidth,heightで、大きさを指定しているのですが、横に画面一杯に広がってしまい、大きさ指定が反映されません。 初歩的な質問かもしれませんが、どこに問題がありますでしょうか？ ご教授お願いいたします。 "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"/> <title>xxxxxxxxxxxxxx</title> <style type="text/css"> body {background-color:#f5f5f5} div#container {width="800" height="40";background-color:#fff4d8} h1 {color:#330000;font-family:Geogia,Times New Roman,sans-selif} h2 {color:#330000;font-family:Geogia,Times New Roman,sans-selif;margin-top:0} </style> </head> <body> <div id="content"> <h1><img src="xxxxxx.jpg" alt="xxxxxxxxx" </h1> </div> <div id="container"> <h2> xxxxxxxx </h2> </div> </body> </html>
- ベストアンサー
- CSS
- cssで<div>にpaddingを指定したとき
下のように、ｃｓｓで<div>にwidth720px、padding10px,background-color: #00FFFF;と指定して、 IE6とoperaで表示してみたところ、widthが740px、padding10pxになってしまいます。 divの下に７４０pxのテーブルをおいて確認してみました。 これは、こういうものと、思うしかないのでしょうか？ また、こうなるのは、私だけなのでしょうか？ <style type="text/css"> <!-- #contents { width: 720px; padding: 10px; background-color: #00FFFF; } --> </style> </head> <body> <div id="contents"> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> <table width="740" border="0"> <tr> <td bgcolor="#0000FF">あ</td> </tr> </table> </body>
- ベストアンサー
- HTML
- CSSで指定したwidthをマウスで変更したい
frameはnoresizeを指定しなければ、マウスドラックでサイズの変更ができますが、同じような事をframeを使わずにCSSとjavascriptで出来ないものでしょうか？ 具体的に言うと、以下に示すhtmlの20%,80%のwidthをマウスドラックで変更できないでしょうか？ <html> <head> <style type="text/css"> #f1 { float:left; width:20%; overflow: auto; background-color : #ffd2ff; } #f2 { float:right; width:80%; background-color : #e0fef8; } </style> </head> <body> <div id="f1">f1</div> <div id="f2">f2</div> </body> </html>
- ベストアンサー
- JavaScript
補足
ありがとうございます。 それの影響で遅くなったりはないのでしょうか？