【CSS】勉強のため吹き出しを設定（画像の設定）【5/4】

こんにちは、すのうビーです。
HTMLとCSSの勉強をするため、このブログの吹き出しの設定をしています。
吹き出し設定の記事は4回を予定していましたが、1回増えて今回の5回目の記事が最後になります。
では、一緒に勉強していきましょう！
f:id:greenupf:20200404210541j:plain

今回5回目の記事では、吹き出しの画像をプログラミング？して行きます。
この記事がHTMLとCSSを勉強している人の参考になればと思います。
記事の内容は、完成イメージ（吹き出しの画像）、CSSとHTML、ソースの説明、CSSメディアクエリ、最後にまとめとなります。

完成イメージ（吹き出しの画像）
CSSとHTML（吹き出しの〇部分内の画像）
ソース（吹き出しの〇部分内の画像）の説明
- 〇部分内の画像
CSSメディアクエリ
- @media screen
まとめ
おまけ（もぐりチェック）

完成イメージ（吹き出しの画像）

今回の記事では、下の吹き出し〇部分内の画像を設定して行きます。

こんにちは、この記事を書いているすのうビーです。

吹き出しの背景画像を変更することで、コメントする人を変えることが出来ます。

こんにちは、もぐりのプログラマーのプロもぐらーです。

CSSとHTML（吹き出しの〇部分内の画像）

今回の記事が吹き出しについて5回目の記事になりますが、
4回目の記事までで、吹き出しのコメント部分、マージン、▷と〇の設定について書いています。
設定方法をイメージ出来ない人は👇の記事を読んでください。

では、早速ですが〇部分内の画像のCSSは次になります。

.snowbp::after {background-image:url(すのうビーの画像URL);}
.promogrer::after {background-image:url(プロもぐらーの画像URL);}

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

<p class="l-fuki snowbp">こんにちは、この記事を書いている<u>すのうビー</u>です。</p>
<p class="l-fuki promogrer">こんにちは、もぐりのプログラマーの<u>プロもぐらー</u>です。</p>

ソース（吹き出しの〇部分内の画像）の説明

〇部分内の画像

.snowbpクラスに、背景の画像をすのうビーの画像を指定する。

.snowbp::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/g/greenupf/20200426/20200426181727.jpg);}

l-fukiクラスとsnowbpクラスを指定すると、左の吹き出しで、すのうビーの画像になります。

<p class="l-fuki snowbp">こんにちは、この記事を書いている<u>すのうビー</u>です。</p>

👇こんな感じの吹き出しが表示されます。

こんにちは、この記事を書いているすのうビーです。

CSSメディアクエリ

@media screen

メディアのタイプがscreenかつ478px以上の時に、吹き出しのサイズを変更するCSSになります。
初心者プログラマーとしては、スマフォ/パソコン/タブレットなどの画面サイズの違いにより、表示を変えているということがあるということを理解すれば良いと思います。

@media screen and (min-width: 478px) {
  .entry-content .l-fuki::after,
  .entry-content .r-fuki::after {
    width: 80px;
    height: 80px;
  }
  .entry-content .l-fuki,
  .entry-content .r-fuki {
    width: calc(100% - 106px);
  }
  .entry-content .l-fuki::after {
    right: -106px;
  }
  .entry-content .r-fuki::after {
    left: -106px;
  }
}

CSSでメディアクエリ(Media Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。 | WEMO

難しい😅

まとめ

CSSの勉強のため、吹き出しの設定を行いました。
吹き出しのCSSを確認してみると、position、margin、border-radius、beforeなどなど、CSSの理解度を確認することが出来ると思いますので、
WEｂ系のプログラマーを目指している人は、一度じっくり見てみては如何でしょうか。
ちなみに、CSSのソースは、👇のサイトを参考にさせていただきましたので、紹介します。
www.notitle-weblog.com
では、吹き出しの設定をして分かったことです。

吹き出しは、コメント▢・ちょぼ▷・画像の丸〇・画像😃で構成されている
吹き出しのちょぼ▷は、実は□を回転させている
吹き出しには、２つのクラスを使っている

CSSの詳細について、書くと細かくなるので、省きます。

リンク

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

吹き出しを表示するためには、右/左の吹き出しの種類と画像の２つのクラスを指定します。
今回の吹き出しのCSSではクラスを３つ以上設定することは無いと思いますが、次のように４つのクラスを指定した場合は、どのように表示されるか分かりますか？

<p class="l-fuki promogrer snowbp r-fuki">左の吹き出し　プロもぐらーの画像　すのうビーの画像　右の吹き出し</u>です。</p>

後の記載が優先されました！

最後まで、読んでいただきありがとうございます。

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

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