コピペするだけで使える!CSSで会話形式のフキダシデザイン

By | 2016/07/19

色んなサイトを見ていると会話形式でフキダシになっている記事を見かけたりしますね。そのような記事で、シンプルで綺麗なデザインのものを見ると、どんな風にCSSを書いているんだろう?と、気になってしまいます。(開発者ツールでCSSを確認して、記事を読み切らずに終わってしまうこともしばしば笑)
今回は、この会話形式のフキダシデザインを作ってみました。そのままコピペで利用できるように仕上げておりますので、どんどん利用してください。

サンプルデザイン

質問者の写真

コピペで使える!CSSで会話形式のフキダシデザイン
アイコンを大きくするなら、のwidthとheigthを編集しましょう。

解答者の写真

コピペで使える!CSSで会話形式のフキダシデザイン
アイコンを左側にだけにするなら、balloon_answerのclass名をballoon_questionに編集しましょう。

イメージはこんな感じになります。
少しアレンジを加えたい方は、ソースコードのコメントを参考に手を加えてみてくださいね。

ソースコード

HTML

<div class="question_Box">
    <div class="question_image">
        <img src="質問者の写真" alt="質問者の写真" width="90" height="90"/>
    </div>
    <div class="balloon_question">
        <p>フキダシのコメントをここに書き込んでください。</p>
    </div><!-- /.balloon_question -->
</div><!-- /.question_Box -->

<div class="question_Box">
    <div class="answer_image">
        <img src="回答者の写真" alt="解答者の写真" width="90" height="90" />
    </div>
    <div class="balloon_answer">
        <p>フキダシのコメントをここに書き込んでください。</p>
    </div><!-- /.balloon_answer -->
</div><!-- /.question_Box -->

CSS

.balloon_answer,
.balloon_question {
    position: relative;
    background: #fff;
    border: 1px solid #c8c8c8;
    padding: 20px 15px;
    border-radius: 10px;
    width: 70%;
    font-size: 13px;
}
.balloon_question {
    float: right;
    margin-right: 20px;
}
.balloon_answer:after,
.balloon_answer:before,
.balloon_question:after,
.balloon_question:before {
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.balloon_question:after,
.balloon_question:before { right: 100%; }
.balloon_answer:after,
.balloon_answer:before { left: 100%; }
.balloon_answer:after,
.balloon_question:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 15px;
    margin-top: -15px;
}
.balloon_answer:after { border-left-color: #fff ; }
.balloon_question:after { border-right-color: #fff ; }
.balloon_answer:before,
.balloon_question:before {
    border-color: rgba(200, 200, 200, 0);
    border-width: 16px;
    margin-top: -16px;
}
.balloon_answer:before { border-left-color: #c8c8c8; }
.balloon_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;
    border: 2px solid #00A1E0;//アイコンの枠の色を変更はここ
    padding: 5%;
}
.question_Box {
    margin-bottom: 25px;
    overflow: hidden;
}
//スマホ用
@media(max-width: 640px){
    .question_image,
    .answer_image { 
        width: 20%;
    }
    .answer_image img,
    .question_image img{
        width: 100%;
        height: 100%;
    }
    .balloon_answer,
    .balloon_question{
        width: 65%;
        padding: 10px 15px;
    }

}

この会話形式をもっと簡単に利用できるようにショートコードにしてしまうのが良さそうですね。
次回の記事では、これらをショートコード化する方法を紹介できればと思います。(WordPressの機能になります。)
今回、参考にさせていただいたサイト
CSSで会話形式のフキダシデザインを作ってみる

この記事が皆様のお役に立てれば、幸いです。

Pocket

コメントを残す

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