AIUEO Lab2

1年のうち250日は夕飯を作る主夫が、iPhoneや料理、気になったものを紹介するブログです。

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

fukidashi_design

CSSで対話形式のフキダシデザイン

質問者の写真
今日はフキダシデザインの作り方を書きます
解答者の写真
あ。前にも使っておきながら説明しなかったやつですね?
質問者の写真
あ、覚えてたか(笑)前に記事の中で使ったことあるね。
みんなまだ意外とやってないブログの見せ方。pinterestやinstagramを貼り付ける方法 - AIUEO Lab2
解答者の写真
ケチだなーと思いました(笑)
質問者の写真
今日説明するから許して…。以下がCSSとHTMLです。

スポンサーリンク

CSSとHTML

CSS

/*============================================================
フキダシデザイン 
============================================================*/
.arrow_answer,
.arrow_question {
    position: relative;
    background: #fff;
    border: 1px solid #c8c8c8;
    padding: 30px 25px;
    border-radius: 10px;
    width: 70%;
    font-size: 13px;
}
.arrow_question {
    float: right;
    margin-right: 20px;
}
.arrow_answer:after,
.arrow_answer:before,
.arrow_question:after,
.arrow_question:before {
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_question:after,
.arrow_question:before { right: 100%; }
.arrow_answer:after,
.arrow_answer:before { left: 100%; }
.arrow_answer:after,
.arrow_question:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 15px;
    margin-top: -15px;
}
.arrow_answer:after { border-left-color: #fff ; }
.arrow_question:after { border-right-color: #fff ; }
.arrow_answer:before,
.arrow_question:before {
    border-color: rgba(200, 200, 200, 0);
    border-width: 16px;
    margin-top: -16px;
}
.arrow_answer:before { border-left-color: #c8c8c8; }
.arrow_question:before { border-right-color: #c8c8c8; }
.question_image { float: left; }
.answer_image {
    float: right;
    margin-right: 20px;
}
.answer_image img,
.question_image img { border-radius: 50px; }
.question_Box {
    margin-bottom: 25px;
    overflow: hidden;
}

HTML

<div class="question_Box">
<div class="question_image"><img src="画像のURL" alt="質問者の写真" width="90" height="90"/></div>
<div class="arrow_question">
     ここに会話内容
</div><!-- /.arrow_question -->
</div><!-- /.question_Box -->

<div class="question_Box">
<div class="answer_image"><img src="画像のURL" alt="解答者の写真" width="90" height="90" /></div>
<div class="arrow_answer">
     ここに会話内容
</div><!-- /.arrow_answer -->
</div><!-- /.question_Box -->

解答者の写真
会話している人のアイコン画像は別途用意してimg src="画像のURL"のところに入れてください。四角形の画像を用意してもらえば、CSSで丸く表示されます!

あとがき

質問者の写真
適当に作ったから、特にスマホだと会話の長さによってはアイコン画像の位置がバラバラだね
解答者の写真
誰かが改良してくれるんじゃないですか?丸投げしちゃえ!笑。
質問者の写真
そうだね。どなたか改良版をお願いします!笑。

もっとシンプルなのがいいなら

theme_message

質問者の写真
LINEみたいなフキダシがいいならkudakurageさんがつくったテーマのCSSを使わせてもらうのもいいかもね
Messages - テーマ ストア
.entry-content ul,
.entry-content ol {
    position: relative;
    margin: 15px 30px 15px 0;
    padding: 12px 15px;
    background: #e6e6e6;
    list-style: none;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;
}
.entry-content li { word-break: break-word }
.entry-content li img,
.entry-content li iframe,
.entry-content li object {
    float: none;
    max-width: 100%;
    margin: 0;
}
.entry-content ul li + li,
.entry-content ol li + li,
.entry-content ul ul,
.entry-content ul ol,
.entry-content ol ul,
.entry-content ol ol {
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid #ccc;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.entry-content ol ul,
.entry-content ol ol { border-color: #b5d96d }
.entry-content ul li + li,
.entry-content ol li + li {
    border: 0;
    padding: 0;
    margin-top: 5px;
}
.entry-content ul:before,
.entry-content ol:before {
    position: absolute;
    content: '';
    display: block;
    bottom: 10px;
    width: 12px;
    height: 12px;
    -webkit-background-size: 12px 12px;
    -moz-background-size: 12px 12px;
    -ms-background-size: 12px 12px;
    -o-background-size: 12px 12px;
    background-size: 12px 12px;
}
.entry-content ul:before {
    background: url(http://cdn-ak.f.st-hatena.com/images/fotolife/k/kudakurage/20130228/20130228120842.gif);
    left: -12px;
}
.entry-content ol {
    margin: 15px 0px 15px 30px;
    background: #d3ee9c;
}
.entry-content ol:before {
    background: url(http://cdn-ak.f.st-hatena.com/images/fotolife/k/kudakurage/20130228/20130228120843.gif);
    right: -12px;
}
.entry-content ul ul:before,
.entry-content ul ol:before,
.entry-content ol ul:before,
.entry-content ol ol:before { display: none }
.entry-content {
    overflow: visible;
    padding-left: 25px;
    padding-right: 25px;
    margin-left: 0;
    margin-right: 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 1.5) { 
    .entry-content ul:before { background: url(http://cdn-ak.f.st-hatena.com/images/fotolife/k/kudakurage/20130301/20130301120004.gif) }
    .entry-content ol:before { background: url(http://cdn-ak.f.st-hatena.com/images/fotolife/k/kudakurage/20130301/20130301120005.gif) }
}