【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>

view raw 021-conversation.html hosted with by GitHub

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;
	}

view raw 020-conversation.css hosted with by GitHub

解説

基本構造

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

AMP対応(Accelerated Mobile Pages)

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


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

まとめ

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