- ベストアンサー
CSSで、 #hoge と、 div#hoge の違いは？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#hoge {…} div#hoge {…} の違いですよね？ 前者はid="hoge"を持つ全ての要素に適用され、 後者はid="hoge"を持つ<div>要素に適用される、 と、いうことになります。 ただし、idはページ内で重複してはいけない事になっているのでid="hoge"を持つ要素も一個のはず。なので普通に考えたらどちらを使っても同じになると思います。 こういう使い方を必要とするケースがあるかどうかわかりませんが、スタイルシートを外部ファイル化し、あるページでは<div>、他のあるページでは<p>にid="hoge"と付けるようなケースでは前者と後者で違いがでます。 また、カスケード処理においてはページ内に書いた場合でも他の指定との絡みで違いが出てくる場合があるかもしれません。 （この辺は自身も知識もないので詳しくはパス。→参考URL）
その他の回答 (3)
- steel_gray
- ベストアンサー率66% (1052/1578)
> 同じページで<p id="hoge">、<div id="hoge">を両方とも使うのはNGで、 Ｙｅｓ！ > ページが違えばよいということでしょうか。 Ｙｅｓ！！
- steel_gray
- ベストアンサー率66% (1052/1578)
>div#hoge {…} と書いた場合、でid要素はいっかいだけだけども、 #hoge {…} で他のところで divのところでなければ使ってよいということになるんでしょうか？ 正確に把握できていないんですが他のところとは他のページって事ですよね？ で、あれば #hoge {…} というスタイルを書いて、ページごとに <p id="hoge">、<div id="hoge">、<body id="hoge"> など、別の要素に適用させるのはOKです。 IDの場合こうした使い方はちょっと思いつきませんが、 classの場合は要素を特定しない使い方はありそうですね。 例・・・段落全体のフォントサイズを小さくし、さらに一部を小さくする。 .Hosoku{font-size:80%;} <p class="Hosoku">IDはページ内で重複してはいけません。<em class="Hosoku">しかし、別のページ同じIDを別の要素につけるのはかまいません。</em></p>
お礼
いろいろとありがとうございます。 たびたびすみません、お礼と、最終の確認です。 ということは、同じページで<p id="hoge">、<div id="hoge">を両方とも使うのはNGで、ページが違えばよいということでしょうか。
- JeanneNet
- ベストアンサー率48% (100/208)
こんにちは、じゃんぬねっと です。 #hoge p { } と p#hoge { } の違い、という意味ですかね? 前者は、hoge という ID にマークアップされた P 要素にすべて適用されます。 後者は P 要素でかつ ID が hoge のものにだけ適用されます。 # 相変わらず、説明下手だなぁ > あたし
関連するQ&A
- CSSで、DIV#hogeという記述は何の意味を表しますか？
CSSファイルで、 DIV#hoge { xxxxxxxxxxx; } と書かれているものがありますが、この「DIV#」とは何でしょうか？ YahooでもGoogleでも「DIV#」とか「DIV#とは」とかで検索するのですが、珍しくヒットしません・・・・ 普通なら、 div idをつくりたいならば、#hogeと書きますし、div classをつくりたいならば .hogeと書くと思いますが、DIV#hogeというのは何のことでしょうか？
- ベストアンサー
- HTML
- CSSでDIV IDをつかった行間設定
css div#hoge { line-height: 200%; } hoge.html <body> <div id="hoge"> あいうえお<BR> かきくけこ<BR> </div> </body> 上記にてやってみると行間が２００％になってくれません。行間を２００％にするにはどうすればいいですか。 おしえてください ぐー！
- ベストアンサー
- HTML
- CSS・DIVについて
CSS初心者ですが、質問させていただきます。 ＜やりたいこと＞ 同一ページ内にて、下記の(1)(2)をCSSで指定したい。上から(1)(2)(1)の順で表示したい。 (1)幅700、文章中央揃え (2)幅600、文章左揃え ＜私が作成したもの＞ （関係ない部分は省略しています。） （実際は、(1)(2)の部分は半角英字の名前をつけています） <head> <style type="text/css"> body { text-align: center; } div#(1) { width: 700px; margin: 0 auto; text-align: center; } div#(2) { width: 600px; margin: 0 auto; text-align: left; } </style> </head> <body> <div id="(1)">タイトル</div> <div id="(2)">説明文</div> <div id="(1)">ホームに戻る</div> </body> ＜表示のされ方＞ (1)は正常に表示されているのですが、(2)にはCSS自体が適用されていないのです。 ちなみにIE9では私の思うように表示されるのですが、IE10になって表示されなくなりました。 なぜこのようになったか、お教えいただけますでしょうか。よろしくお願いいたします。
- 締切済み
- CSS
- スタイルシートで、id属性の中にclass指定をすることはできますか？
CSSで、id属性の中にclass指定をすることはできますか？ 現状は、divタグを使って、ヘッダー、メイン、フッターと分けているのですが、メインのところで #main.hoge{ #main .hoge{ とも動きませんでした。なんとなく間違っている指定なのかなとはおもうのですが、id属性で細かく分けた中をclassで指定したい場合、単に.hogeで十分機能するのですが、id属性の中をclassで指定したい場合、皆様はどのようにされてみえるのでしょうか。
- ベストアンサー
- HTML
- CSSのDIVというモノがいまいち分かりません。
HTMLもおぼつかないまま、四苦八苦しながらCSSの勉強をしています。その中で出てくるDIVというセレクタはどの様な特性を持つのかが、よくわかりません。HTML文書の最初にCSSを定義しなくても、途中からいきなりCSSを定義できてしまう、というものなのでしょうか？色々なサイトや本を読んでみるものの理解できません。ついでにSPANとの違いも分かりません。 それからCSSについて説明されている文章を読むとたとれば“H1”や“P”等のセレクタの次に「属性」「値」を定義するとありますが、すべてセレクタを“class”にしてしまうのは良くないのでしょうか。なにぶん初心者の為、分かりづらい文章になっているかとは思いますが、何卒ご教授ください。
- ベストアンサー
- その他（プログラミング・開発）
- CSSでDIVで挟んでいるのに背景色が出ない？
CSSと（X)HTMLでページを作っています。角丸なページにしたいため、 /* ---------- 角丸画像の上辺 ---------- */ #main_contents_header { width: 800px; height:20px; background:url(./top.png) no-repeat top; margin: 10px auto 0px; padding: 0; text-align: center; } /* ---------- 上辺と下辺の間のメイン部分 ---------- */ #main_contents { background:url(./bg.png); width: 800px; margin: 0 auto; padding: 0; text-align: center; } /* ---------- 角丸画像の下辺 ---------- */ #main_contents_bottom { width: 800px; height:20px; background:url(./bottom.png) no-repeat top; margin: 0 auto; padding: 0; text-align: center; } というCSSを作り、 HTMLは <div id="main_contents_top"></div> <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> <div id="main_contents_bottom"></div> という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。 <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> という書き方ではダメなのでしょうか・・・？ 確認はFirefoxとSafariでやっています。
- ベストアンサー
- HTML
- CSSでの幅指定・・・
CSSで、 一つのdivの中に、二つのdivがあるとき、 二つのdivの片方を310px;で指定して、 もう片方を、画面サイズにあわせて可変するようにするにはどうしたらよいですか？ 310pxで指定したところは、文章などがはみ出さないようにしたいです。(つまり、二つの文章同士がはみ出さないようにして欲しいです。) CSSのソースはこちらです。 div#content{ width: 100%; } div#1{ float: left; } div#2{ width: 310px; float: right; } HTMLは、上記の通り、一つのdivに二つのdivが入っている状態になっています。 <div id="content"> <div id="afl1"> </div> <div id="web1"> </div> </div>
- 締切済み
- HTML
- html css div
スタイルシートCSSで以下のような、表示を表現するには、どうすれば良いですか？ <table>ではなく、<div>でマークアップしたいです。 よろしくお願いします。 文字Aを<span>で背景色をclassで指定しても、周りに隙間ができてしまいます。
- ベストアンサー
- HTML
- HTMLのdivについて
HTMLで質問です。 DIVについて質問です 下の図で <body> <div="c"> <div id="a"> --------------- </div> <div id="b> ああああああああ いいいいいいい </diｖ> </div> ＜/body> という場合 <div＝”ｃ”> は全体のbody範囲でありますが divそのものを idで指定しなくても divだけでも全体を範囲しいた事にはならないのでしょうか？ ホームページ全体が範囲であり セレクタ範囲を後にCSSで装飾する場合 やはりIDで指定するのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
補足
ということは、スタイルシートは外部からリンクをはって使う場合なんですが、 div#hoge {…} と書いた場合、でid要素はいっかいだけだけども、 #hoge {…} で他のところで divのところでなければ使ってよいということになるんでしょうか？ なんか、屁理屈みたいな質問でごめんなさい（苦笑）！