【CSS】会話ボックスの作り方【レスポンシブ・AMP対応】

CSSのFlexboxを使うと簡単に会話ボックスが作れます。レスポンシブ・AMP対応済みのサンプルコードを公開しています。コピー＆ペーストで、すぐに使えます。アレンジも簡単です。吹き出しにこだわらなければ、Flexboxが便利でおすすめです。

サンプル

レスポンシブ対応していますので、デスクトップでご覧の場合は、ウィンドウサイズを変更してみてください。

おまたせしました～。ところで何の用ですか？

実はね、CSSで会話ボックスを作りたいってご相談があってね。ちょっと手伝ってほしいなと思って連絡したの。

お疲れ様でしたぁ。失礼しま～す♪

ちょっと、待ちなさ～い！！！！

コード

Html

<div class="myconv">
<div class="conv-voice">
<div class="box-blue r12">
おまたせしました～。ところで何の用ですか？
</div>
</div>
<div class="conv-face-l">
/*  ここに顔画像左１のコード */
</div>
</div>
<div class="myconv">
<div class="conv-voice">
<div class="box-green r12">
実はね、CSSで会話ボックスを作りたいってご相談があってね。ちょっと手伝ってほしいなと思って連絡したの。
</div>
</div>
<div class="conv-face-r">
/*  ここに顔画像右１のコード */
</div>
</div>
<div class="myconv">
<div class="conv-voice">
<div class="box-blue r12">
お疲れ様でしたぁ。失礼しま～す♪
</div>

Css

/* 会話部分 */
.myconv{margin: 0.5em 0; display:-webkit-flex;display:flex;}
.myconv-voice{-webkit-flex:3;flex:3;align-self:center;margin:0;
              -webkit-box-ordinal-group:2;-ms-flex-order:2;-webkit-order:2;order:2;}
.myconv-face-l{-webkit-flex:1;flex:1;align-self:center;margin:0.25em;
               -webkit-box-ordinal-group:1;-ms-flex-order:1;-webkit-order:1;order:1;}
.myconv-face-r{-webkit-flex:1;flex:1;align-self:center;margin:0.25em;
               -webkit-box-ordinal-group:1;-ms-flex-order:3;-webkit-order:3;order:3;}
/* レスポンシブ */
@media screen and (max-width:700px){
  .myconv{-webkit-flex-direction:column;flex-direction:column;width:100%}
  .myconv-voice{-webkit-box-ordinal-group:1;-ms-flex-order:1;-webkit-order:1;order:1;}
  .myconv-face-l{-webkit-box-ordinal-group:2;-ms-flex-order:2;-webkit-order:2;order:2;}
  .myconv-face-r{-webkit-box-ordinal-group:2;-ms-flex-order:2;-webkit-order:2;order:2;}
}
/* 装飾設定 */	 	 
.box-green{	 	 
 background-color: #F4FEF4;	 	 
 padding: 1em;	 	 
 margin-bottom: 1em;	 	 
 border: 3px solid #C3F9D1;	 	 
}	 	 
.box-blue{	 	 
 background-color: #f4fbfe;	 	 
 padding: 1em;	 	 
 margin-bottom: 1em;	 	 
 border: 3px solid #c3e6f9;	 	 
}	 	 
.r12{	 	 
 border-radius: 12px;	 	 
}

あわせて読みたい【CSS】３カラム以上／マルチカラムレイアウトの作り方

解説

基本構造

html上では顔画像の左右に関わらず、「文章→顔」という順番で作っています。これを、FlexBoxを利用して、デスクトップで見た場合は「顔（左）→文章→顔（右）」という順番で、モバイルで見た場合は、「文章→顔（左・右）」という順番で表示するように調整しています。

AMP対応(Accelerated Mobile Pages)

AMPでは、読み込み時間を短くするため、ほとんどの装飾が省略されます。この設計では「文章→画像」という順番にしていますので、AMPでも自然な流れで読むことができます。


なお、AMP対応サイトでみるとこの画像のようになります。（クリックで拡大します。）

まとめ

モバイルファーストという時代の流れの中で、ユーザーの見た目の良さと、検索エンジンからの評価のされ方を両立させることには、なかなかのテクニックが必要です。特に、会話ボックスは、見た目のバランスの調整次第で、読んでくれやすさが決まります。Webの閲覧時間の長さに影響を与えますので、UIとSEOを両立させる設計が望ましいです。