CSSのID属性の指定で、#hoge と、 div#hoge のように参考書によって二通り見かけるのですが、これの違いはあるのでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (4件)

#hoge {…}


div#hoge {…}
の違いですよね?

前者はid="hoge"を持つ全ての要素に適用され、
後者はid="hoge"を持つ<div>要素に適用される、
と、いうことになります。

ただし、idはページ内で重複してはいけない事になっているのでid="hoge"を持つ要素も一個のはず。なので普通に考えたらどちらを使っても同じになると思います。

こういう使い方を必要とするケースがあるかどうかわかりませんが、スタイルシートを外部ファイル化し、あるページでは<div>、他のあるページでは<p>にid="hoge"と付けるようなケースでは前者と後者で違いがでます。

また、カスケード処理においてはページ内に書いた場合でも他の指定との絡みで違いが出てくる場合があるかもしれません。
(この辺は自身も知識もないので詳しくはパス。→参考URL)

参考URL:http://www6.plala.or.jp/go_west/nextcss/ref/basi …

この回答への補足

ということは、スタイルシートは外部からリンクをはって使う場合なんですが、
div#hoge {…} と書いた場合、でid要素はいっかいだけだけども、 #hoge {…} で他のところで divのところでなければ使ってよいということになるんでしょうか?
なんか、屁理屈みたいな質問でごめんなさい(苦笑)!

補足日時:2005/04/20 20:52
    • good
    • 0

> 同じページで<p id="hoge">、<div id="hoge">を両方とも使うのはNGで、


Yes!

> ページが違えばよいということでしょうか。
Yes!!
    • good
    • 0

>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>
    • good
    • 0
この回答へのお礼

いろいろとありがとうございます。
たびたびすみません、お礼と、最終の確認です。
ということは、同じページで<p id="hoge">、<div id="hoge">を両方とも使うのはNGで、ページが違えばよいということでしょうか。

お礼日時:2005/04/21 02:48

こんにちは、じゃんぬねっと です。



#hoge p {

}



p#hoge {

}

の違い、という意味ですかね?

前者は、hoge という ID にマークアップされた P 要素にすべて適用されます。
後者は P 要素でかつ ID が hoge のものにだけ適用されます。

# 相変わらず、説明下手だなぁ > あたし
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qcss外部ファイル(ヘッダ、フッタ)の書き方

素人です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
でhtmlを(テキストエディタを使って)書いています。
ヘッダとフッタをcssで書きたいので参考サイト等を探していますが、
htmlに埋め込む方法ばかりで、外部ファイルの書き方が見つかりません。
例えば、
----------
<style>
* {
margin: 0;
padding: 0;
}
#header {
position: ●●●●
left: 0;
top: 0;
background-color:●●●●
color: ●●●●
width: 100%;
height: 30px;
z-index: 3;
----------

のようなソースは見つけることが出来るのですが、これを外部ファイルに書き出す方法が分かりません。
ヘッダ内にて
<link rel="stylesheet" href="ファイル名.css" type="text/css" />
を宣言し、外部に読み込みファイルを作成する方法で、ヘッダとフッタは作れないのでしょうか?
探し方が悪いのかもしれませんが、どうしても見つけることが出来ません。
書き方の参考サイトや、ソースの書き方を教えて下さい。
よろしくお願い致します。

素人です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
でhtmlを(テキストエディタを使って)書いています。
ヘッダとフッタをcssで書きたいので参考サイト等を探していますが、
htmlに埋め込む方法ばかりで、外部ファイルの書き方が見つかりません。
例えば、
----------
<style>
* {
margin: 0;
padding: 0;
}
#header {
position: ●●●●
left: 0;
top: 0;
background-color:●●●●
color: ●●●●
width: 100%;
height: 30px;
z-index: 3;
----------

のよ...続きを読む

Aベストアンサー

あなたの質問を簡単に書くと
「cssファイルに変更を加えたら正しく表示されなくなった」
こういうことですよね。

この場合、cssファイルの書き方が間違っていると思われます。
括弧が閉じていない部分がないかなど調べてください。

QCSSで、DIV#hogeという記述は何の意味を表しますか?

CSSファイルで、

DIV#hoge {
xxxxxxxxxxx;
}

と書かれているものがありますが、この「DIV#」とは何でしょうか?
YahooでもGoogleでも「DIV#」とか「DIV#とは」とかで検索するのですが、珍しくヒットしません・・・・

