• ベストアンサー

ＣＳＳで、ＩＤとＣＬＡＳＳを同時に設定することは可能ですか？

<div ID="main" CLASS="sub"></div>のように スタイルシートで、IDにメインのスタイル CLASSにサブのスタイルを設定してみて、 とりあえず、firefox、IE6、で確認してみたところ、うまく動きました。 しかし、グーグルで”ＩＤ　ＣＬＡＳＳ　同時”等で検索してみても、 同時に使えることが解説されたサイトが大変少なく、 果たして、同時使いは、CSSの構文違反にならないのか不安になり 質問させていただきました。 <div ID="main" CLASS="sub"></div>のようなセレクタ同時使いは、 やっても大丈夫なものなのでしょうか？ サポートされていないブラウザがあったりすることはないのでしょうか？

  • HTML
  • 回答数2
  • ありがとう数12

質問者が選んだベストアンサー

  • ベストアンサー
  • auty
  • ベストアンサー率58% (284/486)
回答No.1

・　 CLASS="sub" の方は、ほかのタグにも共通で使えますからそれらと同じ設定が出来るようになり有効に使えます。CSSをサポートしているブラウザなら大丈夫です。

yuzuru0024
質問者

お礼

回答ありがとうございます。 よく考えたら、やってることは <div ID="main"> <div CLASS="sub"> </div> <div> と変わらないんですね。

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

そもそも複数のclass指定ができるくらいですから、idとの連携は 問題ないでしょう。 <div ID="main" CLASS="sub1 sub2 sub3"></div>

yuzuru0024
質問者

お礼

