【HTML・CSS】会話風吹き出しを作る

この記事では、HTML・CSSを利用したボックスデザインを紹介。

使い方

 HTML、CSSの設定方法がわからない人は、下記記事を参考にしてね。

会話風吹き出しコード

モンスタ１

マジバケマジバケ

モンスタ２

楽しいよね

HTML

<!--左からの吹き出し-->
<div class="balloon">
    <figure class="balloon-image-left"><img src="画像URL" alt="画像コメント" />
       <figcaption class="balloon-image-description">モンスタ１</figcaption>
    </figure>
    <div class="balloon-text-right">
       <p>マジバケマジバケ</p>
    </div>
</div>

<!--右からの吹き出し-->
<div class="balloon">
    <figure class="balloon-image-right"><img src="画像URL" alt="画像コメント" />
       <figcaption class="balloon-image-description">モンスタ２</figcaption>
    </figure>
    <div class="balloon-text-left">
       <p>楽しいよね</p>
    </div>
</div>

 

 

CSS

.balloon {
    margin-bottom: 2em;
    position: relative;
}
.balloon:before,.balloon:after {
    clear: both;
    content: "";
    display: block;
}
.balloon figure {
    width: 60px;
    height: 60px;
}
.balloon-image-left {
    float: left;
    margin-right: 20px;
}
.balloon-image-right {
    float: right;
    margin-left: 20px;
}
.balloon figure img {
    width: 100%;
    height: 100%;
    border: 1px solid #aaa;
    border-radius: 50%;
    margin: 0;
}
.balloon-image-description {
    padding: 5px 0 0;
    font-size: 10px;
    text-align: center;
}
.balloon-text-right,.balloon-text-left {
    position: relative;
    padding: 10px;
    border: 1px solid;
    border-radius: 10px;
    max-width: -webkit-calc(100% - 120px);
    max-width: calc(100% - 120px);
    display: inline-block;
    margin-top : 20px;
}
.balloon-text-right {
    border-color: #aaa;
}
.balloon-text-left {
    border-color: #aaa;
}
.balloon-text-right {
    float: left;
}
.balloon-text-left {
    float: right;
}
.balloon p {
    margin: 0 0 20px;
}
.balloon p:last-child {
    margin-bottom: 0;
}
.balloon-text-right:before {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-right: 10px solid #aaa;
    top: 15px;
    left: -20px;
}
.balloon-text-right:after {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-right: 10px solid #fff;
    top: 15px;
    left: -19px;
}
.balloon-text-left:before {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-left: 10px solid #aaa;
    top: 15px;
    right: -20px;
}
.balloon-text-left:after {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-left: 10px solid #fff;
    top: 15px;
    right: -19px;
}