【CSS】勉強のため吹き出しを設定（コメント部分の設定）【1/4】

こんにちは、すのうビーです。
HTMLとCSSの勉強をするため、このブログの吹き出しの設定を行います。
勉強なので、分からないところは、調べて参考になるサイトを記載しています。
では、一緒に勉強していきましょう！
f:id:greenupf:20200404210541j:plain

勉強のための吹き出し設定の記事は、4記事を予定しています。
今回1回目の記事では、吹き出しのコメント部分をプログラミング？して行きます。
この記事がHTMLとCSSを勉強している人の参考になればと思います。
記事の内容は、完成イメージ（吹き出しのコメント部分）、CSSとHTML、ソースの説明、最後にまとめとなります。

完成イメージ（吹き出しのコメント部分）
CSSとHTML（吹き出しのコメント部分）
ソース（吹き出しのコメント部分）の説明
まとめ
おまけ（もぐりチェック）

完成イメージ（吹き出しのコメント部分）

｜コメント部分｜▷😊　が吹き出しの完成イメージになります。
今回の記事では、下の吹き出しコメント部分を設定して行きます。

こんにちは、すのうビーです。
吹き出しのコメント部分の完成イメージです❗

CSSとHTML（吹き出しのコメント部分）

CSSは次になります。

.entry-content .l-fuki {
  position: relative;
  width: calc(100% - 82px);
  box-sizing: border-box;
 -webkit-box-sizing: border-box;
  padding: 20px;
  border-radius: 6px;
  border: 2px solid #ddd;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
  background-color: #fff;
  z-index: 1;
  box-sizing: border-box;
}

ＨＴＭＬは次になります。

<p class="l-fuki">こんにちは、すのうビーです。<BR>吹き出しのコメント部分の完成イメージです❗</p>

ソース（吹き出しのコメント部分）の説明

記事内のl-fukiというクラスに・・・を設定する

記事内（.entry-content）で、l-fukiのクラスを使えるようにします。
・・・の部分はプロパティと値を書いていきます。

/*記事内のl-fukiというクラスに・・・を設定する*/
.entry-content .l-fuki {
・・・
}

記事内に、次のように書くとl-fukiのクラスの設定が利用できます。

<p class="l-fuki">こんにちは、すのうビーです。<BR>吹き出しのコメント部分の完成イメージです❗</p>

位置は

l-fukiのクラスの位置は、相対位置になります。
相対位置と絶対位置が分からない場合は、CSSのposition: absoluteとrelativeとは | UX MILKで確認ください。

 /*位置は、相対位置*/
  position: relative;

幅は

l-fukiのクラスの幅は、親要素の幅から82px小さくなります。
pxが分からない場合は、WEBサイトの横幅のサイズはいくつか良い？何pxが最適なのかを徹底解説！ | Liibercraft｜リーベルクラフトで確認ください。

 /*幅は、親要素の幅から82px小さい*/
  width: calc(100% - 82px);

paddingとborderを幅(width)と高さ(height)に含める

paddingとborderを幅(width)と高さ(height)に含めます。
どう含めるか分からない場合は、【CSS】box-sizing:border-boxの使い方｜効かない時は？で確認ください。
「-webkit-box-sizing」については、Androidでbox-sizingがきかなくて困ったのでメモ | WEB屋もどきで確認ください。

 /*paddingとborderを幅(width)と高さ(height)に含める*/
  box-sizing: border-box;
 /*Androidの場合は、「-webkit-box-sizing」で指定する*/
 -webkit-box-sizing: border-box;

他

ボックス（内側）の余白は、20px。ボックスの４つのコーナーの角丸は、6px。ボーダーは、2pxで一本線で灰色。*ボックスの影は、下に3px、ぼかし距離は8px、縮小2px、色は？。背景色は、白。重なりの順序は、1。

 /*ボックス（内側）の余白は、20px*/
  padding: 20px;
 /*ボックスの４つのコーナーの角丸は、6px*/
  border-radius: 6px;
 /*ボーダーは、2pxで一本線で灰色*/
  border: 2px solid #ddd;
 /*ボックスの影は、下に3px、ぼかし距離は8px、縮小2px、色は？*/
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
 /*背景色は、白*/
  background-color: #fff;
 /*重なりの順序は、1*/
  z-index: 1;

まとめ

見出しのカスタマイズが出来たので、今回は吹き出しのコメント部分の設定について、勉強しました。
ソースの一行一行をきちんと読んでいくと、次の箇条書きの内容が理解していないことが分かりました。

position: absoluteとrelative
pxの大きさ

勉強しよう。

リンク

引き続き吹き出しの設定をしますので、次回の記事が気になった人は、読者登録をお願いします。

おまけ（もぐりチェック）

-webkit-box-sizing: border-box;の記載がなぜ必要か分かりますか？
分からない人は、プロもぐらーです。
最後まで、読んでいただきありがとうございます。

プログラミング（Hello world）の勉強

プログラミングについて書きます