普通なら、
div idをつくりたいならば、#hogeと書きますし、div classをつくりたいならば
.hogeと書くと思いますが、DIV#hogeというのは何のことでしょうか?

Aベストアンサー

こんにちは

まだ少し困惑されてる部分があるようなので補足入れておきます

先ほど挙げた
<div id="hoge"></div>
<p id="hoge"></p>
は『仮に』ですので実際には同じページでこのような使い方はしません(多分これは理解されてると思いますが)

そのページだけのスタイルシートであればidはひとつだけですので
#hoge { *** }
で事足ります

ですがスタイルシートを外部ファイルにして複数のページで読み込んだとしましょう
その際idの付け方を迷ってこっちのページでは<div id="hoge">としたが別のページでは<p id="hoge">とつけてしまったら同姓同名のhogeさんができます
そうした場合 #hoge { } ではdiv hogeさんもp hogeさんも同じスタイルシートが適応されますが div#hoge { } とすることでdiv hogeさんだけ・・という指定が可能になります

また同一ページで行う場合(class指定)ではclass="hoge"で複数のスタイルシートを指定してその中の一部だけ他とは別にしたいというときにも使用できます
<style type="text/css"><!--
.hoge {
color:blue;
background-color:red;
width:800px;
}
h2.hoge {
width:400px;
}
--></style>
<div class="hoge">サンプル</div>
<h2 class="hoge">サンプル</h2>
<p class="hoge">サンプル</p>

また#4で困惑されているのは div#hoge とdiv #hoge と半角スペースの有る無しでまったく別のものを指定することになるからです
div#hoge
 → <div id="hoge">のことを指定
div #hoge
 → <div>
 → <** id="hoge">のことを指定(タグは何でも良い)

こんにちは

まだ少し困惑されてる部分があるようなので補足入れておきます

先ほど挙げた
<div id="hoge"></div>
<p id="hoge"></p>
は『仮に』ですので実際には同じページでこのような使い方はしません(多分これは理解されてると思いますが)

そのページだけのスタイルシートであればidはひとつだけですので
#hoge { *** }
で事足ります

ですがスタイルシートを外部ファイルにして複数のページで読み込んだとしましょう
その際idの付け方を迷ってこっちのページでは<div id="hoge">...続きを読む

Q外部CSSを適用させるための正しいソースコードの書き方

dreamweaverCS4のバグではないかと思うのですが、外部スタイルシート(test.css)を作成し、それをHTMLファイル(test.html)へ適用させたいのですが、ファイルの階層が同じなので、以下のようにソースコードを書くのが正解だと思いますが、
<link href="test.css" rel="stylesheet" type="text/css">

以下のように、「../test.css」と「..」が付いても適用される場合があります。
<link href="../test.css" rel="stylesheet" type="text/css">

逆に「..」が付く方が正解で、付かない方が間違っているのでしょうか?

どっちが正しいのでしょうか?

そもそも「..」とは何でしょうか?
すみません、根本的なところからわかっていません。
よろしくお願いします。

Aベストアンサー

これはUNIX系でのURLの書き方をwebでも採用してるのです(webサーバはUNIX系の環境が多い)。
ですので普段からUNIX系の環境で作業してる人には説明不要で最も簡単な書き方と言う事で。

>Windowsでの書き方
 C:\hoge\hage\hoge.html

>web(HTML)での書き方
 ../hoge/hage/hoge.html
 http://www.hoge.com/hoge/hage/hoge.html

>UNIXでの書き方
 /hoge/hage/hoge.html


で、ご質問の「..」ですが。
回答No.3 の模式図を参考になればおおよそ把握出来ると思います。
それに付け加える形で…

・ ./ ………1つで「同じ」フォルダ内
・ ../ ………2つで「上の」フォルダ内
・ /  ………0個で「絶対URL」と同じ意味

~と覚えて置いて下さい。
特に3番目の「絶対URL」の書き方は何かと便利です。
通常は絶対URLでは無く「相対URL」で書きなさいと指導されてると思いますが。

・http://www.hoge.com/hoge/hage/hoge.html
~コレと
・/hoge/hage/hoge.html
~コレは全く同じ意味になります。

これはUNIX系でのURLの書き方をwebでも採用してるのです(webサーバはUNIX系の環境が多い)。
ですので普段からUNIX系の環境で作業してる人には説明不要で最も簡単な書き方と言う事で。

>Windowsでの書き方
 C:\hoge\hage\hoge.html

