アイコンと吹き出しを横に並べてみた HTML,CSS復習12

こんにちは、１２回目の今日は

吹き出しの顔アイコンと吹き出しを横に並べてみました。

どんどん実戦的になってきました。戦えるかな笑

アイコンと吹き出しを横に並べる方法

要素を横に並べる方法、吹き出しの詳細な説明は下のページからご覧下さい。

purechan22.hatenablog.com

purechan22.hatenablog.com

まず吹き出しアイコンはフリー素材のページにいくらでもあるのでそこから取ってきます。

今回取ってきたのはこれです。

吹き出し部分のスタイルシートは次のようになります。

p.yokohuki {
position: relative;
display: inline-block; /*要素を横並びにする*/
border-radius: 10px; /* 四隅を丸くする */
padding: 10px; /*領域と文字との余白10px*/
background: lightblue; /*背景色　lightblue*/
border: 2px solid pink; /*境界線の幅2px solidは実戦　色はpink*/
}
p.yokohuki:before {
content: ""; /*ポチには文字を入れないので"”を使う*/
border: 10px solid transparent; /*ポチの四角形を作り境界線を全て透明にする*/
border-left: 10px solid pink;      /*左だけに境界線をつけることで三角形にできます*/
position: absolute;
top: 40%;                                 /*ポチの位置は上から40%の位置*/
left: 100%;                                /*ポチの位置は一番右（左から100%の位置)*/
transform: translateX(-5%);     /*微調整　数字が小さいとポチが右に移動します*/
}

横並べ用のスタイルシートは次のようになります。

div.yoko{
display:  inline-block;
}

記事中には次のように記述します。

<div class="yoko">
<p class="yokohuki">ここに吹き出しの内容が入る</p>
</div>
<div class="yoko">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/purechan22/20221020/20221020155225.png"
width="60" height="60">
</div>

img srcタグの説明

img src="ここに画像のurlを入れる"
widthで画像の幅　heightで画像の高さを指定します。

すると次のようになります

ここに吹き出しの内容が入る

これで次の記事から吹き出しも使えようになりました。

まだまだ実戦で戦えるようにしていきたいです。

今日は体調がいいのか一日に2つも記事が書けましたが、うつ病なので基本はポツポツの更新となります。

またこのブログはこのブログで説明したテクニックしか使ってないので使いたいテクニックがあれば探せばあります。