- ベストアンサー
「インライン要素」と「ブロック要素」の違いは何
SPANタグの意味を調べたくてググったら http://www.htmq.com/html/span.shtml を見たのですが、 ｄｉｖタグと、SPANタグの違いがよくわからないのですが、 「インライン要素」と「ブロック要素」の違いは何でしょうか？
- RIBWAIXBJ
- お礼率87% (49/56)
- CSS
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
HTMLの仕様書を熟読されることを、お薦めします。 一般的に、ブロック要素の、子要素としてインライン要素を、記述できるが、インライン要素の中に、ブロック要素は、記述できない！ <div> <p> <span class="#"></span> </p> </div> と、いうように記述するが、 <span class=#"><p></p></span> とは、記述できない！ HTMLは、文書構造を正しく記述することが基本です。
その他の回答 (1)
- notnot
- ベストアンサー率47% (4848/10262)
インラインは、「行の中で」という意味です。ブロックは、「かたまり」という意味です。 要素を行の中で表示するのか、長方形のかたまりとして表示するのかの違いです。 長方形の「かたまり」（ボックス）は、前後で改行されますが、その周囲に余白を付けたり、線で囲んだりすることが可能です。
お礼
ご回答ありがとうございます。
関連するQ&A
- インライン要素ってなんですか？
最近ＣＳＳを勉強し始めたばかりなのですが、その中で span要素は汎用性の高いインライン要素と説明があったのですが、 そのインライン要素というのはどうゆう意味なのでしょうか？そのサイトにも説明はしてあったのですが、いまいち理解できませんでした。 解りやすく説明していただけるとありがたいです。 よろしくお願いいたします。
- ベストアンサー
- HTML
- ブロック要素を含むボックスを作るときの注意点は？
現在お店のHPを製作中です。 で、リストや<h>や<div>の入ったボックスを組むのに<p>タグでくくったのですが、うまくいきませんでした。 これはブロック要素をインライン要素でくくってはいけないということだったようです。 そこで、ボックスの中にはブロック要素はなるべく入れないほうがいいのでしょうか？それとも同じくブロック要素のタグでくくってやれば特に問題はないのでしょうか？ なにぶんこの件で初めてブロック要素・インライン要素という言葉を知りました＾＾； 他にも注意するところがあったら教えてほしいです。 よろしくお願いします。
- ベストアンサー
- HTML
- ブロックレベル要素とdisplay:block;
ブロックというものがよくわかってないのですが、スタイルシートでdisplay:block;とした場合、インライン要素でもブロックレベル要素になるということでしょうか？ タグによっては、「インライン要素を含むことはできません」などの制限のあるものがあると思いますが、スタイルシートでdisplay:block;として、インライン要素をブロックレベル要素にした場合はどうなるのでしょうか？ またそもそも、元々ブロックレベルである要素と、display:block;によってブロックレベルにしたインライン要素は、同じと考えてもいいのでしょうか？
- ベストアンサー
- CSS
- <DIV>タグは何の略ですか？
何の略か教えてください。 あと、<SPAN>タグはどういう意味ですか？英語の「期間」とかいう「span」と関係していますか？ もしよければ、インライン要素とブロック要素の違いを簡単に説明していただければ嬉しいです。
- ベストアンサー
- HTML
- ２つのブロック要素をまとめてインライン表示したい。
２つのブロック要素をまとめてインライン表示したい。 この質問タイトルが適切かは全く自信がないのですが、例として次のようなHTMLがあるとします。 <body> <div class="container"> <div class="title"> <h1>「タイトル」</h1> </div> <div class="subtitle"> <p>「サブタイトル」</p> </div> </div> </body> 「タイトル」のすぐ横に「サブタイトル」が表示されるようにしたいと思っています。 /* 表示イメージ */ 「タイトル」 「サブタイトル」 ただし、表示幅に対してタイトルが長いと、タイトルが複数行に渡って表示されます。 この場合もタイトルの表示が終わった直後に「サブタイトル」を表示したいです。 /* 表示イメージ */ 「非常に長～～～～～～～～～い タイトル」 「サブタイトル」 これを実現するにはCSSでどのように記述したらよいのでしょうか？
- ベストアンサー
- 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
- 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
- CSSのブロックレベルとインラインレベル
今CSSをやろうとしているのですが diplayタグがいまいちわかりません display:inline disilay:blockでは インラインレベル要素として使う ブロックレベル要素として使うと 参考書には書いてありました それでインラインとブロックレベル要素とはなんでしょうか？ そもそも要素自体よくわかってないのですが この二つの違いがよくわかりません
- ベストアンサー
- CSS
- <p>要素をインライン要素にしての右寄せ
<p>要素をインライン要素にしての右寄せ 【以下、HTML】 .text{ font-size:12px; font-weight:normal; margin:0px; padding:25px 0px 0px 35px; } <div class="text"> <img src="-" style="vertical-align:-2px;margin:0px 10px 10px 15px;"><a href="-">リンク</a><p style="text-align: right;display:inline;">あいうえお</p><br></div> 上記の「あいうえお」の部分を画像やリンクと並列したく、インライン要素で右寄せしたいんですがどうしたらいいでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- spanでグループ化して二段組
二段組をしたいときはdivでグループ化して floatを使用し、回り込みさせて二段組をするのが多いですが divでグループ化するのではなく、spanを使ってグループ化し 二段組することも出来ますか？ spanは「divのインライン要素版」といわれますが、 そしたらブロック要素の改行になるdivとは違い、回り込みの floatを使わなくてもspanで二段組が出来ますよね？ 回答よろしくお願いします。
- ベストアンサー
- HTML
お礼
ご回答ありがとうございます。