- ベストアンサー
ブロックレベル要素とdisplay:block;
yambejpの回答
- yambejp
- ベストアンサー率51% (3827/7415)
スタイルシートでいくらブロック要素化しても構造上の問題なので、 解決しません。 インライン要素を含むことができないタグには、一度ブロック要素の タグを入れ込んだ上でその中にインライン要素を書き込んでください。
関連するQ&A
- CSSのブロックレベルとインラインレベル
今CSSをやろうとしているのですが diplayタグがいまいちわかりません display:inline disilay:blockでは インラインレベル要素として使う ブロックレベル要素として使うと 参考書には書いてありました それでインラインとブロックレベル要素とはなんでしょうか？ そもそも要素自体よくわかってないのですが この二つの違いがよくわかりません
- ベストアンサー
- CSS
- CSSのdisplayプロパティについて
スタイルシートのdisplayについてなのですが、ブロックレベル要素をインラインで表示したり、インライン要素をブロックレベルで表示するものですよね？ ブロックレベル要素をインラインで表示する、というのはわかる気がするのですが、インライン要素をブロックレベル要素で表示する、というのはどういった時に、どういう理由で使用するのでしょうか？ 同じくリスト項目として表示する（list-item）、などもリスト項目として表示するなら、はじめからhtmlでリストを作っておけばよいのでは？と思うのですが・・・。 初歩的な疑問かもしれませんが、どう使うものなのかよくわからないので、教えていただけるでしょうか？ よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- ブロックレベル要素
こんにちは。ホームページをHTMLとCSSで作成しています。 W3Cのページで、スタイルシートを検証したのですが、 一つ一つのページにスタイルシートを記述して検証したときは、 合格が出たのですが、 外部スタイルシートにして検証すると、 ブロックレベル要素です。と、エラーがでてしまいました。 これはどういうことなのでしょうか？ 外部スタイルシートにするのとしないのとで記述方法に違いがあるのでしょうか？ また、どうすればいいのか教えていただけませんか？ 初歩的なことで申し訳ありませんが、 いろいろなところで調べても分からなかったので、 教えていただけるとありがたいです。 よろしくお願いします。
- 締切済み
- HTML
- 取得した要素がインライン要素かブロック要素かを判定する方法はないでしょうか？
下の様に取得した要素が、インライン要素かブロック要素かを判断する方法はないでしょうか？ document.onclick = function(evt){ var e = evt?evt.target:event.srcElement; for (i in e.parentNode.childNodes){ if(e.parentNode.childNodes[i].nodeType ==1 && e.parentNode.childNodes[i] != e){ if(e.parentNode.childNodes[i].style.display =="none"){ alert(e.parentNode.childNodes[i].tagName); /* ブロック要素かインライン要素かを判定したい！*/ /* インライン要素 */ e.parentNode.childNodes[i].style.display = "inline"; /* ブロック要素 */ e.parentNode.childNodes[i].style.display = "block"; }else{ e.parentNode.childNodes[i].style.display = "none"; } } } }
- ベストアンサー
- JavaScript
- 「インライン要素」と「ブロック要素」の違いは何
SPANタグの意味を調べたくてググったら http://www.htmq.com/html/span.shtml を見たのですが、 ｄｉｖタグと、SPANタグの違いがよくわからないのですが、 「インライン要素」と「ブロック要素」の違いは何でしょうか？
- ベストアンサー
- CSS
- ブロック要素を含むボックスを作るときの注意点は？
現在お店のHPを製作中です。 で、リストや<h>や<div>の入ったボックスを組むのに<p>タグでくくったのですが、うまくいきませんでした。 これはブロック要素をインライン要素でくくってはいけないということだったようです。 そこで、ボックスの中にはブロック要素はなるべく入れないほうがいいのでしょうか？それとも同じくブロック要素のタグでくくってやれば特に問題はないのでしょうか？ なにぶんこの件で初めてブロック要素・インライン要素という言葉を知りました＾＾； 他にも注意するところがあったら教えてほしいです。 よろしくお願いします。
- ベストアンサー
- HTML
- ブロックレベル要素の前後のスペース（余白）のことで
ブロック要素の場合は、前後に改行が入るのはわかりましたが、同じブロックレベル要素でもpタグは前後に余白？空白行？が入ります。divやaddressも同じブロックレベル要素なのに、こちらは段落の前後にあきが出ません。 ブロックレベル要素に共通なのは、前後で改行されるということだけで、前後に１行？あいてしまうかどうかは、要素によってマチマチということなのでしょうか。 ※Win7、IE8使用
- 締切済み
- HTML
- なぜbody要素はブロック要素しか内包できないのでしょうか？
初めて質問いたします。 XHTML 1.0で妥当なマークアップを勉強し始めたのですが、なぜか気になってしまったことがあります。 仕様ではbody要素はブロックレベルの要素しか内包できないとされていると学んだのですが、どうしてなのでしょうか。 body要素が直接インライン要素を含むと、どんな不都合があるのでしょうか。 こんな質問をすること自体、意味のないことなのかもしれませんが、なぜかその理由を知りたくてたまらなくなってしまいました（苦笑） 変な質問で申し訳ありませんが、お教えいただければ幸いです。 よろしくお願いいたします。
- 締切済み
- HTML
- 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
- display:block;を指定した置換要素の幅
通常のブロック要素であれば親要素の幅まで広がりますが、 置換要素の場合display:block;を指定しても幅が広がりませんよね。 置換要素をブロック要素と同様な幅算出させる方法ってありますか？ 具体的にはiPhone/Android向けのデザインでbuttonを親要素の横幅いっぱいにしたいのですが、 width:100%;だとbuttonにmarginを設定した場合にはみ出てしまうので使い勝手がよくないのです。 Firefoxの場合はwidth:-moz-available;を指定することで期待する挙動になるのですが、 webkitで似たようなことを実現する方法があれば教えてください！
- 締切済み
- CSS
お礼
回答ありがとうございました！参考にさせていただきました。