初心者です。

xhtml+cssでdiv idというタグを何箇所にも利用してますが、div classはどういうときに使うんですかね?

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

A 回答 (3件)

スタイルシートの基礎ね。



・idでの指定は、同じHTML内に1つしか設定できない。
・classの場合は複数設定できる。

例えば、大きな領域を作成する場合は、同じ領域は1つでいいのでidを使うわね。
ブログなんかを例にすると
メニュー部とかヘッダ部とかメイン部とかボディ部とか。
そんな感じ。

でも、例えばカレンダーを作る場合、
同じスタイルを複数の場所に定義したくなるわ。
土曜日の列にあるセルは全て同じスタイルにする、とかね。
その場合、classを使うわけ。
ブログなんかを例にすると、
1つのHTMLに複数出てくる記事領域とかコメント領域なんかは、idにしてしまうと
同じidが1つのHTML内に複数出てきてしまうので
classにしてあげるわけ。

idなんか使わずにclassを使えばいいじゃない
という意見もあるわ。
でも、idにすることで、利用者に対し
その領域は1つのHTML内に1つだけしか使えません
という制約を与えることもできるのよ。

こんなとこかな。
    • good
    • 0
この回答へのお礼

かなりよく理解できました^^

わかりやすい説明で感謝してます。

お礼日時:2009/05/21 04:41

idに入れた値はhtml文書の中で1か所でしか使ってはいけません。


例えば、id="aaa"という記述は同じページ内では2度出てきてはいけません。
id="aaa"、id="bbb"のように、違う値なら大丈夫です。

classの値は何度でも使用できますので
class="aaa"という記述が同じページ内に何度書かれてもOKです。
なので、同じcssの指定を使いまわす時はclassを使いましょう。

同じidの値が何度も出てきても(文法違反をしても)正直あまり支障はありませんが、
アンカーリンクを使うときや、javascriptやプログラムと連動させる時に誤作動が起こる場合があります。

まったくの初心者で、言っている意味がよくわからないのなら、
cssをあてがうのにはidは使わずに、全てclassでおこなえば文法上問題ないです。
    • good
    • 0
この回答へのお礼

なるほど。。
ありがとうございます!

お礼日時:2009/05/21 04:42

id属性はレイアウトの大枠をマークアップするのに使います。

id属性で指定したら1つのxhtmlで2回以上は使えません。

class属性は同一ページ内で繰り返し使われるブロックに定義します。1つのxhtmlに何回使ってもかまいません。

http://allabout.co.jp/internet/hpcreate/closeup/ …
を見ればわかると思います。ただ大事なことが上記では抜け落ちています。CSSプロパティの詳細度が違うのでidとclassは使い分けなければいけません。
    • good
    • 0
この回答へのお礼

ありがとうございます!

お礼日時:2009/05/21 04:42

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

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

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

QVLANタグについて

下記場合のときのVLANタグについて教えてください。
シスコのcatalyst3550利用しています。
VLANポート1から入ってきたパケットが、ルーティングされ、VLAN10のポートからパケットが出力されて別スイッチに行くとき、パケットにVLANタグ10は付与されるのでしょうか。それとも、タグは付与されずに送信されるのでしょうか。
なお、VLAN10を割り当てているポートははトランクポートでなく、アクセスポートとなります。

Aベストアンサー

http://xfreak.com/ccna/point/ccna/index.cgi?mode=view&no=58
VLAN tagが付与されずに送信されるのがaccessポート
そもそもaccessポートとtrunkポートの違いを理解してないと思われます

#他のベンダのL2SW/L3SWみたいにtagged/untaggedポートって表現すればわかりやすいのに、Ciscoは.....

QXHTML+CSSサイトで<div>の順序変更によるレイアウト崩壊

よろしくお願いいたします。

コンテンツ部分をmain、右側に帯をつくりsubとして2カラム(他ヘッダとフッタもあります)のサイトです。
XHTMLでdiv id="sub"部分を先に記述してしまったので、div id="main"部分と上下を入れ替えたところ、表示が大きく崩れてしまいました。CSSのfloatで左右指定の確認もしましたが、解決しません。
CSSについては初心者ですので、なにか重大なことを見落としているのかもしれません。教えていただけると助かります。どうぞよろしくお願いいたします..

Aベストアンサー

