【CSS】勉強のため吹き出しを設定（〇部分の設定）【4/4】

こんにちは、すのうビーです。
HTMLとCSSの勉強をするため、このブログの吹き出しの設定を行いますの4回目の記事です。
4回で終わる予定でしたが、終われるか不安になってきました。
では、一緒に勉強していきましょう！
f:id:greenupf:20200404210541j:plain

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

完成イメージ（吹き出しの〇）
CSSとHTML（吹き出しの〇部分）
ソース（吹き出しの〇部分）の説明
- 〇の形を設定する
- 〇の位置を設定する
まとめ
おまけ（もぐりチェック）

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

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

こんにちは、すのうビーです。〇部分を設定します。

分かり辛いので〇部分に色を付けました

右の吹き出しです。

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

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

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

.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 60px;
  top: -6px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 5px #aaa;
  box-sizing: border-box;
}
.entry-content .l-fuki::after {
  right: -82px;
}
.entry-content .r-fuki::after {
  left: -82px;
}
@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;
  }
}

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

<p class="l-fuki">こんにちは、すのうビーです。<BR>▷部分です。</p>
<p class="r-fuki">こんにちは、すのうビーです。<BR>◁部分です。</p>

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

〇の形を設定する

記事内（.entry-content）で、l-fukiとr-fukiのクラスの後に
絶対配置で、内容はなく、幅60px、高さ60px、上-6px、角の丸み50％、
背景画像は縦横比は保持して最小サイズに拡大縮小して、中央に配置して、1回だけ表示する。
幅と高さを含めて、上下左右に灰色1pxの影、5pxぼかす。

.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 60px;
  top: -6px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 5px #aaa;
  box-sizing: border-box;
}

afterだから〇の位置はここになるのか🤔

border-radiusが分からない場合は
今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！ | Webクリエイターボックスで確認ください。

〇の位置を設定する

〇のはじめの位置

右端に移動する。

右に82px移動する。

〇の位置を設定するCSSは次になります。
右端、右に82px移動する。

}
.entry-content .l-fuki::after {
  right: -82px;
}

右の吹き出しの〇の位置を設定は次になります。

.entry-content .r-fuki::after {
  left: -82px;
}

left,rightが分からない場合は、top，left，right，bottom - 要素の配置位置を指定する | 日経クロステック（xTECH）で確認ください。

まとめ

吹き出しの〇部分の設定は、 border-radius: 50%を指定し、〇部分を作成しました。
吹き出しのコメント部分にも、border-radius: 6pxを指定し、角に丸みを付けています。
画像の設定は、5回目の記事となります。
では次回の【CSS】勉強のため吹き出しを設定（画像の設定）【5/4】をお楽しみに❗

リンク

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

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

コメントの文字数が多く、複数行で表示される場合、〇の位置はどこに表示されるか分かりますか？

分からない人は、プロもぐらーです。

1行XXXXX

複数行行行行行行行XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

さらにright: -82px;を指定しなかった場合、〇の位置はどこに表示されるか分かりますか？

1行XXXXX☝

複数行行行行行行行XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX☝

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

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

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