ブロックというものがよくわかってないのですが、スタイルシートでdisplay:block;とした場合、インライン要素でもブロックレベル要素になるということでしょうか?
タグによっては、「インライン要素を含むことはできません」などの制限のあるものがあると思いますが、スタイルシートでdisplay:block;として、インライン要素をブロックレベル要素にした場合はどうなるのでしょうか?
またそもそも、元々ブロックレベルである要素と、display:block;によってブロックレベルにしたインライン要素は、同じと考えてもいいのでしょうか?
No.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
と、「あたかもブロック要素の表示の様に」なるという事です。
回答ありがとうございます!とてもわかりやすくて、htmlのブロックレベル要素とcssのblockについてがちゃんと整理できました!
No.3
- 回答日時:
インライン要素の中にブロック要素を含めないと言うのはHTMLの構造の問題だと思います。
単体でインライン構造を持った要素の中に単体でブロック構造を持った要素(タグ)を入れるなと言うだけで、インライン構造の中にブロック構造を含んではいけないと言う問題ではないんじゃないかな。
No.1
- 回答日時:
それほどHTMLのエレメントの勉強をしたわけではありませんが、おおよそdivになると解釈して十分だと思います。
本来 block で無いものを block として扱いたい、そのために作られた機能と解釈すれば、インラインをブロック化できない方が変に感じるようになるかも知れません。
ところで今検索していて気がついたのですが、新しくinline-blockというブロック回り込みが追加されていたんですね。
何かの参考になるかも知れないのでURLを貼っておきました。
参考URL:http://builder.japan.zdnet.com/sp/css-firefox-sa …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS display: flex; と flex の違い 1 2022/04/25 20:52
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- JavaScript その要素がjQueryでremove()済みか確認する最も簡単な方法 2 2023/04/05 20:26
- その他(ニュース・時事問題) 国葬に外国要人来ますか?(ゆるゆる警護の日本) 8 2022/07/15 07:36
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS 分数が正常に表示されない。 6 2022/05/09 18:53
- その他(ゲーム) RPGを一気につまらなくするには? 7 2023/03/10 19:39
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
含む含まないという概念自体の...
-
smallにtext-allignが効かない
-
2行にしたい要素、改行か分割...
-
border: noneでボタンの境界線...
-
「諸要素」とはどういう意味で...
-
HTMLで <p>~</p>内で2回以...
-
HTMLです
-
C言語について。
-
tdに対してmin-heightの定義、...
-
C言語線形リストの問題です
-
BODY内にCSS「a:hover」を使いたい
-
input type="hidden"で取得した...
-
質問1.
-
CSSのセレクタに指定するbodyと...
-
改行ほどは行かないけど、若干...
-
拡大してもはみ出さないコーデ...
-
【CSS】imgタグを、親要素の幅...
-
HTMLです 四角みたいにして中に...
-
html タグの閉じスラッシュ前の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
還暦を過ぎた方々に質問です。
-
【ヒトの神秘】美男美女から何...
-
質問1.
-
含む含まないという概念自体の...
-
smallにtext-allignが効かない
-
角丸画像の背景色を透明にした...
-
tdに対してmin-heightの定義、...
-
改行ほどは行かないけど、若干...
-
html タグの閉じスラッシュ前の...
-
テキストボックスの中にリンク...
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
タグは大文字と小文字どちらが...
-
CSSで改行後の行間調整
-
H1タグを画像にしたい
-
2個のFormを横並びにしたい
-
textareaの幅を画面と合わせたい
-
border: noneでボタンの境界線...
-
CSS:overflow要素の印刷について
-
HTMLの・要素・属性・属性値 は...
おすすめ情報