プロが教える店舗&オフィスのセキュリティ対策術

ブロックというものがよくわかってないのですが、スタイルシートでdisplay:block;とした場合、インライン要素でもブロックレベル要素になるということでしょうか?
タグによっては、「インライン要素を含むことはできません」などの制限のあるものがあると思いますが、スタイルシートでdisplay:block;として、インライン要素をブロックレベル要素にした場合はどうなるのでしょうか?
またそもそも、元々ブロックレベルである要素と、display:block;によってブロックレベルにしたインライン要素は、同じと考えてもいいのでしょうか?

A 回答 (4件)

> 元々ブロックレベルである要素と、display:block;によってブロックレベルにしたインライン要素は、同じと考えてもいいのでしょうか?



違います。HTMLの文法上のルールと、CSSのプロパティの性質は全く別の問題ですので、先ずはそこを切り分けて考えて下さい。

> スタイルシートでdisplay:block;とした場合、インライン要素でもブロックレベル要素になるということでしょうか?
> スタイルシートでdisplay:block;として、インライン要素をブロックレベル要素にした場合はどうなるのでしょうか?

HTML上インライン要素であるものは、あくまでインライン要素ですので、CSSでdisplayプロパティを変更したとしても、HTML文書としてそれぞれの要素に決められた文法に影響を与えるものではありません。
例えばインライン要素であるspanに対して"display: block;"を設定しても、HTMLのマークアップを下記の様にできるわけではないという事です。
【誤】
<span>内容<p>内容</p>内容</span>

"display: block;"は、あくまでその要素が生成するボックスの”表示形式”に”ブロック要素としての性質”を持たせるだけです。
例えば、下記の様なマークアップがあったとします:

<p>内容1<span>内容2</span></p>

CSSで何もdisplayを変更していなければ:
【表示結果】(改行されずに内容1と内容2が続く)
内容1内容2

となりますが、spanのdisplayプロパティをディフォルト値のinlineから変更して"display: block;"と設定してあれば:

【表示結果】
内容1(改行)
内容2

と、「あたかもブロック要素の表示の様に」なるという事です。
    • good
    • 1
この回答へのお礼

回答ありがとうございます!とてもわかりやすくて、htmlのブロックレベル要素とcssのblockについてがちゃんと整理できました!

お礼日時:2009/06/17 16:02

インライン要素の中にブロック要素を含めないと言うのはHTMLの構造の問題だと思います。


単体でインライン構造を持った要素の中に単体でブロック構造を持った要素(タグ)を入れるなと言うだけで、インライン構造の中にブロック構造を含んではいけないと言う問題ではないんじゃないかな。
    • good
    • 0
この回答へのお礼

回答ありがとうございました!参考にさせていただきました。

お礼日時:2009/06/17 16:03

スタイルシートでいくらブロック要素化しても構造上の問題なので、


解決しません。
インライン要素を含むことができないタグには、一度ブロック要素の
タグを入れ込んだ上でその中にインライン要素を書き込んでください。
    • good
    • 0
この回答へのお礼

回答ありがとうございました!参考にさせていただきました。

お礼日時:2009/06/17 16:03

 それほどHTMLのエレメントの勉強をしたわけではありませんが、おおよそdivになると解釈して十分だと思います。


 本来 block で無いものを block として扱いたい、そのために作られた機能と解釈すれば、インラインをブロック化できない方が変に感じるようになるかも知れません。

 ところで今検索していて気がついたのですが、新しくinline-blockというブロック回り込みが追加されていたんですね。
 何かの参考になるかも知れないのでURLを貼っておきました。

参考URL:http://builder.japan.zdnet.com/sp/css-firefox-sa …
    • good
    • 0
この回答へのお礼

回答ありがとうございました!参考にさせていただきました。

お礼日時:2009/06/17 16:03

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!