HTML CSSをコーディングしていると、レイアウトが思ったように構成されないことが

よくありました。

最近、ゼロチョさんの開発者トーク動画を見て、CSSの基本について調べることにしました。

- ブロック要素、インライン要素、マージンと整列を理解したいです。

経験的に知っていることですが、整理しておく必要があると感じています。

■ cssを変更する必要があるのですが、経験的にあれこれ適用して目に見えるように実装すると、レスポンシブデザインで問題が発生したり、将来の保守が複雑になります。

1. Normal Flow

- 特に考えることはありません。すべての要素は上から下へ、左から右へ配置されます。

* ドゥルミスで文章を作成するときに、htmlタグを貼り付けると消えてしまうのですが、解決方法をご存知ですか？;;

 <div>
     <p>最初の段落</p>
     <p>2番目の段落</p>
     <span>インライン要素1</span>
     <span>インライン要素2</span>

- pタグで2つのブロックが生成され、spanタグは1行で描画されます。

 最初の段落
 2番目の段落

2. BFC (Block Formatting Context)

- 主にレイアウトを構成する際に使用されます。（ブロックを構成し、その中にインラインを構成します。）

- ブロックレベル要素が積み重ねられる方法です。

- ブロックレベル要素は次のとおりです。

<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table>, <form>

- 要素内の内容の長さに関係なく、親要素の全体の幅を占めます。（1行）

- ブロックの中にブロックを挿入したり、インライン要素を挿入したりできます。

- width、height、margin、paddingを設定できます。

 <div style="padding :10px;"> 
     <h1>タイトル</h1>
     <p>短い段落です。</p>

- divタグの中に2行が生成されます。

- BFCが生成されるのは次のとおりです。その都度確認すれば大丈夫です。

• floatプロパティがnoneでない場合
• positionがabsoluteまたはfixedの場合
• displayがinline-block、table-cell、table-caption、flex、inline-flex、grid、inline-gridの場合
• overflowがvisibleでない場合など
  
  

3. IFC (Inline Formatting Context)

<p>
    こんにちは！<strong> ドゥルミス </strong> 2番目の記事です！
    <span style="color: pink;">いいね</button>ボタンを押してください。

- ブロック要素の中で構成されます。（行単位X）

- widthとheightを直接設定できません。（内容の大きさ分だけ占めます。）

- 水平paddingとmarginのみ適用できます。

- インライン要素の中にインライン要素のみを含めることができます。

<span>, <a>, , <img>, <input>など

ところで、いつ使うのでしょうか？

- bfcは、floatの相互作用やマージンの相殺を処理するために使用されます。

1. floatの相互作用

- 子要素に自由奔放なスタイルを適用すると、親要素は包み込みません。

（float、position absolute、fixed、display inline-blockなど...）

- このとき、親要素にbfcを与えてレイアウトを構成します。

（親タグにdisplay: inline-block、overflow: auto、float: leftなどを適用します。）

<div class="親" style="display: inline-block;">
    <div class="子" style="float: left;">...</div>

2. マージンの相殺

- cssでは、隣接する2つのタグの上下のマージンが重なります。

例）以下の2つのdivタグ間の上下の隙間は150pxではなく100pxです。

<div style="margin-bottom: 100px;">
..
</div>
<div style="margin-top: 50px;">
,,

- 上記の場合、2つのタグ間に新しいbfc要素を追加します。

<div style="margin-bottom: 100px;"></div> 

<div style="overflow: auto;"></div> <!-- 新しいbfc-->

ps. ドゥルミスのhtmlをコピーする方法をご存知ですか？;;