>web(HTML)での書き方
 ../hoge/hage/hoge.html
 http://www.hoge.com/hoge/hage/hoge.html

>UNIXでの書き方
 /hoge/hage/hoge.html


で、ご質問の「..」ですが。
回答No.3 の模式図を参考になればおおよそ把握出来ると思います。
それに付け加える形で…
...続きを読む

QCSSで、h1#logoという書き方は

CSSの勉強を始めました。
IDは、例として #wrapper とか #header など#をつけて、クラスの場合は、「.side」などのように「ドット(.)をつけることはわかりました。

疑問なのが 「h1#logo」 というようにタグに続けて#(ID名)を書く書き方です。
ID名の前にタグ(h1)名がきて、それもスペースなしで続けて書くわけですが、どういう意味でしょうか。
h1に設定した#logoという意味でしょうか。

1度しか使わないこととして、address#ID名 や table#ID名もありでしょうか。

Aベストアンサー

どうも#2です。
その後予想通りの展開になっていて安心しました(笑)
さて、

>h1は、ページで1回しか使わないので、h1に対してCSSを設定してもいいのではとも思えるのです → h1{  }
とのことですが、その通りです。
そのHTMLファイル内でh1を1回しか使わないのであれば、そもそもHTMLタグにてid属性やclass属性を設定する必要がありませんよね。h1タグに対しスタイルを設定すればいい話です。h1が複数ある場合のみ、h1#logoが意味をなすのですから。

>なぜ、わざわざ h1#logo とidを設定するのかがよく理解できません。
>優先度の点数を高めるため?などの根拠があるのでしょうか。
理由はいろいろあるでしょう。例えば後から見たときに見つけやすくするためとか。ぶっちゃけ書いた本人にしかわかりません。
つまり、「ありでしょうか」といわれれば当然ありです(文法上なにもおかしくない)が、やる必要はないということですね。

とにかく、まず最初に大事なのは正しく書くことです。この場合の「正しい」とは「ブラウザがきちんと解釈できる」という意味になります。
原理主義的にガチガチの仕様を覚えるのはそのあとで構いません。

どうも#2です。
その後予想通りの展開になっていて安心しました(笑)
さて、

>h1は、ページで1回しか使わないので、h1に対してCSSを設定してもいいのではとも思えるのです → h1{  }
とのことですが、その通りです。
そのHTMLファイル内でh1を1回しか使わないのであれば、そもそもHTMLタグにてid属性やclass属性を設定する必要がありませんよね。h1タグに対しスタイルを設定すればいい話です。h1が複数ある場合のみ、h1#logoが意味をなすのですから。

>なぜ、わざわざ h1#logo とidを設定するのかがよく理...続きを読む

QCSSの定義でdiv#・・・って、#・・・じゃだめですか?

よろしくお願いします。

CSSの定義で思ったのですが、普通divに対してid定義を行った場合には、

#nantoka{

}

と記述すると思うのですが、たまに
div#nantoka{

}

と定義されているものを見かけます。
これにはどういった意味があるのでしょうか?

また、

p#nantoka{

}

である場合もあるのですが、単純に

#nantoka{

}

ではだめなのでしょうか?

こういった定義の意味やメリットをご存知の方は教えていただけると幸いです。

よろしくお願いします!

Aベストアンサー

#の前に要素名を付ける/付けないでの違いは詳細度(*1)の算出で違いが出るものの基本的には変らないです。

要素名も併記してあった方が、ニンゲンが多少整理が付くとか、判り易く思える、とか、そういった意味はあるのかもしれませんね。

*1
http://refluxflow.net/2006/08/css_selector_specificity.html#ID160FA309
例)
p#nantoka {color:blue;}/* 1 */
#nantoka {color:red;}/* 2 */
このような2つの記述が在った場合、後に書いた方ではなく、
「詳細度」により1行目が適用される。
ややこしくなるだけなんで、どちらかに統一するべきだし、
一人で全てを書いてる時なら好くな方で統一すればいいけど
複雑な状況でページ造りをしなきゃいけない場合、要素名を付けておく方で統一した方が無難かも。

Qcss で 「Top へ戻る」 の書き方

h2 で右側に 「Top へ戻る」 を置きたいんですが、
以下のように書いてみると IE6 で背景画像が表示されないのと
かなり無駄が多いなと思いまして、なにか良い書き方ご存知でしょうか...

<style type="text/css">
.h2_container{
background: url(images/bg_h2.jpg);
}
.title{
width: 500px;
float: left;
}
.top{
width: 100px;
float: left;
}
.clear{
clear: both;
}
</style>

<div id="h2_container">
<div class="title"><h2>内容のタイトル</h2></div>
<div class="top"><a href="#">Top へ戻る</a></div>
<div class="clear"></div>
</div>

Aベストアンサー

こんなんどーでしょ。

<style type="text/css">
#h2_container{
overflow: hidden;
display: block !important;
display: inline-block;
background: url(bg.jpg);
}
h2{
float: left;
margin: 0;
width: 500px;
}
.top{
margin-left: 500px;
width: 100px;
}
</style>

<div id="h2_container">
<h2>内容のタイトル</h2>
<p class="top"><a href="#">Top へ戻る</a></p>
</div>

QCSSでDIV IDをつかった行間設定

css
div#hoge { line-height: 200%; }

hoge.html
<body>
<div id="hoge">
あいうえお<BR>
かきくけこ<BR>
</div>
</body>

上記にてやってみると行間が200%になってくれません。行間を200%にするにはどうすればいいですか。 おしえてください ぐー!

Aベストアンサー

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
#hoge{ line-height: 200%; }
{
-->
</STYLE>
</HEAD>
<BODY>
<div id="hoge">
あいうえお<BR>
かきくけこ<BR>
</div>
</BODY>
</HTML>

これでなるはずです。

Qcssの書き方について

よろしくお願いします。
HTMLに以下の記述をしました。

<img class="photo">
<a href="http://www.aaa.com" >
<img src="img/techno.gif" alt="テスト画像" width="199" height="64" />
</img>


<p>テキスト
tekisuto</p>



cssに以下の記述をしました。
img.photo {float: right
}

実行したい内容は画像を右に寄せてその画像にリンクを貼り、左側に文字を挿入して、width800pxの枠で囲み背景を黄色にしたいと考えております。
よろしくお願いします。

Aベストアンサー

えーと何から書けば良いかな…

1.
イメージタグに閉じタグはありません
</img> ←不要です


2.
aタグには閉じタグが必要です

誤)
<a href="http://www.aaa.com">
<img src="img/techno.gif" alt="テスト画像" width="199" height="64" />
</img>

正)
<a href="http://www.aaa.com">
<img src="img/techno.gif" alt="テスト画像" width="199" height="64" />
</a>

イメージタグとaタグの間違いかしら…?


3.
画像を右寄せにしたいだけならばcssの必要はありません。
imgタグに「align=right」を追加すればよいです

<img src="img/techno.gif" alt="テスト画像" width="199" height="64" align=right>

もちろんcssでも実装できます。が、その場合
誤)
<img class="photo">
<a href="http://www.aaa.com">
<img src="img/techno.gif" alt="テスト画像" width="199" height="64" />
</img>

正)
<a href="http://www.aaa.com">
<img class="photo" src="img/techno.gif" alt="テスト画像" width="199" height="64" />
</a>

イメージタグ内部に書きます。


4.
width800pxの枠で囲むにはテーブルタグを使用します。




簡単にまとめると…

■CSSを使わない場合
<table width=800 border=1 bgcolor="#FFFF00">
<tr>
<td>
<a href="http://www.aaa.com"><img align=right src="img/techno.gif width="199" height="64"></a>
<p>テキスト
tekisuto</p>
</td>
</tr>
</table>

こんな感じでしょうか。

えーと何から書けば良いかな…

1.
イメージタグに閉じタグはありません
</img> ←不要です


2.
aタグには閉じタグが必要です

誤)
<a href="http://www.aaa.com">
<img src="img/techno.gif" alt="テスト画像" width="199" height="64" />
</img>

正)
<a href="http://www.aaa.com">
<img src="img/techno.gif" alt="テスト画像" width="199" height="64" />
</a>

イメージタグとaタグの間違いかしら…?


3.
画像を右寄せにしたいだけならばcssの必要はありません。
imgタグに「al...続きを読む

Qスタイルシート id属性に#がいる理由

id属性にスタイルを適用する場合
以下のように書くと思います。

p#idname{
color:#000000;
}

class属性のときと違って、#をつけるのは、
id属性が唯一のものだから
という意味ですか?

Aベストアンサー

>class属性のときと違って
とありますが、classの場合は、.(ピリオド)を用いますよね。

「classなら.」、「idなら#」と決められているだけの話のように思うのですが・・・

私が文意を読み取れていないだけなら、すみません。


人気Q&Aランキング