Cssで吹き出しの会話文を作成する手順(レスポンティブデザイン対応)

Cssで吹き出しの会話文を作成する手順を紹介します。レスポンティブデザイン対応して途中で矢印の向きを切り替えてみます。

完成形のコードだけ貼り付けているサイトが多いので、初心者でもわかるようcssは段階的に解説してみますね。

実装項目と完成デモ

まず、今回の目標です。

  • 吹き出しを作成します。
  • 固定幅ではなく、パーセントで指定します。
  • レスポンティブデザインなので、スマホで幅が狭くなったとき、吹き出しを縦に切り替えます。

完成デモはこちらです。

12436288584_94d6bc46d2_b.jpg
PCで閲覧している場合、ブラウザの幅を縮めてみてください。幅が一定の値になると、縦並びから横並びになります。

作成する際にcodepenのnew penから入力しながら確認するとわかりやすいです。

12436288584_94d6bc46d2_b.jpg
CodePen is a playground for the front end web.
おすすめ記事

結婚・ネット婚活サイト・FACEBOOKアプリでおすすめで安いのは?比較と口コミなら「あいおんな」?

htmlコード

基本となるhtmlコードです。

<div class="review">
  <div class="review-icon">
    <img src="http://i-onna.com/wp-content/uploads/icon/review/rv_normal.png" width="40" />
  </div>
  <div class="review-text">
    <p>ここに吹き出しの内容を記載します。</p>
  </div>
</div>

吹き出しは会話文だけではなく、顔アイコンを入れ替えれば、レビューなんかにも使えますよね、様々な感情のアイコンを用意してレビューに使う形式は、わりとよく見かける形式です。

今回、実はレビューのフォーマットとして作成したため、classがreviewになっていますが、そこはあまり気にしないでください。作るものはアイコンとテキストが並び、三角の矢印がある吹き出しです。

ステップ1、floatで左右にわける

まず、floatで左にアイコン、右にテキストですね。

.review{
}
.review-icon{
	float: left;
}
.review-text{
	float: right;
	background: #F5F0CF;
}

ステップ2、幅を決めます

幅を決めます。ここでのコツは矢印のmarginをとっておきます。カラム落ちしないように合計で100%にします。

.review{
}
.review-icon{
	float: left;
	width: 5%;
}
.review-text{
	float: right;
	width: 92%;
	margin: 0 0 0 3%; /*上右下左*/
	background: #F5F0CF;
}

floatのleftとrightをパーセントで使った際に、カラム落ちしないようようリキッドレイアウトの理解が必要なようです。

12436288584_94d6bc46d2_b.jpg
レスポンシブウェブデザインを制作するときによく使うレイアウト手法である「リキッドレイアウト」のCSSテクニックについて、まとまった記事がなかったので書きます。

ステップ3、擬似要素で矢印をつける(cssで吹き出しの三角の位置を調整)

擬似要素で矢印を作ります。矢印に最低限必要なコードは下記だけです。透明(transparent)ではなく、塗りの部分が矢印になります。

	content: "";
	border-top: solid 20px transparent;
	border-bottom: solid 20px transparent;
	border-right: solid 12px #F5F0CF;

デフォルトのままだと矢印が重なってしまうため、矢印のサイズのぶんだけずらします。

	left: -12px;

テキストの塗りに矢印をつけるため、position:relative;とposition: absolute;で関連付け、まとめるとこうです。

.review{
}
.review-icon{
	float: left;
	width: 5%;
}
.review-text{
	float: right;
	width: 92%;
	margin: 0 0 0 3%;
	background: #F5F0CF;
	position:relative; /* 追加 */
}
/* 追加 */
.review-text:before{
	content: "";
	position: absolute;
	left: -12px;
	top: 10%;
	display: block;
	width: 0;
	height: 0;
	border-top: solid 20px transparent;
	border-bottom: solid 20px transparent;
	border-right: solid 12px #F5F0CF;
}

塗りを指定している方向の値を大きくすれば、縦長の三角形になります。逆に値を小さくすれば、横長の三角形になりますね。横長の方がかわいいため、個人的に好みです!

鼻が高い外人さんと鼻がペッチャン子の女の子みたいなものです♪

より詳しい矢印の解説を望む方はプログラミミングのコミュニティQiitaがわかりやすいです。

12436288584_94d6bc46d2_b.jpg
社内向けに書いたドキュメントが好評だったので公開しちゃいます。

こちらも図説があります。

12436288584_94d6bc46d2_b.jpg
タイトルの通り、CSSのみで「三角形」を作るチュートリアルです。borderプロパティにこんな使い方があったとは…

実は三角だけではなく、星型、Facebookアイコンから、スペースインベーターまでCssで作れます。

12436288584_94d6bc46d2_b.jpg
All of the below use only a single HTML element. Any kind of CSS goes, as long as it’s supported in at least one browser.

ソースをみればわかるとおり、矢印だけだと、display: block;は入っていません。

こちらも吹き出しをCSSで作成するジェネレーターですが、display: block;は入っていません。

12436288584_94d6bc46d2_b.jpg
CSSArrowPlease allows you to create and export CSS code for a custom box with an arrow extending out from the side.

なくても動作に支障はないようですが、チャット風の吹き出しをつくってみる人はみんなdisplay: block;を入れていますね。

