FC2ブログでブログカードを掲載する際の注意点

div に入れ子した要素の margin が（？）大きくなる

こんにちは。
頻繁にお世話になり恐縮です。

検証用の記事を投稿したのでご覧ください。

aki 氏案を用いて順序を入れ替えている記事　>https://bit.ly/3IXBsVE
順序を入れ替えていない記事　>https://bit.ly/3XGyCbM

div 要素の中に入れ子した各種要素に指定した margin が、ふだんより大きくなってしまうようなのです。
入れ子した際に margin の指定が相殺されることがあるとか見たのでしばらく検証してみたのですが、相殺されているというよりは、なんだかよけいな margin が入れ子の bottom に追加されているような･･･？
これを改善する方法はあるでしょうか。


余談ですが、この件を知るまで、ブロック要素の中にブロック要素を入れ子できないと思っていました。
実際には、div 要素の中に p も h も入れることができるんですね。
普段、レイアウトされたひとかたまりの画像を挿入するのに使っている div が p から弾き出されるのを見て、不可能なのだと勘違いしていました。
p の中に div を入れ子できないだけで、他はだいたい可能なんですね。

To Mimizkさん

こんばんは ('0')/

marginの相殺が発生するのは兄弟要素間のみです。
参考記事: marginが消える？！な件を解消する方法
https://vanillaice000.blog.fc2.com/blog-entry-1105.html

そして参考記事で少し触れている通り、親にdisplayのflexが指定されている場合その子要素はmarginの相殺が起こりません。
いくつか例をあげますので感覚で理解して頂くと良いかもです。

【flex自体の兄弟】

<div style="display: flex; margin: 10px 0;"></div>
<div style="display: flex; margin: 10px 0;"></div>

2つのdivはそれぞれdisplay:flexが指定されている兄弟です。この場合のdiv同士の距離は 10px です。兄弟なので相殺が起こります。


【flexの中にp要素の兄弟(flexの向きはcolumn)】

<div style="display: flex; flex-flow: column;">
<p style="margin: 10px 0;">あいうえお</p>
<p style="margin: 10px 0;">かきくけこ</p>
</div>

p要素同士の距離は兄弟ですがflex子要素なので相殺が起こらず20pxです。

【flexの高さがどうなるか】

上と同じ条件で親要素の高さがどうなるか(pはdivに変更)

<div style="display: flex; flex-flow: column;">
<div class="div1" style="margin: 10px 0; width: 50px; height: 50px;"></div>
<div class="div2" style="margin: 10px 0; width: 50px; height: 50px;"></div>
</div>

この場合の親(flex)の高さは140pxです。
50px + 10px + 10px + 50px + 10px + 10px = 140px
(.div1の高さ) + (.div1の上margin) + (.div1の下margin) + (.div2の高さ) + (.div2の上margin) + (.div2の下margin) = 140px

子要素で相殺が行われないためmarginも内包要素の高さとしてカウントされます。

