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">...続きを読む

QCSSのみでPNG画像を透過グラデーションさせたい

画像編集ツールを用いて作ったアルファチャンネルPNGと同様な「透過具合のグラデーション」を、PNGなど写真の画像ファイル全般に対して、CSSのみで再現することは可能でしょうか?

CSS自体で作った背景を透過グラデーションさせる方法は見つけられましたが、画像ファイルに同様の効果を付与する方法を見つけられないでいます。

ご助言を頂けると幸いです。

Aベストアンサー

もしかして、RGBのソースに別のAのみを合成して
ブラウザ内で、RGBAのソースを作り出す?ことは可能か?
という意味でしょうか?

知っている限りCSSのみでは難しいと思います。
HTML5では、可能でしたが。
CANVASを使ったつくり方では、可能なので、
一度チャレンジしてもいいかもしれませんが。

一応質問がCSSのみで出来るか?
なので、現状、出来ないと思います。
で、とめておきます。

Qログイン画面についての質問です。 いまHPを簡単ではありますが作成しました。 そのHPにアクセスする

ログイン画面についての質問です。

いまHPを簡単ではありますが作成しました。
そのHPにアクセスする前に
ログイン画面を追加しようとしています。
HTMLとCSSを使い添付資料のように作成することができました。
ログインボタンを押すと作成したHPにとぶことはできます。
しかし、このままではアドレスもパスワードも必要がない状態です。
どのように設定?コード?を追加していけばログイン画面として役割を果たすようになるのでしょうか?
どなたか教えてください。

Aベストアンサー

No.1です。

本屋さんのコンピュータやインターネット関連のコーナーにWebプログラミング(CGIプログラミング)の入門書などがあるかと思います。そういった中からご自身が理解しやすいと感じる物を選ばれるとよいでしょう。
ネット上にも多くの解説サイトがあります。Googleなどで「CGI 入門」といった適当なキーワードで検索すると見つかるはずです。

プログラミングに使用する言語はPHPやPerlがとっつきやすいとは思いますが、サーバ上での処理と端末側のブラウザが行うHTMLの描画処理やJavascriptによる動作を区別してしっかり理解する、、、ブラウザ側からこういう要求を行うとそれを受けたサーバ側でプログラムがこう動き、最終的にブラウザ側に表示したいこういうHTMLを送出する、、、といった流れを時系列的に理解してWebサイトを作り上げることを理解するにはC言語やJavaといったコンパイルを行う言語を使うのが好ましいと思います。
そういう基本的な仕組みをしっかり理解した上で簡便に利用できる言語を使うと言語の便利さがより際立つかなぁと。。。

参考まで。

No.1です。

本屋さんのコンピュータやインターネット関連のコーナーにWebプログラミング(CGIプログラミング)の入門書などがあるかと思います。そういった中からご自身が理解しやすいと感じる物を選ばれるとよいでしょう。
ネット上にも多くの解説サイトがあります。Googleなどで「CGI 入門」といった適当なキーワードで検索すると見つかるはずです。

プログラミングに使用する言語はPHPやPerlがとっつきやすいとは思いますが、サーバ上での処理と端末側のブラウザが行うHTMLの描画処理やJavascriptによる動作...続きを読む

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行目が適用される。
ややこしくなるだけなんで、どちらかに統一するべきだし、
一人で全てを書いてる時なら好くな方で統一すればいいけど
複雑な状況でページ造りをしなきゃいけない場合、要素名を付けておく方で統一した方が無難かも。

QFx3でユーザーCSSを使いスクロールバーの見た目を変えたい

Firefox2まではuserChrome.cssとuserContent.cssを書き換えて
スクロールバーを見た目を変えていましたが、
Firefox3からはuserContent.cssの方が機能しなくなってしまいました。
何か別の方法で変更可能であれば教えてください。
スクロールバーの変更だけなのでテーマ導入はしません。

Aベストアンサー

>… .jarファイルの書き換えも挑戦したことがあるのですが、書き換えた後の再圧縮がうまくいかず、頓挫(?)している状態です。

7zip などのアーカイバ・ユティリテイを使うと、比較的手軽に書きかえできます。
お試しを。

 http://www.7-zip.org/