.sub {width:200px;float:right;}
.main {margin-right:200px;}
<div class="top">**</div>
<div class="contents">
<div class="sub">**</div>
<div class="main">**</div>
</div>
<div class="footer">**</div>
これをこのようにするとfootが回り込んでレイアウトが崩れます。
<div class="top">**</div>
<div class="contents">
<div class="main">**</div>
<div class="sub">**</div>
</div>
<div class="foot">**</div>
これでどうしてもやりたいならmainにもwidthを入れて
.top {width:700px;}
.contents {width:700px;}
.sub {margin-left:500px;width:200px;}
.main {width500px;float:left;}
.foot {width:700px;clear:both;}
-------------------------------------------
<div class="top">**</div>
<div class="contents">
<div class="main">**</div>
<div class="sub">**</div>
</div>
<div class="foot">**</div>
このようにするとできると思います。
------------------------------------
もしIEでレイアウトが崩れるようならsubかmainのwidthを少しづつ小さくすると直ります。
色分けするならcontentsとsubやcontentsとmainの組み合わせでやればごまかすことができます。

参考URL:http://www3.tokai.or.jp/janboon/csstest.htm

.sub {width:200px;float:right;}
.main {margin-right:200px;}
<div class="top">**</div>
<div class="contents">
<div class="sub">**</div>
<div class="main">**</div>
</div>
<div class="footer">**</div>
これをこのようにするとfootが回り込んでレイアウトが崩れます。
<div class="top">**</div>
<div class="contents">
<div class="main">**</div>
<div class="sub">**</div>
</div>
<div class="foot">**</div>
これでどうしてもやりたいならmainにもwidthを入れて
.top {width:700p...続きを読む

QVLANの種類とタグVLANのスッチングハブについて

VLANに関して調べていましたが、いくつかの種類があることがわかりました。私の用途は下宿で各部屋にネットを提供する場合に各部屋のPC間の通信を遮断したいと思っています。

お聞きしたいのは以下の点です。

・このような場合に使えるのは、ポートVLAN、タグvlan、マックアドレスVLANだろうと思われますが、3つのうちどれがよいのでしょうか??

・マックアドレスVLANに関して、MACアドレスでVLANを構成するもののようですが、これの場合、有線でなくても無線でも使えそうな気がしたのですが、間違いですか??? (ひとつのAPではVLANは難しいとの回答がURLの質問でありましたが。)

http://oshiete1.goo.ne.jp/qa5050689.html

・タグVLANの場合、現在のものはほとんど対応しているようですが、正確にはNICもタグVLANに対応しているものが必要らしいですが、これはスイッチングハブにも適用されるのでしょうか? (VLAN対応ルーターを使おうと思っていますが、ポートが足りないとか部屋にSW-HUBをつけたりといった場合に普通に市販されているハブでよいのかどうか。スッチングとダムの違いのように正確には対応してないといけないが、機能としてうたっていなくても、現在の主流製品では大丈夫という場合は、そのように書いてください。) 

大変、注文の多い質問で申し訳ありませんが、よろしくお願いします。 

VLANに関して調べていましたが、いくつかの種類があることがわかりました。私の用途は下宿で各部屋にネットを提供する場合に各部屋のPC間の通信を遮断したいと思っています。

お聞きしたいのは以下の点です。

・このような場合に使えるのは、ポートVLAN、タグvlan、マックアドレスVLANだろうと思われますが、3つのうちどれがよいのでしょうか??

・マックアドレスVLANに関して、MACアドレスでVLANを構成するもののようですが、これの場合、有線でなくても無線でも使えそうな気がしたのですが、間違いで...続きを読む

Aベストアンサー

>・このような場合に使えるのは~
ご相談されているような状況ですと少なくとも各室へ出ているポートはポートVLANにした方が良さそうです(配線や機器の配置によっては併用)。各室までタグを送るメリットもあまりありませんし、専門家以外には運用の敷居がちょっと高いです。

>・マックアドレスVLANに関して~
これはVLANの方式そのものではなく、予めどのポートをどのVLANに繋ぐかを設定しておくのではなく、MACアドレスを利用してどの端末がどのVLANに繋がるかを決めておいて、スイッチのどのポートに繋がっても同じVLANに繋がるようにするという技術です。
ご相談のケースなら1号室の入居者が自分のノートPCを持っていって3号室から繋いでも1号室に割り当てられているVLANに繋がるようになります。これはこれで便利なのですが、管理が面倒ですしご相談のケースには適していません。

>・タグVLANの場合、現在のものはほとんど対応しているようですが、
おっしゃるとおり、各室までをタグVLANにするとNICでも対応が必要ですし、当然正しく設定する必要もあります。
スイッチングハブに関してはイーサネットフレームを終端しませんので
特にタグVLAN対応をうたっていなくても大丈夫です。タグVLANを利用する場合、通常のイーサネットフレームより4Byteフレーム長が長くなるので最大フレーム長が1522Byte以上の物を選んでください。「10年前に発売された物」なんていう骨董品でもない限り問題は無いはずですが。

最後になりますがご質問の内容を拝見する限り、どの道LANの配線工事で専門の業者さんを利用されることになるでしょうから、地場のSIerさんや工事業者さんに、ご相談された方が良いのではないでしょうか?
それこそ商売ですからご希望を詳しく聞き取って最適な物を考えてくれるはずです。
またプロバイダ(eo)との契約はalone0729さんがおこなってLANでネットワークを提供する形態を考えられているようですが、配線だけを予めおこなっておいてプロバイダとの契約は各自行ってもらうという形態であればeoの営業窓口が相談にのってくれるはずです。

>・このような場合に使えるのは~
ご相談されているような状況ですと少なくとも各室へ出ているポートはポートVLANにした方が良さそうです(配線や機器の配置によっては併用)。各室までタグを送るメリットもあまりありませんし、専門家以外には運用の敷居がちょっと高いです。

>・マックアドレスVLANに関して~
これはVLANの方式そのものではなく、予めどのポートをどのVLANに繋ぐかを設定しておくのではなく、MACアドレスを利用してどの端末がどのVLANに繋がるかを決めておいて、スイッチのどのポートに繋が...続きを読む

Qxhtml+cssでdivをdivで内包する

xhtml+cssでウェブサイトを作成しています。
その際、
<div id="a">
<p>題名</p>
<div class="b">内容</div>
<div class="b">内容</div>
</div>
のようにdiv要素内にdiv要素を内包したいと思っています。
しかしこのままだと親であるdiv id="a"を、子であるdiv class="b"がはみ出してしまいます。
cssハックを使用する方法が
http://www.alink.co.jp/tech/blog/2009/04/13/css-clearfix%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fdiv%E3%81%AE%E6%AE%B5%E7%B5%84%E3%81%BF%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF/
に掲載されていましたが、IE7とIE-MACが対象のようです。
これと同じような効果が得られるもので、IE6以降、Firefox2以降、Fodoraそれぞれに対応している方法はありますでしょうか?

私がどうしたいのか少しわかりにくいかもしれませんが、上記URLでどうしたいのかはわかると思います。
アドバイスお願い致します。

xhtml+cssでウェブサイトを作成しています。
その際、
<div id="a">
<p>題名</p>
<div class="b">内容</div>
<div class="b">内容</div>
</div>
のようにdiv要素内にdiv要素を内包したいと思っています。
しかしこのままだと親であるdiv id="a"を、子であるdiv class="b"がはみ出してしまいます。
cssハックを使用する方法が
http://www.alink.co.jp/tech/blog/2009/04/13/css-clearfix%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fdiv%E3%81%AE%E6%AE%B5%E7%B5%84%E3%81%BF%E3%83%86%E3%82%AF%E3%83%8B%...続きを読む

Aベストアンサー

こんにちは。

#a {
zoom: 100%;
}
#a:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
でOKです。

