こんな吹き出しはどうですか? | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

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

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


テーマ:

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

 

 

前回、吹き出し囲み枠の記事をアップしましたが、

 

今度は、やり取りする感じの、こんな吹き出しボックスはどうですかね?

 

(↑画像です)

 

 

実際にはこんな感じになります↓

 

 

川上
おはよう!
 

 

 

生徒
おはようございます!
 

 

 

C子
おっは~~~!
 

 

 

 

HTMLはそれぞれこんな感じです。

 

 

川上
おはよう!
 

 

 

<div style="position: absolute;margin-left:0;">川上</div>
<div style="position: absolute;margin-left:56px;background:#008000; color:#ffffff; border:1px solid #008000; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">おはよう!</div>
<div style="position: relative;margin-top:8px;margin-left:40px; border-top: 8px solid transparent; border-right: 8px solid #008000; border-bottom: 8px solid transparent; border-left: 8px solid transparent; width: 0; height: 0;">&nbsp;</div>
 

 

と、

 

 

 

生徒
おはようございます!
 

 

 

 

<div style="position: absolute; margin-right: 0px; text-align: right;">生徒</div>
<div style="position: absolute;margin-left:56px;background:#1E93C1; color:#ffffff; border:1px solid #1E93C1; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">おはようございます!</div>
<div style="position: relative;margin-top:8px;margin-left:40px; border-top: 8px solid transparent; border-right: 8px solid #1E93C1; border-bottom: 8px solid transparent; border-left: 8px solid transparent; width: 0; height: 0;">&nbsp;</div>
 

 

 

 

と、

 

 

 

 

C子
おっは~~~!
 

 

 

 

<div style="position: absolute; margin-right: 0px; text-align: right;">C子</div>
<div style="position: absolute;margin-left:56px;background:#FF14AA; color:#ffffff; border:1px solid #FF14AA; border-radius:12px; padding:6px 12px; word-break:break-all;display:inline-block;">おっは~~~!</div>
<div style="position: relative;margin-top:8px;margin-left:40px; border-top: 8px solid transparent; border-right: 8px solid #FF14AA; border-bottom: 8px solid transparent; border-left: 8px solid transparent; width: 0; height: 0;">&nbsp;</div>
 

 

 

 

といった感じになります。

 

そのままタグをコピペして、文字を変えるとすぐにできると思います。

 

 

もっと手の込んだ吹き出しを作るには、このようなサイトをご参考にされるとよいと思います↓

 

 

 

 


以上、こんな吹き出し、でした。

 

Instagram

 


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

 

 

 

 

川上雄大

 

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

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

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

SNSアカウント