>Download 7-Zip 4.64 (2009-01-03) for Windows:

(日本語表示に切り替え可能)
 

Qtabによるスペースの障害と、cssのDIV id=○○ seo対策におけるタグ について

現在、ブログで公開していた記事をやめて、HPで作り直そうと思い、メモ帳とExcelを使って、サイトを作ってみようとしているところです。
初心者です。

Excelを立ち上げて、htmlをセルに記述します。次のセルには、タイトルを。その次のセルには本文を。などというように、1行をコピーして、メモ帳に貼り付け、拡張子をhtmlで保存し、IEでプレビューすると、ちゃんと表示されるのですが、
そのソースを右クリックで表示すると、セルをまたいだ箇所に、tabの空白が入っていて、非常に見にくくなっています。
IE以外のブラウザで確認したことがないのでわかりませんが、
HTMLのソースに、必要以上にtabによる空白が入っていても、問題はないのでしょうか?


もうひとつ、質問があります。
cssの、ボックス指定についてなのですが、
外部スタイルシートの記述は以下のようになっています。

#left1 {
position:absolute;
top:0px; left:0px; margin:0;
padding: 4px; border: 1px #666 solid;
width:120px; height:120px;
background:#FFFFCC;
}
#menu1 {
position:absolute;
top:0px; left:134px; margin:0;
padding: 0px;
width:522px; height:130px;
}

このように指定したボックスが11個あります。
htmlの記述は、<div id="left1">~</div>
などのようにしています。
span class id などの違いがよくわかりません。

1枚のHTMLファイルの中に、こんなにたくさん<div id="~">
を使ってはいけないなどの決まりはあるのでしょうか?


最後の質問です。
見出しタグについてなのですが、
<h1><h2><h3><p>
と、文章をつなげた後、
<h2><h3><p>
のように、一度<h3>を出現させた後に、また<h2>を使用してもいいのでしょうか?


理解不足で申し訳ありません。
どなたか、それかひとつでもいいので、教えていただけますでしょうか。
よろしくお願いいたします。

現在、ブログで公開していた記事をやめて、HPで作り直そうと思い、メモ帳とExcelを使って、サイトを作ってみようとしているところです。
初心者です。

Excelを立ち上げて、htmlをセルに記述します。次のセルには、タイトルを。その次のセルには本文を。などというように、1行をコピーして、メモ帳に貼り付け、拡張子をhtmlで保存し、IEでプレビューすると、ちゃんと表示されるのですが、
そのソースを右クリックで表示すると、セルをまたいだ箇所に、tabの空白が入っていて、非常に見にくくなっています。
I...続きを読む

Aベストアンサー

▼ idとclass
そのページで1カ所だけに適用させたいスタイルは「id」を使い、ページ内で2カ所以上に適用させたいスタイルは「class」を使う決まりになっています。
同じページ内で使い回し出来るのが「class」、使い回し出来ないのが「id」ということです。

▼ spanとdiv
 「span」はインライン要素、対して「div」はブロックレベル要素。
ブロックレベル要素とは、「(通常)改行を伴う表示上のまとまり」として扱われるもので、内容として別のブロックレベル要素やインライン要素を含むことができます。(見出し(h1~h6)、段落(p)、リスト(ul,ol,dl)、ブロック引用(blockquote)、アドレス(address)、hr、整形済み要素(pre)、テーブル要素、div要素など。)
但し、p要素のように内容にインライン要素しか持てないものやpre要素のようにさらに内容が限定されるもの、hr要素のように内容を持たないものもあります。
 インライン要素とは、主としてブロックレベル要素の内容として、特定の部分になんらかの役割や機能を持たせる要素 で、その内容に文字データあるいは他のインライン要素を持つことができますが、ブロックレベル要素を含むことはできません。(リンク(a)、強調(strong,em)、img、br、span要素など。)


> そこからさらに
  h2→p→h3→p
  と、繰り返してもよいのでしょうか?

問題ありません。正しい文書構造になっています。


> <h1><h2><p><h3><p><h2><p><h3><p>
  のようになり、<h3>が出現した後に、また<h2>が出現するようになります。
  まるで順番を無視したような形になってしまうので不安です。