QシスコのVLANタグについて

現在シスコのスイッチとルータを利用しています。
構成は下記で、セグメントXからセグメントYにパケットを送信した場合のVLANタグについて教えてください。

セグメントX-----(A)スイッチ(B)--------(C)ルータ(D)---------セグメントY

スイッチ、ルータには下記設定を実施しています。
(A):アクセスポート(VLAN100)
(B):トランクポート
(C):トランクポート
(D):no switchポート

上記構成の場合、(B)-(C)間ではVLANタグ100がつけられると思いますが、ルータ(D)のインタフェースからパケットが出力されるとき、VLANタグ100はついたままなのでしょうか。それともはずされるのでしょうか。ルータでのVLANタグをはずすタイミングがわからないので、教えていただければ幸いです。

Aベストアンサー

タグがつくのはトランクポートです。
したがって、ルータのインターフェイスDから出て行くときはタグはつきません。
尚、ciscoに限ったことではないと思います。

http://xfreak.com/ccna/point/ccna/index.cgi?mode=view&no=58

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

QタグVLAN 構築時のハブの種類に関して

VLANを勉強中です。技術的な点でお尋ねします。

デフォルトゲートウェイにVLAN対応のルーターを設置。
1~3階各フロアにタグVLAN対応L2スイッチを設置しているとします。
VIDは三つ作りますが、そのメンバーは階ごとではなく、どの階にも存在するとします。
(VID1、VID2、VID3に属するPCがどの階にも存在する。)



