吹き出し囲み枠 | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:

こんにちは、パソコンインストラクターの川上雄大です。

 

 

このような吹き出し風の囲み枠↓をどうぞ!

 

 

 

紺色(カラーコード:#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

 

を指定してあげるとよいです!

 

 

 

 


以上、アメブロ便利技でした。

 

Instagram

 


LIDS札幌・ライフデザインスクール
川上 雄大

 

 

 

 

川上雄大

 

■川上雄大の音楽活動情報はこちら■

川上 雄大☆パソコンインストラクターさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント