coding iPhone

HTMLとCSSで作る会話風フキダシ３選

2020年6月5日

見逃すな

Amazonタイムセール毎日更新中！

人気の商品が毎日お買得価格で登場！

イガちゃん
こんにちは。
まるでLINEみたいなフキダシですね。
WordPressとか各種ブログサービスで使えます。

いいでしょ。
ステキ。
こちらはiPhoneのメッセージ風。
フキダシが青なのはiPhone同士とかでiMessageになってるとき。
そうね。
オリジナルのデザイン。
シンプルに左右同色。

 

ブログ等のレイアウトのアクセントに、会話風の吹き出しにしたいことってないですか？

HTMLとCSSで作ってみましたので公開します。

WordPressや各種ブログサービスの投稿画面で、そのままコピペするだけで使えます！ただし、CSSは、<style>...</sytle>タグで挟んでくださいね。

WordPressなら「投稿の編集」画面の「テキスト」タブで、はてなブログなら「記事を書く」画面の「HTML編集」タブで、アメーバブログなら「ブログを書く」画面の「HTML表示」タブで、ペーストしてください。

 

 

LINE風

 

言わずと知れたLINE風です。

 

表示結果

 

おなまえ
LINE風です。
続けて喋るとフキダシのしっぽはつきません。
HTMLとCSSでできます。

続けても、しっぽをつけたいときは間にbrを入れます。
グループじゃないとき。

 

ソースコード

 

このスタイルのみ、直径40pxでユーザアイコンの画像をご用意ください。HTMLの<img class="icon" >のsrc値を各自の環境に置き換えてください。

 

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="kaiwa line">
    <div class="name">
        おなまえ
    </div>
    <div class="fukidasi left">
        <img class="icon" src="img/icon.png" alt="">LINE風です。
    </div>
    <div class="fukidasi left">
        続けて喋るとフキダシのしっぽはつきません。
    </div>
    <div class="fukidasi right">
        HTMLとCSSでできます。
    </div>
    <br><!-- 次のフキダシにしっぽをつけたいときはbrを挿入 -->
    <div class="fukidasi right">
        続けても、しっぽをつけたいときは間にbrを入れます。
    </div>
    <div class="fukidasi left">
        <img class="icon" src="img/icon.png" alt="">グループじゃないとき。
    </div>
</div>

 

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/*==============
LINE風フキダシ
===============*/
/*フレームとフォント*/
.kaiwa.line {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px 0;
    background: #769ece;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Helvetica Neue", "Lucida Sans Unicode", "Arial";
    font-size: 16px;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
}
/*フキダシ共通*/
.kaiwa.line .fukidasi {
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 8px 0 0;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    box-sizing: content-box;/*はてな用*/
}
/*フキダシ左*/
.kaiwa.line .fukidasi.left {
    float: left;
    margin-left: 62px;
    background: white;
}
/*グループのときのフキダシ*/
.kaiwa.line .name + .fukidasi.left {
    margin-top: 5px;
}
/*フキダシ右*/
.kaiwa.line .fukidasi.right {
    float: right;
    margin-right: 12px;
    background: #7adc40;
}
/*相手の名前*/
.kaiwa.line .name {
    clear: right;
    margin-left: 62px;
    color: white;
}
/*ユーザアイコン*/
.kaiwa.line .icon {
    position: absolute;
    width: 40px;
    height: 40px;
    left: -54px;
    top: -2px;
    border-radius: 20px;
}
/*グループのときのユーザアイコン*/
.kaiwa.line .name + .left .icon {
    top: -1.8em;
}
/*しっぽ共通*/
.kaiwa.line .fukidasi::after {
    position: absolute;
    content: "";
    width: 24px;
    height: 36px;
    top: -21px;
}
/*しっぽ左*/
.kaiwa.line .fukidasi.left:after {
    left: -10px;
    border-radius: 18px 0 6px 18px/18px 0 1px 18px;
    box-shadow: -3px -15px 0 -5px white inset;
}
/*しっぽ右*/
.kaiwa.line .fukidasi.right::after {
    right: -10px;
    border-radius: 0 18px 18px 6px/0 18px 18px 1px;
    box-shadow: inset 3px -15px 0 -5px #7adc40;
}
/*フキダシが続いてしっぽがないとき*/
.kaiwa.line .left + .left::after,
.kaiwa.line .right + .right::after {
    content: none;
}

 

ブログサービスで使った場合のサンプルはこちらでご確認いただけます。
→自炊自賛アメブロ支店open_in_new
→自炊自賛はてな支店open_in_new
 
 

iPhoneのメッセージ風

 

iPhoneのメッセージアプリ風です。

 

表示結果

 