この状況下で、各階の間(1階から2階、2階から3階)の幹線上にVLANに対応しないハブが存在するとします。

この場合、

 ・一つでも存在すると、VLANが機能しない?
 ・問題なくつながる?
 ・条件次第(その条件は?)

どのようになるのでしょうか?

よろしくお願いします。
 

Aベストアンサー

「タグVLAN対応の装置」の間(いわゆるVLANトランク)に「タグVLAN未対応のハブ」を挟むという
解釈で良いでしょうか?

その場合、通常、「タグVLAN未対応のハブ」ではタグVLANのフレームが通過できないため、
通信できなくなります。

もちろん、ポートVLAN(access VLANなど言い方はいくつかある)で接続している部分であれば、
タグVLANフレームが流れる部分ではないため、「タグVLAN未対応のハブ」を挟んでも問題ありません。

QVLANタグについて

VLANのタグについて教えてください。
下記状況の時、パケットへのVLNAタグがつけられるのか、それともはずされるのか教えてください。
()パケットがスイッチのインタフェース(アクセスインタフェース)に入るとき
(2)パケットがスイッチのインタフェース(アクセスインタフェース)から出るとき
(3)パケットがスイッチのインタフェース(トランク)に入るとき
(4)パケットがスイッチのインタフェース(トランク)から出るとき

初歩的な質問で恐縮ですが、ご教授いただけましたら幸いです。

Aベストアンサー

()パケットがスイッチのインタフェース(アクセスインタフェース)に入るとき
==>タグがついたり、はずされたりはありません。
(2)パケットがスイッチのインタフェース(アクセスインタフェース)から出るとき
==>タグがついたり、はずされたりはありません。
(3)パケットがスイッチのインタフェース(トランク)に入るとき
==>タグがつけられます。
(4)パケットがスイッチのインタフェース(トランク)から出るとき
==>タグはずされます。

http://www5e.biglobe.ne.jp/~aji/30min/sw05.html

Qdivタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。

divタグ+CSSでレイアウトしようとしています。

横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。

以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。

[--HTML--]

<body>
<div id="all">

<div id="header">
<p>header</p>
</div>

<div id="body">
<p>body</p>
</div>

<div id="sidebar">
<p>sidebar</p>
</div>

<div id="footer">
<p>footer</p>
</div>

</div>

</body>

[--CSS--]

@charset "shift_jis"

body {
margin: 0 auto;
padding: 0;
text-align: center;
}

div#all {
width: 760px;
background-color: blue;
margin: 0 auto;
padding: 0 0 20px;
text-align: left;
overflow: hidden;
}

div#header {
position: relative;
left: 17px;
width: 717px;
height: 50px;
background-color: yellow;
margin: 0;
padding: 0;
text-align: left;
}

div#body {
position: relative;
left: 17px;
width: 522px;
height: 200px;
background-color: lime;
margin: 0 0 2em;
padding: 0;
text-align: left;
float: left;
}

div#sidebar {
position: relative;
left:32px;
width: 180px;
height: 200px;
background-color: red;
margin: 0 0 3em;
padding: 0;
float: left;
}

div#footer {
position: relative;
left: 17px;
width: 717px;
height: 100px;
background-color: fuchsia;
margin: 0;
padding: 0;
clear: both;
}

----------

marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・?

divタグ+CSSでレイアウトしようとしています。

横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。

以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。

[--HTML--]

<body>
<div id="all">

<div id="header">
<p>header</p>
</div>

<div id="body">
<p>body</p>
...続きを読む

Aベストアンサー

結論から言えば、原因はそれぞれの仕様による表示の違いです。

こういう風にHTMLを記述した場合、divでmarginを0に指定しても、
pタグがあるからIEでは空白が0でも非IEでは1行分ほどの空白ができてしまいます。

<div>
<p>***</p>
</div>


人気Q&Aランキング

おすすめ情報