はじめに
こんにちは！@70days_jsです。
cssで吹き出しを作ってみました。
今日は38日目。(2019/11/25)
よろしくお願いします。
サイトURL
https://sin2cos21.github.io/day38.html
やったこと
こんな感じの吹き出しを作りました。↓
コピペで繰り返し使えるように作りました。↓
<body><divclass="wrapper"><imgclass="image"src="pic.png"alt="画像"><divclass="fukidashi">吹き出しがあると、ポップに見えるよね</div></div><divclass="wrapper2"><divclass="fukidashi2">そうだね</div><imgclass="image2"src="pic.png"alt="画像"></div><divclass="wrapper"><imgclass="image"src="pic.png"alt="画像"><divclass="fukidashi">うん。</div></div></body>.wrapperクラスが左側に配置される方です。
.wrapper2クラスは右側に配置されます。
違いは、つけているクラスと、divとimgの順番だけです。
吹き出しの作り方。↓
.fukidashi{width:200px;margin-left:10px;position:relative;display:inline-block;text-align:center;color:#FFF;padding:30px;background-color:black;border-radius:50%;z-index:0;}.fukidashi::before{top:50%;left:-5px;margin-top:-10px;content:'';position:absolute;display:block;z-index:1;border-style:solid;border-color:transparentblack;border-width:10px10px10px0px;}absoluteとrelativeを使って実現します。
吹き出しの三角形部分はborrderのプロパティを変えることで実現しています。
吹き出しの本体はradiusでちょっと丸めるだけです。
あとは位置関係を相対的にずらして、三角形を見える部分に持ってくるだけです。
感想
サイトを作る際に、吹き出しがあるとポップな感じになるので前々からやりたいと思っていました。できてよかったです。
最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。
参考
- 実際に書いてみる！CSSで吹き出しを作る方法【初心者向け】 | TechAcademyマガジン (https://techacademy.jp/magazine/12936)
とても分かりやすかったです。ありがとうございます！
