- ベストアンサー
ブロック要素を含むボックスを作るときの注意点は？
Wernerの回答
> リストや<h>や<div>の入ったボックスを組むのに<p>タグでくくったのですが、うまくいきませんでした。 > これはブロック要素をインライン要素でくくってはいけないということだったようです。 p要素はブロック要素です。 ただ、p要素はブロック要素ではありますが 中身にブロック要素を含むことができません。 それにpは段落なので中にhがあるのは意味的にも変でしょう。 http://www.ne.jp/asahi/minazuki/bakera/html/reference/block#p ブロック要素のネスト(入れ子)は 外側の要素がブロック要素を含むことができるdivなどであれば問題ありません。 もちろん、インライン要素の中にブロック要素を含むことはできません。
関連するQ&A
- 「インライン要素」と「ブロック要素」の違いは何
SPANタグの意味を調べたくてググったら http://www.htmq.com/html/span.shtml を見たのですが、 ｄｉｖタグと、SPANタグの違いがよくわからないのですが、 「インライン要素」と「ブロック要素」の違いは何でしょうか？
- ベストアンサー
- CSS
- ブロックレベル要素とdisplay:block;
ブロックというものがよくわかってないのですが、スタイルシートでdisplay:block;とした場合、インライン要素でもブロックレベル要素になるということでしょうか？ タグによっては、「インライン要素を含むことはできません」などの制限のあるものがあると思いますが、スタイルシートでdisplay:block;として、インライン要素をブロックレベル要素にした場合はどうなるのでしょうか？ またそもそも、元々ブロックレベルである要素と、display:block;によってブロックレベルにしたインライン要素は、同じと考えてもいいのでしょうか？
- ベストアンサー
- CSS
- <p>タグはどこまで囲む？
ただいまCSS勉強中です。 いつもどこまで<p>タグで囲まなくてはいけないのか悩むのですが、 「ブロックレベル要素同士は入れ子にならない」 「ブロックレベルの中に含まれるのはインライン要素だけ」 と考えていいのでしょうか。 でもdivの中にpを入れることもありますよね？？ ブロックレベル要素：h,p,ul,dl,blockquote,divなど インライン要素：a,img,em,strong,brなど よろしくお願いいたします。
- ベストアンサー
- CSS
- XHTMLでは、インライン要素は必ずブロックレベル要素内に記述となっていますがこの場合は？
XHTMLについて教えてください。 XHTMLでは、インラインレベル要素は、必ずブロックレベル要素内で記述されなければなりませんが、こういった場合（以下参照ください）の書き方は、どちらが正しのでしょうか？ まずCSSを、 #hoge{ width:200px; background-color:#000000; } と設定したと仮定します。 で、XHTMLですが・・・ -----サンプル１----- <div id="hoge"> <p><img src="写真とか.gif" alt="" width="10" height="10" /></p> <h1>タイトル</h1> <p>テキストテキストテキスト・・・・・</p> </div> -----サンプル2----- <div id="hoge"> <img src="写真とか.gif" alt="" width="10" height="10" /> <h1>タイトル</h1> テキストテキスト </div> あと、ブロックid“hoge”内に一つだけインライン要素を配置する場合・・・ -----サンプル2----- <div id="hoge"> <p><img src="ボタン.gif" alt="" width="10" height="10" /></p> </div> -----サンプル2----- <div id="hoge"> <img src="ボタン.gif" alt="" width="10" height="10" /> </div> 要するに、CSSの設定を呼び出すために<div>で括っている場合は、それぞれのサンプル2のように既にブロックレベル要素内に収まっている」ということになるのでしょうか？ それとも、やはり、サンプル1のよう記述するのが正しいのでしょうか？ 説明が分かりにくくて申し訳ございませんが、ぜひアドバイスくださいますようお願いいたします。
- ベストアンサー
- HTML
- ブロック要素の右下寄せ
添付されている画像のように、Aブロック要素内の右下にBブロック要素を配置したいです。 下記の記述だとFFではきちん表示されるのですが、IEでは表示すらされません。 どうしたらよいでしょうか？ *htmlの記述 <div id="box-a"> <div class="box-c"> <h2>見出し</h2> <p>内容</p> </div> <div class="box-c"> <h2>見出し</h2> <p>内容</p> </div> <div id="box-b"> <p>内容</p> </div> </div> *CSS #box-a{ margin:0; padding:50px 0; position:relative; background-image:url(../img/box-a.gif); background-repeat:no-repeat; background-position:left bottom; } #box-c{ margin:20px 120px 0px 200px; padding:10px; background-image:url(../img/box-c.gif); background-repeat:no-repeat; } #box-b{ position:absolute; right:0; bottom:0; margin:0; padding:0; width:150px; height:150px; background-image:url(../img/box-b.gif); background-repeat:no-repeat; }
- ベストアンサー
- CSS
- ２つのブロック要素をまとめてインライン表示したい。
２つのブロック要素をまとめてインライン表示したい。 この質問タイトルが適切かは全く自信がないのですが、例として次のようなHTMLがあるとします。 <body> <div class="container"> <div class="title"> <h1>「タイトル」</h1> </div> <div class="subtitle"> <p>「サブタイトル」</p> </div> </div> </body> 「タイトル」のすぐ横に「サブタイトル」が表示されるようにしたいと思っています。 /* 表示イメージ */ 「タイトル」 「サブタイトル」 ただし、表示幅に対してタイトルが長いと、タイトルが複数行に渡って表示されます。 この場合もタイトルの表示が終わった直後に「サブタイトル」を表示したいです。 /* 表示イメージ */ 「非常に長～～～～～～～～～い タイトル」 「サブタイトル」 これを実現するにはCSSでどのように記述したらよいのでしょうか？
- ベストアンサー
- HTML
- 段落タグ<p>について教えてください。
昔、どこかのサイトで<p>タグは必要不可欠のものだ、との記述を見たことがあります。例えば <h1>タイトル</h1> <h2>サブタイトル</h2> <p>説明文</p> のように。必ず<p>タグで文章をくくらなければいけない、 というのが、『本来』の規則なのでしょうか。(←質問１) もしそうだとして、テーブルやリストなども<p>でくくるのですか？ (↑質問２) また、<div>を使い１つの段落をブロックとしてまとめる(?)ときも<p>を使うのでしょうか、それは<div>の外側と内側、どちらに書くべきですか？(←質問３) 上記の質問はインライン要素、ブロック要素というようなものと関係があるのですか？(←質問４) 最後に、複数の改行を行うとき、<br>の連続は禁止されていますが、スペースだけの段落で改行を演じるのはどうなのでしょうか。(質問５) 長くなりましたが、簡単にでいいのでよろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- ブロックレベル要素の前後のスペース（余白）のことで
ブロック要素の場合は、前後に改行が入るのはわかりましたが、同じブロックレベル要素でもpタグは前後に余白？空白行？が入ります。divやaddressも同じブロックレベル要素なのに、こちらは段落の前後にあきが出ません。 ブロックレベル要素に共通なのは、前後で改行されるということだけで、前後に１行？あいてしまうかどうかは、要素によってマチマチということなのでしょうか。 ※Win7、IE8使用
- 締切済み
- HTML
- CSSでブロックレベル要素をロールオーバーさせる
こんにちわ アンカータグにマウスが乗った場合に、 属する親ブロックレベル要素のスタイルを変更するのは どのように行うのでしょうか？ #HTML <div class="box"> <p>タイトル</p> <p><a href="#">あいうえお</a></p> </div> #CSS 通常時 div.box{ border: 1px #dddddd solid; } ロールオーバー時 div.box{ border: 1px red solid; }
- ベストアンサー
- HTML
- dlタグの中にdivは使える？
dlタグの中で、dtタグとddタグを一つのdivで囲ってもよいのでしょうか？？ 以下のようなかたちなのですが・・・。 使い方として間違っているのでしょうか？？ ↓ ------------------------------------------------ <dl> <div class="aaa"> <dt>タイトル01</dt> <dd> <h4>説明文説明文説明文説明文説明文説明文</h4> <p><img ・・・・・></p> </dd> </div> <div class="aaa"> <dt>タイトル02</dt> <dd> <h4>説明文説明文説明文説明文説明文説明文</h4> <p><img ・・・・・></p> </dd> </div> <div class="aaa"> <dt>タイトル03</dt> <dd> <h4>説明文説明文説明文説明文説明文説明文</h4> <p><img ・・・・・></p> </dd> </div> </dl> ------------------------------------------------ dlタグの中には直接dtタグとddタグしか入れることができないということのようですが、 これはdivは入れられないということになるのでしょうか？？ （dtはインライン要素のみ、ddはブロック要素もインライン要素も使えるということなので、 ddの中ではdivが使えると思うのですが・・・。） また、もしdivで囲えないとしたら、 今回の場合は、それぞれを一つのdlで囲ってしまうべきなのでしょうか？？ ご存知の方いらっしゃいましたら、よろしくご指導ください。お願いします。
- ベストアンサー
- CSS
お礼
な・なるほど・・・<p>タグもブロック要素ですか・・・。。 ありがとうございます＾＾；