iPhoneのメッセージ風。
右側のフキダシ。
上のフキダシのようにしっぽをつけないときはクラスnotailを追加してください。

 

ソースコード

 

HTML
1
2
3
4
5
6
7
8
9
10
11
<div class="kaiwa imessage">
    <div class="fukidasi left">
        iPhoneのメッセージ風。
    </div>
    <div class="fukidasi right notail">
        右側のフキダシ。
    </div>
    <div class="fukidasi right">
        上のフキダシのようにしっぽをつけないときはクラスnotailを追加してください。
    </div>
</div>

 

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/*===================
iPhoneのメッセージ風
=====================*/
/*フレームとフォント*/
.kaiwa.imessage {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px 0;
    border: 1px #ddd solid;
    background: white;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Helvetica Neue", "Lucida Sans Unicode", "Arial";
    font-size: 16px;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
}
/*フキダシ共通*/
.kaiwa.imessage .fukidasi {
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    box-sizing: content-box;/*はてな用*/
}
/*しっぽをつけないとき*/
.kaiwa.imessage .fukidasi.notail {
    margin-bottom: 0;
}
/*フキダシ左*/
.kaiwa.imessage .fukidasi.left {
    float: left;
    background: #e9e9ed;
}
/*フキダシ右*/
.kaiwa.imessage .fukidasi.right {
    float: right;
    background: #2793fa;
    color: white;
}
/*しっぽ共通*/
.kaiwa.imessage .fukidasi::after {
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    bottom: 0;
}
/*しっぽ左*/
.kaiwa.imessage .fukidasi.left::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0;
    box-shadow: -14px 2px 0 -3px #e9e9ed inset;
}
/*しっぽ右*/
.kaiwa.imessage .fukidasi.right::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px;
    box-shadow: 14px 2px 0 -3px #2793fa inset;
}
/*しっぽをつけないとき*/
.kaiwa.imessage .fukidasi.notail::after {
    content: none;
}

 

 

画像添付した場合や、iPhoneの見た目そっくりそのままのインタフェースも再現したいなら、下の記事で紹介していますので参考にしてみてください。

Webページで iPhoneのメッセージ画面を再現する

iPhoneのメッセージの画面をHTMLとCSSでブログ等のWebページに再現する方法。   画像として記事に表示させるんだったら、スクリーンショットを撮って配置すれば比較的簡単。下の画像が ...

続きを見る

 

 

オリジナル

 

自炊自賛オリジナルのフキダシです。このブログでこれをアレンジして使ってます。

 

表示結果

 

オリジナルの会話風フキダシです。長く喋れば横幅いっぱいに広がります。
右側のフキダシです。

 

ソースコード

 

HTML
1
2
3
4
5
6
7
8
<div class="kaiwa mystyle">
    <div class="fukidasi left">
        オリジナルの会話風フキダシです。長く喋れば横幅いっぱいに広がります。
    </div>
    <div class="fukidasi right">
        右側のフキダシです。
    </div>
</div>

 

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/*================
マイスタイル
==================*/
/*フレームとフォント*/
.kaiwa.mystyle {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px 0;
    background: #ddd;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Helvetica Neue", "Lucida Sans Unicode", "Arial";
    font-size: 16px;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
}
/*フキダシ共通*/
.kaiwa.mystyle .fukidasi {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 10px 20px;
    padding: 9px 14px;
    background: white;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    box-sizing: content-box;/*はてな用*/
}
/*フキダシ左*/
.kaiwa.mystyle .fukidasi.left {
    float: left;
}
/*フキダシ右*/
.kaiwa.mystyle .fukidasi.right {
    float: right;
}
/*しっぽ共通*/
.kaiwa.mystyle .fukidasi::after {
    position: absolute;
    content: "";
    width:26px;
    height:26px;
    top: 5px;
}
/*しっぽ左*/
.kaiwa.mystyle .fukidasi.left::after {
    left: -22px;   
    border-radius: 0 0px 10px 16px;
    box-shadow: -8px -14px 0 -8px white inset;
}
/*しっぽ右*/
.kaiwa.mystyle .fukidasi.right::after {
    right: -22px;
    border-radius: 0 0px 16px 10px;
    box-shadow: 8px -14px 0 -8px white inset;
}

 
なお、それぞれのフキダシの形をどういう方法で作っているか、については下の記事で解説しています。

【CSS】box-shadowプロパティでフキダシのしっぽいろいろ

  CSS3で新たに追加されたプロパティを用いれば、かつては画像を用意しなければできなかったようなさまざまな表現が可能です。 この記事では、会話風のフキダシをHTMLとCSSで表現するときの ...

続きを見る

どなたかのお役に立てば。

-coding, iPhone
-

S