display: block;はインライン要素をブロックレベルするプロパティ。擬似要素はデフォルトでインライン要素になっているので、display:blockでブロック要素にします。

インライン要素とブロック要素の違いはこちらのサイトがわかりやすいです。

12436288584_94d6bc46d2_b.jpg
CSSでWebデザイン、レイアウトするときに気をつけておきたいブロックレベル要素のクセをもとめてみました。ブロックレベル要素をdisplay:inlineしたときや、floatさせたときなどの挙動などを中心にCSSサンプルも作りました。スタイルシートでレイアウトするときに参考にしてもらえればうれしいです。

インライン要素のままだとwidthとheightが効きません。なので一応入れています。

ステップ5、overflow: hidden;は忘れずに

overflow: hidden;は必須です。たとえば、次のように「続きの文章」を追加すると、吹き出しの中に吹き出しの下に追加した文章が入ってきてしまいます。

<div class="review">
  <div class="review-icon">
    <img src="http://i-onna.com/wp-content/uploads/icon/review/rv_normal.png" width="40" />
  </div>
  <div class="review-text">
    <p>ここに吹き出しのテキストを書きます。</p>
  </div>
</div>
<p>続きの文章です。<p>

overflow: hidden;を追加すれば大丈夫です。

.review{
	overflow: hidden;
}

ステップ6、スマホで幅が狭くなったとき、縦並びにして矢印も上にだす

スマホで縦に切り替える場合、@media screen and (max-width: XXXpx)を追加します。どこで切り替えるかはテーマのコードにある@media screenを見てみるといいです。style.css内を検索すれば探せます。

縦にすることは見やすくするだけではなく問題の回避も同時に行っています。いろいろと回避方法があるのですが、パーセンテージでfloatのleftとrightを指定したままで幅をすごく狭くした場合、floatびleft(画像)とright(文字)の領域が重なる問題が発生します。途中で切り替わることにより、この問題が回避できるわけですね。

@media screen and (max-width: 979px) {
  .review{
  }
  .review-icon{
    width: 100%;
    margin: 0 0 10% 0;
  }
  .review-text{
    clear:both;
    width: 100%;
    margin: 15px 0 0 0;
    position:relative;
  }
}

縦並びにする最も重要なことは、テキストのfloatを最低限clearすることです。具体的なコードはclear:both;です。

そして、比率も合計で100%にする必要なくなります。縦並びにするため、各々の幅はwidth: 100%;とっていいはずですよね。marginは今度は上方向に取ります。

矢印のコードも追加します。上の矢印はborder-bottomに色をつけます。

.review-text:before{
 content: "";
 position: absolute;
 left: 3%;
 top: -32px;
 display: block;
 width: 0;
 height: 0;
 border-bottom: 12px solid #F5F0CF;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
}

位置は適当に調整しましょう。

ステップ5、微調整して完成

paddingなどを入れて調整しましょう。

.review{
  overflow: hidden;
}
.review-icon{
  float: left;
  width: 5%;
  margin: 5% 0 0 0; /*上右下左*/
}
.review-text{
  float: right;
  width: 92%;
  margin: 0 0 0 3%; /*上右下左*/
  padding: 10px;
  background: #F5F0CF;
  position:relative;
}
.review-text:before{
  content: "";
  position: absolute;
  left: -12px;
  top: 10%;
  display: block;
  width: 0;
  height: 0;
  border-top: solid 20px transparent;
  border-bottom: solid 20px transparent;
  border-right: solid 12px #F5F0CF;
}

@media screen and (max-width: 979px) {
  .review{
  }
  .review-icon{
    width: 100%;
    margin: 0 0 10% 0;
  }
  .review-text{
    clear:both;
    width: 100%;
    margin: 15px 0 0 0;
    position:relative;
  }
  .review-text:before{
    content: "";
    position: absolute;
    left: 3%;
    top: -32px;
    display: block;
    width: 0;
    height: 0;
    border-bottom: 12px solid #F5F0CF;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
  }
}

box-sizing、flexなどは利用していません。簡単にするため極力余計なコードは省きました。あとはdisplay: inline-block;、などはお好みでカスタマイズをお願いします。

flexは使わない

小ネタを紹介しますと、最初、flex-basisなどflexを使って作り始めたのですが、すぐにデメリットとしてバグがあることが発覚して途中で断念をしました。

12436288584_94d6bc46d2_b.jpg
flexbox使ってますか?バグつらいですね。必死に組んだレイアウトがIE11で崩れる様を見て、膝から崩れ落ちたことは何度もあります。

参考サイト

その他、関連するよさそうなサイトを紹介しておきます。

float以外に横並びする方法まとめです。なので吹き出しを作る際にもいろいろな作り方があるのですね。

アニメーションする吹き出しです。

12436288584_94d6bc46d2_b.jpg
タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。

ふんわりボタンも見てね♪

ふんわりボタンは影の動きにこだわり作成したので、よかったので、見てくださいね♪

12436288584_94d6bc46d2_b.jpg
今回はふんわりと押せるボタンを作ってみますね。ボタンを押すと、ぺこんとへこむ感じです。

この記事がよかったら「いいね!」「シェア♪」をお願いしますヽ(=´▽`=)ノ

医療脱毛でおすすめで安いのは?比較と口コミなら「あいおんな」 脱毛サロンでおすすめで安いのは?比較と口コミなら「あいおんな」