初めて合った人と会話をすると、「勉強になりました」と言われることが増えてきた、ユゲタです。
別に教えているつもりなんか何もないのに、相手が勝手に何かを学習してくれているみたいです。
ホント、ふざけたことしか言っているつもりはないのにね。
そして、今現在、過去ブログの引っ越し＆見直しをしている最中で、質疑応答のような書き込みをしている記述をいくつか見かけたので、
見栄えをよくするために、LINEみたいなチャット表示にしたほうが、見やすい、わかりやすいのではないかと思って、ブログのcssに特定のパターンを組み込んでみることにしました。
これまでのブログ記述
質問する人「プログラム教えて！」
回答する人「パソコン持ってる？」
質問する人「もってないけどスマホはあります」
回答する人「まずパソコン買おうよ」
質問する人「でも、お金ないし」
回答する人「バイトすればいいじゃん」
質問する人「何かいいバイト紹介して。」
回答する人「バイト紹介雑誌でも買いな」
質問する人「え〜お金ないし」
回答する人「ところで何でプログラムしたいの？」
質問する人「お金稼げるって聞いたんだよね」
くっだらない会話ですが、こんな会話を文字だけで載せると、内容がクソな上に、見ていて話し手と答え手のどっちが話しているか、わかりずらすぎてヘドが出ますね。
会話にコードを追加
<ul class='talk'>
<li class='q'>プログラム教えて！</li>
<li class='a'>パソコン持ってる？</li>
<li class='q'>もってないけどスマホはあります</li>
<li class='a'>まずパソコン買おうよ</li>
<li class='q'>でも、お金ないし</li>
<li class='a'>バイトすればいいじゃん</li>
<li class='q'>何かいいバイト紹介して。</li>
<li class='a'>バイト紹介雑誌でも買いな</li>
<li class='q'>え〜お金ないし</li>
<li class='a'>ところで何でプログラムしたいの？</li>
<li class='q'>お金稼げるって聞いたんだよね</li>
</ul>
ulタグで書いてますが、divタグ構成でも全然問題ないです。
cssコード
そして、次のcssを適用させてみましょう。
*,
*::before,
*::after{
white-space:pre-wrap;
word-break:break-all;
box-sizing: border-box;
}
.talk{
--color-bg:#aaa;
--color-q:#88d;
--color-a:#d88;
--size-man:50px;
display : flex;
flex-direction : column;
margin:0;
padding:0;
}
.talk *{
list-style:none;
margin:0;
padding:0;
}
.talk .q,
.talk .a{
background-color:var(--color-bg);
color:white;
padding:10px;
border-radius:8px;
position:relative;
min-height:var(--size-man);
margin-top:5px;
margin-bottom:10px;
margin-left:calc(var(--size-man) + 20px);
margin-right:calc(var(--size-man) + 20px);
}
.talk .q{
background-color:var(--color-q);
}
.talk .a{
background-color:var(--color-a);
}
/* tail */
.talk .q::after,
.talk .a::after{
content:'';
display:block;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-style: solid;
position:absolute;
top:12px;
border-right: 15px solid var(--color-bg);
}
.talk .q::after{
border-right: 15px solid var(--color-q);
border-left: 0;
right:100%;
}
.talk .a::after{
border-left: 15px solid var(--color-a);
border-right: 0;
left:100%;
}
/* human */
.talk .q::before,
.talk .a::before{
content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MC42NzEgNjAuNjcxIj4NCjxlbGxpcHNlIGN4PSIzMC4zMzYiIGN5PSIxMi4wOTciIHJ4PSIxMS45OTciIHJ5PSIxMi4wOTciIGZpbGw9JyNmZmYnLz4NCjxwYXRoIGQ9Ik0zNS42NCwzMC4wNzlIMjUuMDMxYy03LjAyMSwwLTEyLjcxNCw1LjczOS0xMi43MTQsMTIuODIxdjE3Ljc3MWgzNi4wMzdWNDIuOUM0OC4zNTQsMzUuODE4LDQyLjY2MSwzMC4wNzksMzUuNjQsMzAuMDc5eiIgZmlsbD0nI2ZmZicvPg0KPC9zdmc+DQo=);
display:block;
width : var(--size-man);
height : var(--size-man);
background-color:var(--color-bg);
fill:white;
position:absolute;
top:0;
border-radius:50%;
padding:calc(var(--size-man) / 5);
}
.talk .q::before{
background-color:var(--color-q);
right:calc(100% + 20px);
}
.talk .a::before{
background-color:var(--color-a);
left:calc(100% + 20px);
}
完成
- プログラム教えて！
- パソコン持ってる？
- もってないけどスマホはあります
- まずパソコン買おうよ
- でも、お金ないし
- バイトすればいいじゃん
- 何かいいバイト紹介して。
- バイト紹介雑誌でも買いな
- え〜お金ないし
- ところで何でプログラムしたいの？
- お金稼げるって聞いたんだよね
最後に
ふきだしの大きさを文字の長さに応じて可変になるようにしてもいいかもですね。
できるだけシンプル構造のDOMで実装したので、固定サイズでやってますが、スマホでみても見やすいと思います。
この方式、CSSなので、HTMLで有効なんですが、見栄えとしては、パワポなどの資料などでも有効そうですね。
お試しあれ！
