- ベストアンサー
aタグの中にdivタグを入れる場合について。
Tacosanの回答
- Tacosan
- ベストアンサー率23% (3656/15482)
えぇと.... なるほど、Categoryの項目ではなく、Content modelの項目を見るんですね。（今やっと気づいた。） こういう根本的な部分は早く指摘して欲しいですね。 とのことですが, これは ・#1 で指摘するようでは遅すぎる. もっと前に指摘してほしかった ・常識的に考えて「コンテントモデル」と「Content Model」が同じものであるはずがない のどちらの意味でしょうか? それともどちらでもない? 「仕様の見方」についていうと, まず「仕様」というものに慣れているかどうかからはじまります. 自分が「慣れていない」と思うなら, 「見方に疑問はないと思っても一応『どのように見るのか』を確認する」方がよいと思います. ここだと各要素に与えられている「Categories」とか「Contexts in which this element can be used」とかの意味です. そしてそれはだいたい仕様に書いてあるもので (というか書いてなければ仕様の欠陥と言っていい), 今の場合だと 3.2.4 Element definitions http://www.w3.org/TR/html5/elements.html#element-definitions にあります. なぜ「そこを見ればいいと考えられるか」といえば, 今考えているのが「a要素とはどういうものか」, 言い換えれば「a要素の定義」だからです. そこで「要素の定義」, 英語では「element definition」のような文字列がどこかにあるはず... と推測することができます. さて, 3.2.4 Element definitions によれば「子要素として何を使うことができるかは Content model に書いてある」とわかります. a要素では Transparent, but there must be no interactive content descendant. と書かれています. これでわかればいいけど「transparent」がよくわからんしリンクもはってあるのでそこをたどれば 3.2.5.2 Transparent content models http://www.w3.org/TR/html5/content-models.html#transparent にいきつきます. ここには例もあるので, それと突き合せて考えれば結論は難しくないでしょう. ついでにいうと a要素の categories が Flow content. When the element only contains phrasing content: phrasing content. Interactive content. となっているのは, 「a要素は ・flow content であり, ・(the element = a要素が phrasing content のみを含むときには) phrasing content であり, ・interactive content である」 と読む必要があります. 2つ目は「transparent content models」との関係で入っています.
関連するQ&A
- floatさせたdivタグを折り返させたくない
Javascriptで開いた子ウィンドウ内のページについて レイアウトで困っております。 以下のようなブロック要素の配置について <div> <div style="float; left"> コンテンツA </div> <div style="float; left"> <div> コンテンツB </div> <div> コンテンツC </div> </div> <div style="clear: both"> </div> 以上のような配置になっており、 コンテンツ３の中身をJavascriptで書き換えています。 その際、コンテンツCの横幅が変動し右に大きく広がる場合があります。 それにより、ウィンドウサイズによってはコンテンツBCがコンテンツAに回りこんでしまいます。 何故こうなるかは理解出来るのですが、対策が思い浮かびません。 ●思いついたが避けたい対応策 ・親のdivタグに想定出来る最大値のwidthを設定する ・tableタグによるレイアウト 良い対応策はございませんでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- ■divにid指定して子供タグに適応(ソース付)
みなさん、よろしくお願いします。 上の段と下の段を表示上同じ結果にしたいと思います。 現在、上の段のようにdivタグ以下の全てのタグに、GrayMojiを 指定しています。 本番のソースでは、これが大量にあるので、簡潔に書きたいと思っています。 そこで、下の段のように、１つだけidを指定しただけで、divタグに含まれている 全タグにGrayMojiを適応させたいと思っています。 でも、このソースでは、同じ結果が得られません。 どのようにすれば、良いかアドバイスをいただけないでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> <!-- a:link{ color: #0033EE;} #GrayMoji {color: #666666;} --> </style> </head> <body> <div> <a id="GrayMoji" href="main/about.html">div-AタグClass</a> <p id="GrayMoji">div-pタグClass</p> </div> ------------------------------------ <div id="GrayMoji"> <a href="main/about.html">divタグClass-A</a> <p>divタグClass-p</p> </div> </body> </html>
- ベストアンサー
- HTML
- 開始タグと終了タグについて
開始タグと終了タグについて ものすごく初歩的な質問で失礼します。 <div id="container"> <div id="header"> </div> <div id="menu"> </div> <div class="main-top-img"> </div> <div class="main-middle-img"> <div id="main-contents"> <div class="text"> <h2 class="title"></h2> <p class="text"></p> <h3 class="subtitle"> <p class="text"></p> </div> </div> <div class="main-bottom-img"> </div> <div id="footer"> </div> </div> などいのように開始タグと終了タグの間に、他の多くの<div>要素がある場合、どこがその要素の終了タグなのか分からなくなります。 それぞれの開始タグが、それぞれの終了タグと対応するのは、どのようなルールのもとに決定されているのですか？？
- ベストアンサー
- HTML
- DIVタグでの擬似インラインフレーム
<DIV>タグで擬似インラインフレームを実現させようと思っています。 <DIV>タグ内に<table>タグがあって、<td>タグ内に<A>タグテキストリンクがある場合に、そのリンクを右クリックしてプロパティを表示させると、 <DIV>タグの位置がずれてしまいます。 ・動作テスト OS：WindowsXP SP１ ブラウザ：IE6 ・テキストリンク<a>タグを右クリックしてプロパティを表示させたときのみ発生する。 ・NN7.1では発生しません。 原因がまったくわかりません。 簡単な例↓ <DIV style="width:640px;height:350px;overflow:scroll;"> <table width=620px><tr><td><A href=http://www.yahoo.co.jp>YAHOO</A></td></tr></table> </DIV> 以上のような感じです。 しかし、実際に操作していただくと、何が問題なのかがわかると思いますので、以下のページを参照してください。 http://members3.jcom.home.ne.jp/takokko/divframetest.html 大変困っております。なにとぞ、宜しくお願いいたします。
- ベストアンサー
- HTML
- CSS適用ページで余分なDIVタグが要求される
CSS初心者です、質問させてください。 XHTMLに外部CSSを添付させています。 headerは３ブロック、 contentsは３ブロックに分けてから各ブロックに複数ブロックをいれています。それら複数ブロックはそれぞれ幅と高さを指定しています。 contentsとfooterには「clear: both;」をいれています。 ソースは以下の通りです。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>無題ドキュメント</title> <link href="affiliate.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <div id="a_Left"> <div id="a1">A1</div> <div id="a2">A2</div> </div> <div id="a_right"> <div id="a3">A3</div> </div> </div> <div id="contents"> <div id="conLeft"> <div id="b1">B1</div> <div id="b2">B2</div> <div id="b3">B3</div> </div> <div id="conCenter"> <div id="c1">C1</div> <div id="c2">C2</div> <div id="c3">C3</div> </div> <div id="conRight"> <div id="d1">D1</div> <div id="d2">D2</div> <div id="d3">D3</div> <div id="d4">D4<div> </div> </div> </div> </div> <div id="footer">E1</div> </body> </html> 明らかにid="footer"の上にある</div></div>は不要なのですが、入れないと表示がおかしくなります。 なぜかさっぱりわかりません。 どうすればいいのでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- css(div)の中にtableタグを使うとなぜかcellpaddingがきかない
cssのdivの中にtableタグを入れ子にして作成していますが、中側tableのcellpaddingを5に指定しているにもかかわらず余白があきません。 過去ログにCSSの設計思想からすると、DIVの中にTABLE要素を組み込むことは論理矛盾であると書かれていましたが、複雑な表になってくると知識がないため、テーブルを使っているのが現状です。 なぜ余白があかないのでしょうか？また対応する方法はあれば教えていただきたいです。よろしくお願いします。 <div id="fee_table"> <table width="460" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#C4D6A7"><table width="460" border="0" cellspacing="1" cellpadding="5"> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> </table></td> </tr> </table> </div> ■---css---------------------------------------■ #fee_table { font-size: 95%; margin : 10px 0 10px 15px; }
- 締切済み
- HTML
- XHTML1.1で空要素タグを書くと、W3CのValidatorでエラ
XHTML1.1で空要素タグを書くと、W3CのValidatorでエラーが出てしまいます。 下記のXHTMLをW3CのValidatorでチェックをすると、body内の<br />の箇所でエラー出てしまいます。 =========================================================== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title></title> </head> <body> <br /> </body> </html> =========================================================== エラーの内容は下記の通りです。 document type does not allow element "br" here; missing one of "ins", "del", "h1", "h2", "h3", "h4", "h5", "h6", "p", "div", "pre", "address", "fieldset" start-tag <br /> The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). =========================================================== <img>などの<br />以外の空要素タグを入れても同様のエラーが出ます。 ただし、<div><br /></div>とするとエラーが出ません。 XHTML1.1の仕様では、空要素タグはブロック要素タグなどで囲わないといけないのでしょうか？ もしくは、記述になにか間違いがあるのでしょうか？ ご教示をお願いいたします。
- ベストアンサー
- HTML
- divでくくった中の要素にa link
以下のdivでくくった中の要素にa link等の カラーの指定をしたいのですが、どのように記述したらよいでしょうか。 div.main { width: 560px; padding-top: 15px; padding-left: 20px; line-height: 130%; } --------------- div指定していないところでは a:link, a:visited { color: #000000; font-size: 12px; line-height: 120%; text-decoration: none; } a:hover { color: #0066CC; text-decoration: underline; } a.navia:link, a:visited { font-size: 8pt; color: #666666; text-decoration:none;} a.navia:hover { color: #FF6633 ; text-decoration:underline } の2つを記述しています。
- ベストアンサー
- HTML
- ボタンにinputを使う場合と使わない場合がある？
ボタンにinputを使う場合と使わない場合がありますが、見た目がボタンでも 下記に該当しないものはaを使えばいいでしょうか。 inputタグ（input要素）は送信ボタンやリセットボタン、テキストの入力欄、チェックボックスなどを表します。 下記サイトはpの中にaタグを使って表現していますが、セマンティックだと思いますか？ http://jfarm-tomato.com/ pはコンテンツの一部を示すタグですよね。 このサイトの詳細はこちらボタンなどもコンテンツの一部と考えらるのでしょうか？
- 締切済み
- HTML
- HTMLタグについて
<!-- #EndEditable --> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <link rel="stylesheet" href="古いデーター/text.css" type="text/css"> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="5" marginwidth="0" marginheight="5"> <table width="760" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td><div align="center"><img src="toppu2.gif" width="700" height="92"></div></td> </tr> </table> <div align="center"> <table width="760" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center"><img src="botan4.gif" width="700" height="57" border="0" usemap="#Map6"></div></td> </tr> <tr> <td><div align="left"><!-- InstanceBeginEditable name="contents" --> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ 上記のタグで 【<link rel="stylesheet" href="古いデーター/text.css" type="text/css"> 】が文字化けしてるから可笑しいと思うのですが、これを テンプレート上で下記のように修正してもエラーが出て 上手くいきません。 <link rel="stylesheet" href="../../text.css" type="text/css"> この他におかしい部分が多分あると思うのですが、 そこをお教えください。 宜しくお願い致します。
- ベストアンサー
- その他([技術者向] コンピューター)
お礼
追い打ちに強烈な解説をありがとうございます。これ、お金取れるレベルですね。 ありがたや～。 はっきりって英語が沢山で眠くなるのですが少し読みました。 （http://www.w3.org/TR/html5/content-models.html#transparent） -------------------------- The content model of a transparent element is derived from the content model of its parent element -------------------------- 「transparent element」 ↑日本人的にはふざけた名前ですよ。。これ専門用語ってやつですか。 この定義を見て初めて理解できますね。 -------------------------- >なるほど、Categoryの項目ではなく、Content modelの項目を見るんですね。（今やっと気 >づいた。） >こういう根本的な部分は早く指摘して欲しいですね。 ↑これは一人ごとみたいなものです。愚痴です。 -------------------------- 仕様書の読み方。結構すんなり受け取れました。 「読み方」超大事ですね。 私が最初の質問してる時点では、ここまで深い仕組みだと検討をつけてませんでしたから。 -------------------------- http://www.w3.org/TR/html5/elements.html#element-definitions あー。↑これはとてもいいですね。 わかりやすい。（日本語でここを引用して頂いたから理解できてるわけですが。） 当初の質問内容を大幅に超えた解説にとても感謝します。 ご縁があればご飯奢らせてください。（うーむ。御大がどこのポジションに所属してるのか興味ありです。）