こんにちは、パソコンインストラクターの川上雄大です。
このような吹き出し風の囲み枠↓をどうぞ！
紺色（カラーコード：#000066）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#000066; color:#ffffff; border:1px solid #000066; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #000066; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
冷静沈着の青色（カラーコード：#0000ff）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#0000ff; color:#ffffff; border:1px solid #0000ff; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #0000ff; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
情熱的な赤色（カラーコード：#ff0000）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#ff0000; color:#ffffff; border:1px solid #ff0000; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #ff0000; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
可愛らしいピンク色（カラーコード：#ff1493）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#ff1493; color:#ffffff; border:1px solid #ff1493; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #ff1493; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
平和的な緑色（カラーコード：#008000）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#008000; color:#ffffff; border:1px solid #008000; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #008000; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
好奇心をそそるオレンジ色（カラーコード：#ff9933）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#ff9933; color:#ffffff; border:1px solid #ff9933; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #ff9933; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
ちょい薄めのオレンジ色（カラーコード：#ffa566）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#ffa566; color:#ffffff; border:1px solid #ffa566; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #ffa566; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
目立たない茶色（カラーコード：#994c00）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#994c00; color:#ffffff; border:1px solid #994c00; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #994c00; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
注意を意味する黄色（カラーコード：#ffd400）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#ffd400; color:#000000; border:1px solid #ffd400; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #ffd400; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
さらに、ちょいと薄い背景色のも！
mistyrose（カラーコード：#ffe4e1）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#ffe4e1; color:#000000; border:1px solid #ffe4e1; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #ffe4e1; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
lightcyan（カラーコード：#e0ffff）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#e0ffff; color:#000000; border:1px solid #e0ffff; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #e0ffff; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
lightgreen（カラーコード：#90ee90）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#90ee90; color:#000000; border:1px solid #90ee90; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #90ee90; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
lemonchiffon（カラーコード：#fffacd）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#fffacd; color:#000000; border:1px solid #fffacd; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #fffacd; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
lightsalmon（カラーコード：#ffa07a）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#ffa07a; color:#000000; border:1px solid #ffa07a; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #ffa07a; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
lightpink（カラーコード：#ffb6c1）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#ffb6c1; color:#000000; border:1px solid #ffb6c1; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #ffb6c1; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
lavender（カラーコード：#e6e6fa）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#e6e6fa; color:#000000; border:1px solid #e6e6fa; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #e6e6fa; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
violet（カラーコード：#ee82ee）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#ee82ee; color:#000000; border:1px solid #ee82ee; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #ee82ee; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
gold（カラーコード：#ffd700）はこちら↓
ここに吹き出し文が入る
ここに吹き出し文が入る
<div style="background:#ffd700; color:#000000; border:1px solid #ffd700; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #ffd700; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
また、ご自分の好きな色を指定したい場合はこの3か所を入れ替えてください↓
<div style="background:#000066; color:#ffffff; border:1px solid #000066; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">ここに吹き出し文が入る<br>ここに吹き出し文が入る<br>ここに吹き出し文が入る</div>
<div style="margin-left:8%; border-top: 12px solid #000066; border-right: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid transparent; width: 0; height: 0;"></div>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
実は、CSSだけで三角形を作るには、
全ての辺にborderをつけて、ボックス自体のwidthとheightをなくしてみると三角形ができます。
<div style="border-top: 30px solid #ff0000; border-right: 30px solid #00ff00; border-bottom: 30px solid #0000ff; border-left: 30px solid #ffd400; width: 0; height: 0;"></div>
あとは、色コードの代わりに、透明色の
transparent
を指定してあげるとよいです！
以上、アメブロ便利技でした。
LIDS札幌・ライフデザインスクール
川上 雄大
