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

こんにちは、すのうビーです。
HTMLとCSSの勉強をするため、このブログの吹き出しの設定を行いますの3回目の記事です。
今回も勉強なので、設定値を変えて、表示のされ方を確認したいと思います。
では、一緒に勉強していきましょう！
f:id:greenupf:20200404210541j:plain

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

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

完成イメージ（吹き出しの▷ちょぼ）

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

こんにちは、すのうビーです。▷部分を設定します。
分かり辛いので▷部分に色を付けました

右の吹き出しです。こちらも◁部分に色を付けました

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

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

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

.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
  position: absolute;
  content: "";
  top: 16px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  background-color: #fff;
  z-index: 1;
}
.entry-content .l-fuki::before {
  right: -7px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
  left: -7px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

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

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

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

□の形を設定する

記事内（.entry-content）で、l-fukiとr-fukiのクラスの前に
絶対配置で、内容はなく、上16px、幅10px、高さ10p、右境界線の2px灰色、下境界線の2px灰色、背景色は白、重なりは2
※分かり辛いので、文字の色に合わせて□を作成しました。よけい複雑になったような😅

.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
  /*絶対配置*/
  position: absolute;
  content: "";
  top: 16px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  background-color: #fff;
  z-index: 2;
}

☝がちょぼ▷のもと

▷の位置を設定する

□のはじめの位置

□を右端に移動して、45度(15分)反時計回りにする。

さらに、右に7px移動します。

色を戻す。

▷の位置を設定するCSSは次になります。
右端、右に7px移動して反時計回りに45度回転する。

.entry-content .l-fuki::before {
  right: -7px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

◁の位置を設定する

◁の位置を設定は

◁の位置を設定するCSSは次になります。

.entry-content .r-fuki::before {
  left: -7px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

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

まとめ

吹き出しの▷部分の設定は、□を作成し、▷になるように回転し、コメント部分の重なりや色を利用していることが分かりました。
また、ソースの一行一行をきちんと読んでいくと、次の箇条書きの内容も理解できたので書いておきます。

▷のちょぼは、実は□
right -9pxは、右端から9px右に移動
right 9pxは、右端から9px左に移動
left -9pxは、左端から9px左に移動
left 9pxは、左端から9px右に移動

勉強しよう。

リンク

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

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

次のちょぼは、どのように表示されるか分かりますか？

.entry-content .r-fuki::before {
  left:0px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

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

答え

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

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

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