-----
flexを使う場合はこの特徴を理解しないといけないので、ちょっと敷居が高いといえば高いかもですね (∵`)
最初に注意点としてお伝えするべきでした。ごめんなさい。


-----
div要素はhtml, body, head, 親子要素が確定している要素など 以外のほとんどの要素を入れ子できますよ。p要素は逆で入れ子できる要素が厳格に限定されて(どれも厳格ではありますがp要素はブラウザ補完が働くためミスが如実に現れる要素です)いますので、今回のようなブロック分けや装飾目的の場合は迷わずdiv要素の利用をおすすめします(p要素は『文章段落』での使用のみ、装飾用途には絶対に用いないという意識を持つのが大事です)

To vanillaice (Akira)さん

一度で理解できずすみません。
私が不思議に思っていたのはこの部分です　>https://bit.ly/3QMqy70

テスト投稿の記事の各要素に全て style="border: solid 1px; " を加えました。
これでそれぞれの要素の大きさが見えるようになったのですが･･･。

色付けした部分のうち、青・緑・紫は左右で一致をしています。
私が CSS で class 指定した margin top の量そのままなので、「うんうん」という感じです。
問題は、左側（aki 氏案を利用した投稿）にだけある、オレンジ・黄色の部分です。

まずオレンジの部分。
div 要素（親）の上下にだけ出てきたこの margin はいったい何なのでしょう？
私はこんな物を指定したつもりはないのですが、上下に全く同じ大きさで追加されています。

次に黄色の部分。
これは、緑色の部分と大きさが似ていますが、黄色の方が若干大きいです。
緑の部分とだけでなく、オレンジ＋紫 とか、紫 x2 や オレンジ x2 などとも合致しない大きさです。
こうなるともう全然知らない幅なので、何がどうなっているのか予想もつけられません。


特にこの黄色とオレンジの部分がなぜ生じてしまうのかという点について、Akira さんの最初のお返事が答えになりますか？
であればもう二度・三度、熟読してみなければいけません。
現在のまでの理解では、「･･･これだと私の狙ったとおりになりそうだけどな」という感触で･･･。
黄色とオレンジはいったいどこから出てきたんでしょう。

To vanillaice (Akira)さん

大変不躾ですが横から失礼致します。m(__)m

> これを改善する方法はあるでしょうか。

安直なんですが、順番通りに記述したものと頭を同じ位置にするには、親である .inner-contents の margin が 20px 0 なので、子供である flexアイテム側にネガティブmargin を付ければ良いと思うのですが、他にも方法は有りますか？

<div class="innner-contents"> ← 親
<div style="display: flex; flex-flow: column; margin-top: -20px;"> ← 子

（不勉強でスミマセン。いつも学習させて頂いております。有難うございます。）

To Mimizkさん

お疲れ様です ('0')/

> 青・緑・紫は左右で一致をしています〜

まず、雛形の通りにコードを書くようにしてくださいね。でないと難しいmargin調整がさらに難しくなります。

×
<div style="display: flex; flex-flow: column;">
<p style="order: 2;">flex子要素</p>
<p style="order: 3;">flex子要素</p>
<figure style="order: 1;">ブログカード</figure>
</div>

✔
<div style="display: flex; flex-flow: column;">
<div style="order: 2;">
<p>文章
<p>文章
<p>
.
.
.
</div>
<div style="order: 1;">
<figure class="blogcard">ブログカード</figure>
</div>

・ p要素をflexの直系子要素にしない
・ order: 3 は不要(200文字を超えたと思う時点でflexを終了させてください。でないと最終要素までflexの影響を受け、思うようなスタイリングにできない可能性があります。さらにできれば『追記』を活用してください)

-----
今の状態だとflexの直系子要素は3つあります。
① 1番目記述
② 2番目記述
③ 3番目記述(ブログカード)

①②③はそれぞれ兄弟関係ですが、flexの子要素なので marginは相殺されません。
親とのmarginも相殺されません。
(通常記事の方にオレンジの余白が無い点については参考記事の「margin消失と思ってしまうパターン」を熟読してください)

https://blog-imgs-156.fc2.com/v/a/n/vanillaice000/sc_flex_mn.png

-----
どうするか、なんですけども、akiさんのアイデア「ネガティブマージン」はあまりおすすめできません。記事部位のmarginが必ずしもmarginとは限りませんし、marginだとしても必ず20pxとは限りませんので、テンプレート変更時に困ってしまう可能性があります。

なので、flex内の場合はブログカードのmarginを減らす(style属性で指定)という単純な方法をおすすめします。

あとはアドバイスになります。
marginの確認をする際にはflexでもそうでなくてもborderをつけるという方法は避けた方が良いですね。borderにはもともと「margin相殺を阻害する・防ぐ」という特徴がありますし、子要素のmarginが親要素にも影響するのだという点も見落としてしまいます。

例えばオレンジの部位はまるで親要素についているように見えますが実際には子要素の方についているmarginです。
margin調整についてはmarginの仕組みを熟読して理解する、という方法しかありませんので、なんとか頑張ってくださいね ^^;

子要素内(本来はpではなくdivで作成するようにしてください)にp要素が複数入る場合は、最初のp要素は margin: 0; それ以降は margin-bottom: 0; を指定すると良いですね(最後のp要素のmargin-bottomをどうするかはその時々で変わるかもしれません)

くれぐれも理想は

本文は

<div style="display: flex; flex-flow: column;">
<div style="order: 2;">
<p>文章200文字以上</p>
</div>
<div style="order: 1;">
<figure class="blogcard">ブログカード</figure>
</div>

残りは全て追記へ

という形です。追記をうまく利用するとOGPの操作が非常に楽になります。
(内緒さんの特殊な希望を優先される場合にはOGP操作はできません)

あともう一つアドバイスです。雛形がある場合に要素名を置き換えない

例)
<div>文章</div>

という何らかの装飾のついたhtmlがあるとします。そして文章にはp要素を用いたいという場合はdivをpに置き換えてしまうのではなく

<div>
<p>文章</p>
</div>

とこのようにしてください。変更して問題無い場合もありますが、原則として「やらない」を心がけた方が良いです。特にdiv要素とp要素は性質が全く違いますので置き換えは避けましょう ('0')/

To vanillaice (Akira)さん

突然ですが、できました！　>https://diffuseness.blog.fc2.com/blog-entry-1044.html
指示されてない方法をするな、と言われた後ですぐ指示されてない方法をして偉い顔ができませんが･･･。

きっかけは Aki さんのお返事の中にありました。
「.inner-contents に margin 20px が設定されている」という部分です。
「いったいどこから出てきたんだ」という私の疑問に的中する回答でした。ありがとうございました。

相殺されたり、されなかったり。
それはよいのですが、そもそもそんな margin を要求した覚えはないぞ、というのが私の疑問でした。
Akira さんの説明でも、ないものが生じるのではなく、あるべきものが現れたのだという筋でした。

本件内容でいえば、特に div の前後に現れた margin です。
テンプレートのスタイルシートに .div の項目がないか探したりもしました。
私が見つけようとしていたのは .inner-contents だったわけです。

.inner-contents と .inner-contents p の margin をどちらも 0 にしました。
Akira さんはご承知の通り、私は、接続する前後要素の組み合わせに応じた margin 設定を CSS にあらかじめ書き込んでいて、記事の文章を作成する際に class 指定でいちいち呼び出して margin を与える書き方をしています。
だから、要素そのものに与えられている margin は、基本的にほとんど全て不要なんです。不要どころか、今回のように挙動が不明になります。
だからこれまでもそうした要素づきの margin は逐次ゼロにしてきたのですが、まだ残っていたとは･･･。


Akira さんはもちろん、Aki 様には重ね重ね助けていただきありがとうございました。

To vanillaice (Akira)さん

こんばんは。ご回答有難うございます。

> 記事部位のmarginが必ずしもmarginとは限りませんし、marginだとしても必ず20pxとは限りませんので、テンプレート変更時に困ってしまう可能性があります。

確かにその通りですね。余白はmarginであるとは言い切れないですし、ずっと同じテンプレートとは限りませんし。(^^;
テンプレートが変わっても記事の見え方が変わらないようにインラインでスタイルを入れるなら、テンプレートに関係無い部分（この場合はブログカード）の方を調整するのが良いですね。
有難うございました。ホントにmarginは奥が深い…私も気を付けようと思います。

Mimizkさん、横から大変失礼致しました。何かの気付きになれて（？）良かったです。^^;

To Mimizkさん(終了のご報告)

こんばんは ('0')/

flexの挙動が継承するのは子要素までなのでdivを子要素、pやfigureを孫要素にするのがmarginの調整はしやすいはずですが、方針は人それぞれですし、伝えるべき点は伝えましたのであとは自己管理でお願いします。

あとは「自分でmarginを付けられない何か」が掲載された際に記事領域のmargin無しが影響することがあるかもしませんので、その点についても覚書をするなどしておくと良いと思います :)

To akiさん

こんばんは ('0')/

いつもご協力をありがとうございます :)
marginは難しいですよね。「最も難しいCSSは何か」と聞かれたら迷わず「margin」って答えます(笑)
そしてネガティブマージンはできるだけすすめないことにしてる ^^;