回答ありがとうございます。 複数のクラスを同時指定することができるのですか！ CLASS属性を並べたてみたところ反映されなかったので CLASSを複数同時に使うのはあきらめていましたが そういう風に書くんですね。 これなら、よく使うスタイルは、共通スタイルシートにまとめておけれますね。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 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
  • ＣＳＳのＣＬＡＳＳとＩＤについて教えてください

    ＣＳＳのＣＬＡＳＳとＩＤについて教えてください。ＩＤはＤＩＶと関係なければ別の上下関係ですか？？

  • DreamweaverでCSSの「div id」設定方法

    DreamweaverMXを使ってCSSを独学している初心者です。OSはWindowsXPです。 以下のようなタグを使って作る時 <div id="aaa">の部分を、コード部分に直接タグを挿入する以外の、Dreamweaverの使い方があれば、お教えいただますでしょうか。 （煩雑になるのでタグの<title>より上は省略して載せています） <style type="text/css"> <!-- #aaa { background-color: #CCFFFF; width: 600px; } --> </style> </head> <body> <div id="aaa"> <p>表題</p> <p>例文ああああああああああああ</p> <p>事例</p> <p>例文いいいいいいいい </p> </div> </body> </html> 「#aaa」というスタイルは「CSSスタイル」パネルから新規CSSスタイルのセレクタタイプを「詳細（ID，コンテキストセレクタなど）を選択し、セレクタに「#aaa」と入力してスタイル定義で設定しました。 ・スタイル名が「.aaa」ではダメで「#aaa」でなくては出来ない点と、 　<div id="aaa">部分が<div id="#aaa">ではダメな理由の知識もありません。 ・<p class="bbb">というスタイルの設定を、セレクタタイプを「クラス（すべてのタグに適用可能）」にして「.bbb」という名前にして設定したスタイルは 「文章のスタイルを適応したい部分を選択→スタイルを選択して右クリック→適応」で<p class="bbb">例文ううう</p>のようなタグが挿入されますが 「div id」の場合は同じような手順では出来ないのでしょうか？ 私が持っているDreamweaverMXの解説書にはこのあたりのことが記載されていません。もしお勧めの本があれば　そちらもお教えいただけると幸いです。 どうぞよろしくお願いいたします。

  • ＣＳＳについて教えてください。ｉｄ，ｃｌａｓｓ

    <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のあとｉｄが使われている様に思うのですが、ｃｌａｓｓにもｉｄは使えますか？？ 的外れですみません

  • css　classとidの使い方

    あの、<p></p>内の文をclassを使ってitalicに、<span>内をidを使ってbold,色は赤にしたいのですが。変わりません。どこを直したら良いでしょうか？よろしくお願いします。 <HTML> <HEAD> <LINK href="global.css" rel="stylesheet" type="text/css"> <TITLE>About Me</TITLE> </HEAD> <BODY> <H1>About Me</H1> <IMG src="MyPic.png" alt="MyPic" height="150" width="100"> <DIV class="profile"> <p>My name is blahblah.<br> I am a <SPAN id="attention">Good</SPAN> Student.<br> </p> </DIV> 　</BODY> </html> global.cssの内容 .profile{font-style: italic} #attention { font-weight: bold; font-style: italic; color: red }

    • ベストアンサー
    • HTML
  • CSSでマージン設定がうまくいきません

    以下の画像のように、div="main"のボックスとdiv="footer"のボックスの間に、 div="main"に対してmargin-bottomを設定したいのですが、 clearfixを使用してもうまくいきません。 次のコードを使用しました。 【HTML】 <div id="main" class="cf"> <div id=class"sub_01"> <p>aaaaaaa</p> </div> <div id=class"sub_02"> <p>bbbbbbb</p> </div> </div> <div id="footer"> <p>ccccccc</p> </div> 【CSS】 #main{ width: 850px; margin: 30px 0px; } .cf:befor, .cf:after{ content:""; display:block; overflow:hidden; } .cf:after{ clear:both; } .cf{ zoom:1; } .sub_01{ width: 500px; float: left; } .sub_02{ width: 350px; float: right; } #footer{ width: 850px; } --------ここまで-------- 以上のコードを書きましたが、最近clearfixのことを勉強したばかりで認識不足です。 親のmainの中のsub_01やsub_02に画像や文字が記入されるにつれて、 親であるmainの高さが変化し、mainに対してmargin-bottomを効かせる方法はないのでしょうか？ どうかご教授よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSS　idとclassをtableでつかうとき

    内部cssで テーブルに装飾をしようとしていたのですが、 <style type="text/css"> <!-- table.sample td {font-size:12px;} --> </style> <table class="sample">・・・ これは有効でした <style type="text/css"> <!-- table#sample td {font-size:12px;} --> </style> <table id="sample">・・・ これは無効でした なぜでしょう？classとidはそのユニーク性のみの違いかと思っていましたが。 このような機能的な違いもあるのでしょうか。 それとも単に記述ミスですかね。。。

    • ベストアンサー
    • CSS
  • 状況（変数）によってclassを変えるには

    <style type=text/css><!-- .sub1 a:hover{color: red;} .sub2 a:hover{color: blue;} --> ・・・（省略)・・・ <style type="javascript"> var status = "sub1"; </style> ・・・（省略)・・・ <div id="location1" class="sub1"> <a href="#">この色を変更</a> </div> --------------------------- statusの状況によってid="location1"のclassを変えたいと思っています。 statusの状況が"sub2"だったらclassをsub2に、"sub1"だったらclassをsub1に変更したいのです。 こんな事ってできるのでしょうか？ご存知の方、ご教授ください。

  • classとidの名前の付け方

    classとidの名前の付け方についてお伺いします。 1. classとidの名前の付け方によってSEOに関係するのでしょうか？ 2. むやみにclassやidを付けずにセレクターなどを使うほうがよいのでしょうか？ 3. 例えばid="category1"とつけるのとid="cat1"というように省略するとgoogleは「cat1ってなんだよ？」と判断したりしてランクを下げたりしますか？ 4. 同じid名を1つのhtml内に複数使っていたり、class名が1つしか使われていないWebサイトをよく見掛けます。これでもブラウザは解釈するようですが、html内で1つしか使わないのにclassで指定するのは良くないのでしょうか？ 5. そもそもidとclassをgoogleはどのように判別しているのでしょうか？idは見出し、classはその下のカテゴリとか・・・そういう感じですか？ なかなかネットを検索してもわからなかったのでこちらで質問させて頂きました。 お手数ですがよろしくお願い致します。

    • ベストアンサー
    • CSS
  • id class が効かない

    ＨＰを作成し始めたばかりです。 ＩＥではスタイルシートで id や class で画像のサイズが指定するとちゃんと表示されますが、 Firefox では全く効かずそのままの大きさになります。どうすればよいでしょうか？ また、ブラウザの表示で「～場合は・・・すればよい」というようなサイトはありますか？ ありましたら教えてください。よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する