• 締切済み

CSSのid属性

cssでtableにid属性を指定しています。 同じページの中で同じid属性を何度も使用しても大丈夫なのでしょうか? HTMLチェッカーで 「重複しています」とエラーがでたので心配になりました。 また、以下のように、同じ<table>内で、 <tr>と<td>にそれぞれclassを持たせても大丈夫でしょうか? IEではキチンと表示されるのですが、 本来はやってはいけないことだったりしますか? <table id="table-style"> <tr class="tr1"> <td class="td1"> ほにゃらら </td> </tr> </table> 教えてください! 宜しくお願いします。

みんなの回答

  • picto3
  • ベストアンサー率33% (1/3)
回答No.4

id属性は重複して使用するべきではないです。 (重複してもブラウザで表示されますが…) 同じ設定を使い回したい場合は、classを使用して下さい。 また、どうしてもid属性を使いたい場合は #table-style,#tablestyle2{…ここにプロパティを記述…} というように、カンマ「,」で区切って 記述してみてははいかがでしょうか?

  • dezimac
  • ベストアンサー率56% (2365/4208)
回答No.3

同一IDは1ページに1個しか利用できません。 classはいくらでも利用できます。 何度も利用するようなのはclassを使用して下さい。 <table class="aaa"><tr class="XX"><td class="YY">~ <table class="aaa"><tr class="XX"><td class="YY">~ <table class="aaa"><tr class="XX"><td class="YY">~ > それぞれclassを持たせても 問題ありません。 > IEではキチンと表示される IE程ではないけど、FirefoxやOpera等の他のブラウザでもこの程度のミスならば一応表示はできますけど、正しい記述ではないのでやらない方がいいです。 IEは本当にとんでもない表記でも無理矢理表示するから、ミスに気付かない人もいるでしょうけど。

回答No.2

>同じページの中で同じid属性を何度も使用しても ID型の属性(id属性など)は他と重複してはいけません。 >それぞれclassを持たせても大丈夫でしょうか? まったく問題ありません。(あんまり好きなサンプルじゃないけど、)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

idは付けた対象を識別するためのもの。 idの重複はやってはいけない事です。 idはjavascriptで利用したり、 ラベルとしてリンク先に指定する事ができます。(<a href="~#table-style">) classは付けた対象を分類するためのもの。 分類ですから複数存在する事はもちろん問題ないです。

関連するQ&A

  • 同じid属性を何回も使ってはいけないの?

    「Another HTML-lint gateway」(個人のサイトっぽいのでリンクは貼りません)というHTMLの文法チェックサイトで、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">として文書をチェックしたところ、id属性が重複して使用されているのが良くないという結果が出ました。 具体的にはHEAD内にstyle定義として、仮に「#td1 td{ スタイルの内容 } 」という属性を書き、その属性を反映させたいテーブルに「id="td1"」を付けました。全く同じ処理をしたいテーブルがたくさんあるのでそれらにも全て「id="td1"」を付けたところ、上記チェックでダメだしを食らったというわけです。 id属性は、同じように処理したい箇所を、ひとつ定義を作ることによって全て同じように処理を適用するものだと思ってるんですが、そういうものではないんですか? また、同じような属性としてclassも同様なのでしょうか?

    • ベストアンサー
    • 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
  • 【CSS】class属性とid属性の使い分けについて

    CSSの勉強をしているのですが、 任意の範囲にスタイルを設定する [class属性]と[id属性]の使い分け について、どのように解釈したら 良いか、今一すっきり飲み込めません。 W3Cの定義によれば、idの場合は、一つ のHTML文書内で1度しか呼び出す事が できないことになっているようです が、たった1度しか呼び出す事の できないid属性は、どのような場合に 使ったらよいですか? 宜しくお願いします。

  • cssが読み込まれない

    htmlを作成しています。(html5) が、cssが読み込まれなくて困っています。 例えば下記のような場合、 ***************** <div id="syu"> <table> <tr> <td class="code1">コード    <input type="text" class="style1"> </td> <td class="style2"> <input type="text" value="abc" class="style3"> </td> </tr> (続く) ******************* cssファイルに設定する場合、下記の書き方はどちらも間違っていて、効かないのですが どういう風にかけばいいのか、思い悩んでいます。 (1) #syu .code1{・・・} (2) #syu table td.code1{・・・} 正しくはどういうふうに書くのが正解なのでしょうか? すみません、自分で調べろ、いろいろ試してみろと言われそうですが、 最初はうまくcss読み込まれていたのですが、途中で事情があって、htmlの一部をiframeに持っていったら、残されたほう(上記)のcssが効かなくなってしまったのです。 これを元にプログラミングしなければならず、緊急なのでヘルプをお願いしたいです。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • 外部CSSを使ったテーブルが作りたいのですが・・・。

    以前こちらで質問させて頂いて、「スタイル作りはCSSで」、と教えて頂き、CSSの勉強を始めました。 早速壁に当たっていまして、お知恵を拝借したいです。 外部CSSファイルに、ul.gaibu{color:ff0000}と記すと、 HTMLファイルに<ul class="gaibu">ここは赤で表示</ul> となる事は出来たのですが、 テーブルの場合、 外部CSSファイルにdiv#table{設定値}を記し、 HTMLに<div id=table>とすると、外部CSSの設定値が反映されましたが、 <tr>や<td>の内容をどう設定して、HTMLにどう記載すれば反映するかが分かりません。 因みに外部CSSに tr.table1 {border:1px #333333 solid; line-height:25px; padding-left:10px; paddting-right:10px; text-align:left; vertical-align:middle} と記載し、HTMLの方に <tr><td class="table1">表1</td><tr>としましたが、 CSSの内容は反映されていません。 宜しくお願い致します。

  • 特定のテーブルにだけ任意の書式を適用するHTMLかCSS

    特定のテーブルにだけ任意の書式を適用するHTMLかCSS 以下のHTMLテーブルで、入れ子テーブル(区画1~区画4)には罫線なし、 外枠(田の字)だけ、1pxの黒い罫線を引くにはどういうのが効率いいですか? 【解決案1】こうすると、入れ子テーブル(区画1~区画4)まで罫線が現れてしまいます。 table,td,th {border-collapse: collapse; border: 1px solid #000;} 【解決案2】こうすると、該当する全ての<td>タグを<td class="tdstyle">と仕込むのも面倒です。 table {border-collapse: collapse; border: 1px solid #000;} .tdstyle {border: 1px solid #000;} 【解決案3】外枠(田の字)だけ、以下のようにしたいですが、bordercolorってIEのみ有効なタグですよね? <table border="1" style="border-collapse: collapse" bordercolor="#111111"> 外枠(田の字)だけに、IDをつけたり識別して、効率よく処理できませんか? <html> <head> <style TYPE="text/css"> <!-- --> </style> </head> <body>   <table cellpadding=10>     <tr>       <td>         <table cellpadding=10><tr><td>区画1</td></tr></table>       </td>       <td>         <table cellpadding=10><tr><td>区画2</td></tr></table>       </td>     </tr>     <tr>       <td>         <table cellpadding=10><tr><td>区画3</td></tr></table>       </td>       <td>         <table cellpadding=10><tr><td>区画4</td></tr></table>       </td>     </tr>   </table> </body> </html>

    • ベストアンサー
    • HTML
  • TABLE内のTABLEのHEIGHT属性が利かない

    TABLEの中にTABLEを入れ子にしてHTMLを作ったのですが、 外のTABLEのHEIGHTを変動にして、内のTABLEのHEIGHTを100%にしてもHEIGHTがくっつきません。 検証したところ、IE5.0(Mac)は利くようですが、IE5.5(Win)は100%が利きません。 そういう仕様なのでしょうか?しょうがないのでしょうか? それともCSSで解決できるものでしょうか? ご存じの方いらっしゃいましたらご教授ください。 参考に、ソースをご覧ください。 <HTML> <HEAD> <TITLE>SAMPLE</TITLE> </HEAD> <BODY> <TABLE WIDTH="600" HEIGHT="600"> <TR> <TD> <TABLE WIDTH="500" HEIGHT="100%"> <TR> <TD>SAMPLE</TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • CSSで高さ100%のレイアウト

    テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか? 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。

    • ベストアンサー
    • CSS
  • CSSの@importから一部のスタイルが読み込めない・・・。

    CSS外部ファイルから、一部のスタイルだけが適応されず困っています。 以下のスタイルをテーブルに適応させたいのです。 【スタイル(index.css)】 table.test{ background-color: #ffcc66; } table.test td{ border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #000000; } 【以下のタグに適応】 <table cellspacing="0" cellpadding="0" class="test"> <tr> <td>AAA</td> </tr> <tr> <td>BBB</td> </tr> <tr> <td>CCC</td> </tr> </table> 【スタイル入力先】index.css 【読み込み方式】<link>によるbase.cssからの@import <link rel="stylesheet" type="text/css" href="css/base.css"> 更に、base.cssから@importでindex.cssを読み込んでいる環境です。 【OS】windowsXP 【ブラウザ】IE6 ******************** 適応されるとテーブルの背景がオレンジ色になり、 テーブルの「AAA」「BBB」「CCC」に点線のアンダーラインが表示されます。 しかし、テーブルの背景はオレンジになるのですが、table.test td{}のスタイルだけ適応されません…。 他のindex.css内にあるタグは正常に読み込まれ適応されています。 (※ちなみに拡張子はPHPです。HTMLではありません) 色々試すと以下の事が判明しました。 □直接タグにスタイルを入力すると全て適応される □<head></head>内にスタイルを入力し、Class指定しても全て適応される □試しに、base.cssに入力するとスタイルが正常に全て適応される ■しかし、index.cssにスタイル入力するとtable.test td{}のみ適応されない なぜ外部CSSファイル(@importからのCSSファイル)から適応されないのでしょうか? PHPなのが原因だったりもするのでしょうか…。 ご助力お願いします。

    • ベストアンサー
    • HTML
  • テーブルの幅をデフォルトに戻すcssがわかりま

    <html> <head> <title>test</title> <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1> <tr><td>No</td><td>table1</td></tr> </table> <table border=1> <tr><td>No</td><td>table2</td></tr> </table> </body> </html> このようなソースで二つ目のテーブルだけ table { width: 100%; } を適用しない方法はありますか? 実際はテーブルが複数あり 基本的には table { width: 100%; } をテーブルに設定したいのですが とあるテーブルのみテーブルの幅をデフォルトのサイズにしたいのです。 table { width: 100%; } で全てのテーブルに適用した後に クラスを使って該当のテーブルのみ デフォルトの値に戻す方法は有りますか? <table border=1 class="デフォルトに戻す"> <tr><td>No</td><td>table2</td></tr> </table> としたいのですが テーブルの幅をデフォルトに戻すcssがわかりません。 2つのテーブルの幅は指定したくありません。

    • ベストアンサー
    • HTML

専門家に質問してみよう