これも問題ありません。
hタグの用法として注意しなければいけないのは、
<h1>~<h2>~<h4>
のような構造は正しくないという点です。
<h2>からいきなり<h3>をとばして<h4>になっているのは文書構造として間違っています。<h1>がなく<h2>から始まっているページなどもダメです。
階層が下がる時は、順番通りにしなければいけないということです。
逆に、階層が上がる時の順番は関係ありませんので、下のような構造は問題ありません。
<h1>
 <h2>
  <h3>
   <h4>
 <h2>
  <h3>
 <h2>
  <h3>

▼ idとclass
そのページで1カ所だけに適用させたいスタイルは「id」を使い、ページ内で2カ所以上に適用させたいスタイルは「class」を使う決まりになっています。
同じページ内で使い回し出来るのが「class」、使い回し出来ないのが「id」ということです。

▼ spanとdiv
 「span」はインライン要素、対して「div」はブロックレベル要素。
ブロックレベル要素とは、「(通常)改行を伴う表示上のまとまり」として扱われるもので、内容として別のブロックレベル要素やインライン要素を含むことができます。...続きを読む

QCSSを外部に設置したいのですが大問題が

サイト製作中に詰まってしまいました…。
CSSを外部に設置したいなと思い、やってみたのですが、
私のホームページスペースはリフェラ(?)を遮断しているようで、
Norton等を導入している方には、外部CSSを読み込んでくれず、
CSS抜きのページが表示されてしまいます。

外部CSSはNorotonをOFFにしないと読み込まないので困っています。

何かいい方法はないでしょうか。
よろしくお願いします。

Aベストアンサー

結論から言ってしまえばいい方法はありません。
・サーバはリファラが得られないとファイルを渡さないという。
・利用者(Norton)はリファラを渡さないようにす。
両者のすれ違いはどうにもなりません。

そのような制約がないサーバを引っ越すか、
利用者にNortonのオプションを変更してもらう(*)ようメッセージを書いておくしかないと思います。
例)
<img src="適当な画像" alt="ここに画像が表示されない場合は・・・">
↑画像が表示されなかった場合altの内容が表示されます。

*バージョンなんかにもよるでしょうが、Norton全体をオフにしなくても、
オプションでリファラブロックだけを解除するオプションがあると思います。(少なくとも私が使っていた頃のNortonにはありました。)

余談。リファラが別のサーバなら弾くっていうのなら判るけど、
リファラが取れないだけで弾くってのは厳し過ぎ。私ならそんなサーバ利用しません。

Qcssで文字サイズ指定、ptでもpxでも指定できますが、違いは?

CSS初心者です。初歩的ですが、教えてください。
文字サイズの指定の単位はいろいろあるみたいですが、
皆様はどの単位を使っていますか?
例えば、ptとpxどちらも結構細かくサイズを指定できますが、
どちらかを選ぶ理由がいまのところありません。
どちらを何故使うのか、違いはあるのか・・・?
よろしくお願いします。

Aベストアンサー

>pxもパソコンの解像度に比例して表示される大きさが変わりますよね?
それは勿論ですが、基準にしやすいかしにくいか、という違いが出ます。

きっちりしたレイアウトを制作する際は横幅をピクセルで指定する事になると思います。
例えば600ピクセルで制作するとしましょう。
そこに1文字を目一杯表示したいとします(そんな事はしない。というツッコミは無しで…)。
その場合はフォントのサイズを600pxにすればいいことは考えるまでもありません。

しかしポイントの場合は?
「1ピクセル=○センチ」という変換は出来ません。よってポイントでも同じ事が言えます。
例え600ピクセルの横幅ぴったりのポイント数値を見つけたとしても、他の画面では?という事になります。

ポイント、センチ単位は印刷物の制作等の場合は使います。イラストレーターでチラシを制作する際等です。
しかしホームページは印刷する事を重視して制作するものではありません。
その為ピクセル単位を推薦します。

読みにくい文章かと思いますがこんな感じでいかがでしょう?


人気Q&Aランキング

おすすめ情報