WEB系キャンパス

(K)CSSで作った対談（会話）式吹き出しをLINE風にしてスマホにも対応させる

fukidashi_line

以前、CSSで吹き出しを作って対談式のレイアウトを組んでみたんですが、PCのみのレイアウト組みだったので、新たにスマホ版の物を組んでみました(・∀・)
PC版との違いを検証してみれば面白そうなので、見比べながら検証しようと思います。
@akiueoさんのブログで「どなたか改良版を」って書いてあったので、LINEのグループトークみたいなレイアウトの改良版をアップします（頼まれてもいませんが・・・）

CSSで会話形式のフキダシデザインを作ってみる – AIUEO Lab2

以前組んだ奴とほとんど同じレイアウトで対応させた例

以前の物は横幅指定していたため、スマホではキチンと表示されませんので、width指定のところはすべて％表示に治す必要があります。【HTML】はほとんど変更なしです。＜img＞に直接指定しているサイズ指定を取っ払うのみです。

HTMLマークアップ

【HTML】

ソースを表示
印刷SyntaxHighlighterについて
1<body>
2<div id="wrapper">
3     
4<div class="question_Box">
5<div class="question_image"><img src="img/question_image01.jpg" alt="質問者の写真"/></div>
6<div class="arrow_question">
7     質問テキスト質問テキスト質問テキスト質問テキスト質問テキスト質問テキスト
8</div><!-- /.arrow_question -->
9 
10</div><!-- /.question_Box -->
11 
12 
13 
14 
15<div class="question_Box">
16<div class="answer_image"><img src="img/question_image02.jpg" alt="解答者の写真" /></div>
17<div class="arrow_answer">
18     解答テキスト解答テキスト解答テキスト解答テキスト解答テキスト解答テキスト
19</div><!-- /.arrow_answer -->
20 
21</div><!-- /.question_Box -->
22</div><!-- /#wrapper -->

左右に空白をあけるため、「wrapper」で囲んでおきます。

CSSをちょこっと変更

アイコン画像を％サイズにして、吹き出しもpx指定から％指定に変更して、あとは微調整です。

[CSS]

ソースを表示
印刷SyntaxHighlighterについて
1body{
2     width:100%;
3     min-width: 320px;
4     margin:0;
5     padding: 0;
6}
7 
8 
9#wrapper{
10     margin: 20px auto;
11     width:96%;
12}
13 
14 
15.arrow_answer,
16.arrow_question {
17    position: relative;
18    background: #fff;
19    border: 1px solid #c8c8c8;
20    border-radius: 10px;
21    width:75%;
22    font-size: 11px;
23    padding:3%;
24}
25 
26 
27 
28 
29.arrow_question {
30    float: right;
31}
32 
33 
34.arrow_answer:after,
35.arrow_answer:before,
36.arrow_question:after,
37.arrow_question:before {
38    top: 30%;
39    border: solid transparent;
40    content: " ";
41    height: 0;
42    width: 0;
43    position: absolute;
44    pointer-events: none;
45}
46 
47 
48 
49 
50.arrow_question:after,
51.arrow_question:before {
52    right: 100%;
53}
54 
55 
56.arrow_answer:after,
57.arrow_answer:before{
58     left: 100%;
59}
60 
61 
62.arrow_answer:after,
63.arrow_question:after {
64    border-color: rgba(255, 255, 255, 0);
65    border-width: 8px;
66    margin-top: -8px;
67}
68 
69 
70.arrow_answer:after{
71    border-left-color: #fff;
72}
73 
74 
75.arrow_question:after{
76    border-right-color: #fff;
77     
78}
79 
80 
81.arrow_answer:before,
82.arrow_question:before {
83    border-color: rgba(200, 200, 200, 0);
84    border-width: 9px;
85    margin-top: -9px;
86}
87 
88 
89.arrow_answer:before{
90    border-left-color: #c8c8c8;
91}
92 
93 
94.arrow_question:before {
95    border-right-color: #c8c8c8;   
96}
97 
98 
99.question_image{
100     float: left;
101     width:15%;
102}
103 
104 
105.answer_image{
106     float: right;
107     width:15%;
108}
109 
110 
111.answer_image img,
112.question_image img{
113     border-radius: 50px;
114     width: 100%
115}
116 
117 
118.question_Box{
119     width: 100%;
120     overflow: hidden;
121     margin-bottom: 8%;
122}

根本的な部分で当然bodyは100％とmin-widthを指定。
吹き出し部分と画像のサイズ指定をpixelから％指定にして、構造的に吹き出しの飛び出た部分はちょいと上にしてサイズを小さくしました。

横幅をpx指定から％指定にするだけっちゃ、するだけなんで比較的簡単に実装できます。

新しいDEMO

以前のDEMO

吹き出しが動かないように固定位置で配置する場合

テキストの量によって、吹きだしの位置が変動するので、アイコンの横に固定させたい場合は、以下のCSSに変更すればOKですね(・∀・)

【CSS】

ソースを表示
印刷SyntaxHighlighterについて
1.arrow_answer:after,
2.arrow_answer:before,
3.arrow_question:after,
4.arrow_question:before {
5    top: 25px;
6    border: solid transparent;
7    content: " ";
8    height: 0;
9    width: 0;
10    position: absolute;
11    pointer-events: none;
12}

DEMO

スマホって事でみんな大好き(?)LINE風にデザインしてみます

吹き出し作っているうちに面白くなってきたんで、新たに一度は見たことあるLINEのグループトーク風のレイアウトもCSSのみで組んでみました。

曲がった吹き出しのラインの作成は以下のサイトを参考にさせていただきましたm(_ _)m
【5パターン】画像を使わず CSS3 のみで作れる吹き出しを作ってみた – Pure CSS3 Balloons

吹き出し部分は「boader」ではなく、縦横30pxずつの2つの正方形を作成して「border-radius」で角を曲げて2つ重ねてます。

【HTML】

ソースを表示
印刷SyntaxHighlighterについて
1<body>
2<div id="wrapper">
3<img src="img/question_image01.jpg" alt="質問者" class="left-image"/>
4<div class="question_box">
5<p class="name">質問者</p>
6<div id="arrow_question">
7          ここに質問の文章
8</div>
9</div><!-- /.question_box -->
10 
11<div class="answer_box">
12<p class="name02">解答者</p>
13<div id="arrow_answer">
14     ここに解答の文章
15</div>
16</div><!-- /.answer_box -->
17<img src="img/question_image02.jpg" alt="解答者" class="right_image"/>
18     
19</div><!-- /#wrapper -->
20</body>

【CSS】

ソースを表示
印刷SyntaxHighlighterについて
1body{
2     width:100%;
3     min-width: 320px;
4     margin:0;
5     padding: 0;
6     background-color: #6f92c0;
7}
8 
9#wrapper{
10     margin: 20px auto;
11     width:96%;
12}
13 
14.question_box,
15.answer_box{
16     width:80%;
17}
18 
19.question_box{float: right;}
20.answer_box{float: left;}
21 
22 
23img.left-image,
24img.right_image{
25     width:15%;
26     margin-right: 10px;
27}
28 
29img.left-image{float: left;}
30img.right_image{float: right;}
31 
32 
33p.name02,
34p.name{
35     font-size: 14px;
36     color: #fff;
37     margin:0;
38}
39 
40p.name02{text-align: right;}
41 
42 
43 
44#arrow_answer,
45#arrow_question {
46     position: relative;
47     display: inline-block;
48     padding: 3%;
49     width: 88%;
50     font-size: 13px;
51     margin-left:3%;
52     margin-top: 3px;
53     margin-bottom: 25px;
54     color: #000;
55     border-radius: 10px;
56}
57 
58#arrow_question {
59     background: #fff;
60}
61 
62#arrow_answer {
63     background: #85e249;
64}
65 
66#arrow_answer:before,
67#arrow_question:before {
68     content: "";
69     position: absolute;
70     top: 0px;
71     margin-left: 0;
72     display: block;
73     width: 30px;
74     height: 30px;
75     z-index: -1;
76}
77 
78#arrow_question:before {
79     left: -10px;
80     background: #fff;
81     border-radius: 0px 30px;
82}
83 
84#arrow_answer:before{
85     right: -10px;
86     background: #85e249;
87     border-radius: 30px 0;
88}
89 
90 
91#arrow_answer:after,
92#arrow_question:after {
93     content: "";
94     position: absolute;
95     top: -10px;
96     margin-left: 0px;
97     display: block;
98     width: 25px;
99     height: 25px;
100     background: none repeat scroll 0% 0% #6f92c0;
101     z-index: -1;
102}
103 
104#arrow_question:after {
105     left: -12px;
106     transform: rotate(10deg);
107     border-radius: 0px 30px;
108}
109 
110#arrow_answer:after {
111     right: -12px;
112     border-radius: 30px 0px;
113     transform: rotate(20deg);
114}

弱点は吹き出し部分の作りのため背景画像をベタ塗りじゃないと変な感じになってしまう事ですね。この辺改善の余地アリです。
あと、ブラウザによってうまく表示できないかもしれません。
iPhoneのSafariなら普通にそれっぽく見えるはず。

※横幅を狭くして見るかスマホで見て下さい

DEMO

まとめ

あまり凡庸性のあるレイアウトではありませんが、現代人が一番見慣れた会話形式のレイアウトってLINEだろうなって思います。
けど、あんまりWEBページを見てるって感じじゃないかもしれませんが、限定コンテンツとかにこんなレイアウトもいいかもと思いながら、今回は以上ですm(_ _)m

こちらの記事もあわせてどうぞ

Comment

  1. AKI より:
    2015/01/04 12:42 AM

    はじめまして。
    AKIといいます。
    対話式のブログを作ろうと思っていたところ、けぃしぃさんのこの記事をたまたま見つけて参考にさせて頂きました。
    参考というよりほぼそのままですが…（汗）
    本当にためになるソースを公開していただいてありがとうございました。

    返信
    • Kc_fuji より:
      2015/01/04 11:32 PM

      >AKIさん
      お役に立ててよかったです。
      サイトも見させていただきました。面白いコンセプトのサイトですね(・∀・)
      更新楽しみにしていますｗｗ

      返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です