このブログでは、WordPerssのエディターの自動整形機能をオフにしてしまっています。
※自動整形機能の切り方はこちら
ので、改行にはいちいち<br>タグを入れる必要があるわけですが。
それだと見難いので、実は、手っ取り早く<pre>タグ(整形済みテキスト)で括ってしまうというチート技をよく使っていたのですが。
<pre>～</pre>タグの中に<blockquote>を入れるとレイアウトが崩れる事が判明。
逆は大丈夫
つまり、<blockquote>～</blockquote>の中に<pre>～</pre>が入ってるのは問題ない。
ほとんどが大丈夫な組み合わせだったので問題はほぼないと思われますが、まれに逆をやってしまってる記事もあり。。。
色々とスタイルシートを弄ってみたものの原因が分からず・・・
で、検索してみたら、どうやら、そもそも、PREタグの中にはブロック要素を入れてはいけないものだったようですね、知りませんでした。
<pre>～</pre>の中に入れてよいのはインライン要素のみ
（「a」「em」「strong」「span」「q」など）
（※HTML5以降ではルールが変更になっているようです、記事末尾の追記参照）
まず、基本的に「インライン要素の中にはブロック要素を入れてはいけない」というルールがあるようです。しかし、<pre>タグはブロック要素・・・
どうやら、ブロック要素の中でも、<pre>タグと<p>タグの中には、「インライン要素しか入れてはいけない」というルールがあるようです。
さらに、<blockquote>～</blockquote>の中に直接インライン要素を入れてはいけないというルールもあるとか・・・？（blockquoteの中にインライン要素を入れる場合はブロック要素で囲う必要がある。つまり、blockquoteの中にpreを入れるのはOKだけど、preの中にblockquoteを入れるのはNGという事ですね。）
・・・・ややこしいわ(^^;)
（もしこれらのルールに反した書き方をすると、どのような表示になるかはブラウザによって異なる、と言う感じでしょうか。）
もし、整形済みテキストを使用して、かつ中にブロック要素を入れたい場合には、<div>などの一般要素に、スタイルで「white-space:pre;」「white-space:pre-wrap;」「white-space:pre-line;」を指定してやれば良いのだそうで。
あるいは<pre>タグをブロック要素の前に必ず閉じるか。
※white-spaceの詳しい使い方はこちらをどうぞ
試しに<pre>に無理やり「display:block;」とか「display:inline-block;」とかやってみましたが、結果は変わらず。
インライン要素を無理やりブロックにしようとしてもできません
中にブロック要素を入れたかったら、ブロック要素で領域を指定しなさい
ってことなんですね。
確かに、<pre>の代わりに<div style="white-space:pre-wrap;">を使ってみたら、レイアウトの崩れも発生しませんでした。
いちいちインラインで書くのが面倒なので、「style.css」に記述して、クラス指定すれば良いですね。
（実際に使ってみると、<div>にwhite-spaceを設定しても、今度は間に挟むブロック要素のマージンのコントロールがしにくくなるので、結局ブロック要素の前で一旦divを閉じたくなる事も多いですね。きちんと閉じることを忘れないならpreで構わないですね。ブログのテンプレート等のレイアウトで使う場合はpreは不適切ですね。）
追記
※HTML5では、ブロック要素とインライン要素の区別は廃止されたそうです。（DISPLAYで要素を指定可能）
つまり、「インライン要素の中にブロック要素を入れてはならない」という考え方はHTML5以降は特に考慮する必要はないようです。
ただし、古い規格との互換性を考え、「初期値」がこれまでのタグのインライン／ブロックの属性を踏襲しているので、特に指定なしで使う場合は従来通りの使い方をしておいたほうが無難ということですかね。
※上で<pre>に「display:block;」を指定しても変わらなかったのは、<PRE>側の問題ではなく、<blockquote>側の装飾をなしにすると問題がなくなりました。
しかし、DIVでやると装飾があっても問題なしなので・・・結局、謎のまま・・・・(´ェ｀;)
※原因解明できました
⇒ https://pandaignis.com/wp/54501.html
コメント