吹き出しCSS(二人対応)

Takuro Hirayama 151views 更新:2016年3月14日

こちらの記事 に出てくる会話部分のCSSです。

ほぼ参考サイトのままですが、文脈上、自分側の吹き出しが2人の部分があって、 参考サイトのCSSでは対応できなかったので、ちょっと追加しました(ほげほげ-doubleのやつ)。 相手側のふきだしも同様に対応すればイケると思います。

あと、参考サイトより、角丸をすこし抑えました。

<style>
/***********************************
 チャット風レイアウト

 Special Thanks To:
   [レスポンシブ対応] CSSでチャット風デザインを実装する | vdeep http://vdeep.net/css-chat-design

   レスポンシブ+スマホ最適化のチャット風の会話を導入したよ。【WordPressカスタマイズ】 | ガジェニュー http://smart-phone.783783783.com/2016/02/25/chatlike-css/
 ************************************/

/*画像左側のチャット*/
.chat-box {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 20px;
}
.chat-face {
    float: left;
    margin-right: -120px;
}
.chat-face img {
    width: 90px;
    height: 90px;
    border-radius: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 0 4px #ddd;
}
.chat-area {
    width: 100%;
    float: right;
}
.chat-hukidashi {
    display: inline-block;
    padding: 15px 20px;
    margin-left: 120px;
    margin-top: 8px;
    border-radius: 10px;
    position: relative;
    background-color: #D9F0FF;
}
.chat-hukidashi p {
    margin-bottom: 0px;
}
.chat-hukidashi:after {
    content: "";
    position: absolute;
    top: 35px;
    left: -10px;
    margin-top: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #D9F0FF transparent transparent;
}

/*画像左側のチャット(2人)*/
.chat-box-double {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 20px;
}
.chat-face-double {
    float: left;
    margin-right: -220px;
}
.chat-face-double img {
    width: 90px;
    height: 90px;
    display: inline-block;
    border-radius: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 0 4px #ddd;
}
.chat-area-double {
    width: 100%;
    float: right;
}
.chat-hukidashi-double {
    display: inline-block;
    padding: 15px 20px;
    margin-left: 220px;
    margin-top: 8px;
    border-radius: 10px;
    position: relative;
    background-color: #D9F0FF;
}
.chat-hukidashi-double p {
    margin-bottom: 0px;
}
.chat-hukidashi-double:after {
    content: "";
    position: absolute;
    top: 35px;
    left: -10px;
    margin-top: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #D9F0FF transparent transparent;
}

/*画像右側のチャット*/
.chat-box-right {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 20px;
}
.chat-face-right {
    float: right;
    margin-left: -120px;
}
.chat-face-right img {
    width: 90px;
    height: 90px;
    border-radius: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 0 4px #ddd;
}
.chat-area-right {
    width: 100%;
    float: left;
}
.chat-hukidashi-right {
    display: inline-block;
    padding: 15px 20px;
    margin-right: 120px;
    margin-top: 8px;
    border-radius: 10px;
    position: relative;
    background-color: #BCF5A9;
    float: right;
}
.chat-hukidashi-right p {
    margin-bottom: 0px;
}
.chat-hukidashi-right:after {
    content: "";
    position: absolute;
    top: 35px;
    right: -20px;
    margin-top: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 10px 10px 10px;
    border-color: transparent transparent transparent #BCF5A9;
}

/*スマホの時は画像を小さく*/
@media screen and (max-width: 440px) {

    /*画像左側のチャット*/
    .chat-face {
        float: left;
        margin-right: -80px;
    }
    .chat-face img {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        border: 1px solid #ccc;
        box-shadow: 0 0 4px #ddd;
    }
    .chat-hukidashi {
        display: inline-block;
        padding: 10px 10px;
        margin-left: 80px;
        margin-top: 0px;
        border-radius: 10px;
        position: relative;
        background-color: #D9F0FF;
        min-height: 3em;
    }

    /*画像左側のチャット(2人)*/
    .chat-face-double {
        float: left;
        margin-right: -150px;
    }
    .chat-face-double img {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        border: 1px solid #ccc;
        box-shadow: 0 0 4px #ddd;
    }
    .chat-hukidashi-double {
        display: inline-block;
        padding: 10px 10px;
        margin-left: 150px;
        margin-top: 0px;
        border-radius: 10px;
        position: relative;
        background-color: #D9F0FF;
        min-height: 3em;
    }

    /*画像右側のチャット*/
    .chat-face-right {
        float: right;
        margin-left: -80px;
    }
    .chat-face-right img {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        border: 1px solid #ccc;
        box-shadow: 0 0 4px #ddd;
    }
    .chat-hukidashi-right {
        display: inline-block;
        padding: 10px 10px;
        margin-right: 80px;
        margin-top: 0px;
        border-radius: 10px;
        position: relative;
        background-color: #BCF5A9;
        float: right;
        min-height: 3em;
    }
}

</style>
<div class="chat-box">
  <div class="chat-face">
      <img src="http://hacknote.jp/wp-content/uploads/avatars/750/8cfce5fb0d4aa38908c01f008105bfc0-bpfull.jpg" width="90" height="90"/>
  </div>
  <div class="chat-area">
    <div class="chat-hukidashi">
        おっおっおっ
    </div>
  </div>
</div>

<div class="chat-box-double">
  <div class="chat-face-double">
      <img src="http://hacknote.jp/wp-content/uploads/avatars/750/8cfce5fb0d4aa38908c01f008105bfc0-bpfull.jpg" width="90" height="90"/>
      <img src="http://hacknote.jp/wp-content/uploads/avatars/750/8cfce5fb0d4aa38908c01f008105bfc0-bpfull.jpg" width="90" height="90"/>
  </div>
  <div class="chat-area-double">
    <div class="chat-hukidashi-double">
        おっおっおっ
    </div>
  </div>
</div>

<div class="chat-box-right">
  <div class="chat-face-right">
      <img src="http://hacknote.jp/wp-content/uploads/avatars/750/8cfce5fb0d4aa38908c01f008105bfc0-bpfull.jpg" width="50" height="50"/>
  </div>
  <div class="chat-area-right">
    <div class="chat-hukidashi-right">
        おっおっおっ
    </div>
  </div>
</div>

動作例

JS Fiddle


ありがとうございました

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません