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

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

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

♥ 見たいところを押してね♪ 戻るのは【最初から↑】♥

実装項目と完成デモ
htmlコード
ステップ1、floatで左右にわける
ステップ2、幅を決めます
ステップ3、擬似要素で矢印をつける(cssで吹き出しの三角の位置を調整)
ステップ5、overflow: hidden;は忘れずに
ステップ6、スマホで幅が狭くなったとき、縦並びにして矢印も上にだす
ステップ5、微調整して完成
flexは使わない
参考サイト
ふんわりボタンも見てね♪

実装項目と完成デモ

まず、今回の目標です。

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

完成デモはこちらです。

cssで吹き出しの会話文を作成する手順(デモ)

PCで閲覧している場合、ブラウザの幅を縮めてみてください。幅が一定の値になると、横並びから縦並びになります。デモ吹き出しです。ここに吹き出しの内容を記載します。 ...

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

CodePen – Front End Developer Playground & Code Editor in the Browser

CodePen is a playground for the front end web.

htmlコード

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

ここに吹き出しの内容を記載します。

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

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

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

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

[css]
.review{
}
.review-icon{
float: left;
}
.review-text{
float: right;
background: #F5F0CF;
}
[/css]

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

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

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

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

リキッドレイアウトのCSSをマスターする（＋レスポンシブウェブデザインへの適用）｜2.IDEA

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

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

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

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

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

[css]
left: -12px;
[/css]

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

[css]
.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;
}
[/css]

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

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

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

HTML/CSSで簡単な吹き出しの作り方 – Qiita

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

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

CSSのみで三角形を作る方法を解説するよ！｜ついでに扇型や吹き出しも作ってみる – アイデアハッカー

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

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

The Shapes of CSS

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;は入っていません。

cssarrowplease

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でブロック要素にします。

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

CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ

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

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

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

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

ここに吹き出しのテキストを書きます。

続きの文章です。

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

[css]
.review{
overflow: hidden;
}
[/css]

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

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

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

[css]
@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;
}
}
[/css]

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

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

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

[css]
.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;
}
[/css]

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

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

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

[css]
.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;
}
}
[/css]