こんにちは、すのうビーです。
HTMLとCSSの勉強をするため、このブログの吹き出しの設定を行いますの2回目の記事です。
今回も勉強なので、分からないところは、調べて参考になるサイトを記載しています。
では、一緒に勉強していきましょう！
今回2回目の記事では、吹き出しのマージン（領域間のスペース）をプログラミング？して行きます。
この記事がHTMLとCSSを勉強している人の参考になればと思います。
記事の内容は、完成イメージ（吹き出しのマージン）、CSSとHTML、ソースの説明、最後にまとめとなります。
完成イメージ（吹き出しのマージン）
今回の記事では、下の吹き出しマージン部分を設定して行きます。
｜コメント部分｜▷😊 が吹き出しの完成イメージになります。
こんにちは、すのうビーです。
右が自動 左が0のマージンです
こんにちは、すのうビーです。
右が0 左が自動のマージンです
CSSとHTML（吹き出しのマージン部分）
吹き出しのコメント部分のCSSについては、こちらの1回目の記事をご確認ください。www.snowbp.com
マージン部分のCSSは次になります。
.entry-content .l-fuki { margin: 20px auto 36px 0; } .entry-content .r-fuki{ margin: 20px 0 36px auto; }
ＨＴＭＬは次になります。
<p class="l-fuki">こんにちは、すのうビーです。<BR>右が自動 左が0のマージンです</p> <p class="r-fuki">こんにちは、すのうビーです。<BR>右が0 左が自動のマージンです</p>
ソース（吹き出しのマージン部分）の説明
マージンを設定する
記事内（.entry-content）で、l-fukiのクラスのマージンは
上が20px、右が自動、下が36px、左が0です。つまり、左寄せです。
/*左寄せ*/ .entry-content .l-fuki { margin: 20px auto 36px 0; }
記事内（.entry-content）で、r-fukiのクラスのマージンは
上が20px、右が0、下が36px、左が自動です。つまり、右寄せです。
/*右寄せ*/ .entry-content .r-fuki { margin: 20px 0 36px auto; }
マージンが分からない場合は、margin－スタイルシートリファレンスで確認ください。
まとめ
マージンを指定することで、領域間のスペースを指定できることが分かりました。ソースの一行一行をきちんと読んでいくと、次の箇条書きの内容が理解していないことが分かりました。
- 左寄せにしたい場合は、左が0右が自動
- 右寄せにしたい場合は、右が0左が自動
- 左とは👈、右とは☞
勉強しよう。
リンク
引き続き吹き出しの設定をしますので、次回の記事が気になった人は、読者登録をお願いします。
おまけ（もぐりチェック）
- 右 が0 左が０のマージンを指定すると？
- 右が自動 左が自動のマージンを指定すると？
- 右が0 左が自動のマージンを指定すると？
分からない人は、プロもぐらーです。
こんにちは、すのうビーです。
右 が0 左が０のマージンです（左優先？）
こんにちは、すのうビーです。
右が自動 左が自動のマージンです（中央？）
こんにちは、すのうビーです。
右が0 左が自動のマージンです（右寄せ）
最後まで、読んでいただきありがとうございます。
