creatersnest117

コピペで実装できちゃう!CSSで書かれた吹き出しまとめ


巷では、LINEなどのチャットなどでも吹き出しを見かけるようになりました。
Webページにも、会話形式の吹き出し付きの入門解説サイトや、
見出しに吹き出し、バナーやアイコンでも吹き出しはよく使われていて、
いまや「目立つポイント」として大人気ですね。

そんな吹き出しですが、画像なしで作れてしまう時代になりました。
ぜひマスターしておきたいものです。

CSS マウスオーバーで吹き出しを表示/私的雑録

CSS マウスオーバーで吹き出しを表示

http://php.o0o0.jp/article/css-balloons

CSSでできるマウスオーバーの吹き出しサンプルとソースが
公開されています。
一番ベーシックな形なので、覚えておきましょう。

 

画像を一切使わずに、CSS3だけでスタイリッシュな吹き出しをつくろう!/LIG BLOG

画像を一切使わずに、CSS3だけでスタイリッシュな吹き出しをつくろう!

http://liginc.co.jp/designer/archives/4888

通常、吹き出しというと画像で作ってしまいがちですが、
CSSでも作成できます。
画像を使わないので、Webページの読み込みも早いです。

 

CSS ARROW PLEASE!/CSS ARROW PLEASE!

CSS ARROW PLEASE!

http://cssarrowplease.com/

吹き出しをCSSで作成するジェネレーターです。
いちいちブラウザーで確認しなくても、画面上で変わるサンプルを
見ながら、思い通りの吹き出しができます。

 

【5パターン】画像を使わずCSS3のみで作れる吹き出しを作ってみた/Strong hold

【5パターン】画像を使わずCSS3のみで作れる吹き出しを作ってみた

http://zxcvbnmnbvcxz.com/pure-css3-balloons/

吹き出しのことを「バルーン」と呼ぶこともあります。
その吹き出しデザインの5パターンのCSSを公開しています。
どんなデザインになっているか、CSSを見ながら研究してみましょう。

 

CSSだけで簡単に吹き出しを作成する方法4つ!/Asial BLOG

CSSだけで簡単に吹き出しを作成する方法4つ!

http://blog.asial.co.jp/1140

CSSだけで作る吹き出しについて、詳しく解説しています。
基本的なものから段階的に丸い曲線の吹き出しができるまでを
見ながら実際に試すことができます。

 

CSSで会話形式のフキダシデザインを作ってみる/あいうえおLab

CSSで会話形式のフキダシデザインを作ってみる

http://akiueo.hatenablog.com/entry/css-fukidashi-design-conversation-201411

会話しているような、交互に吹き出し位置の変わるCSSです。
会話形式のほうが理解できることもありますね。
LINEのようなシンプルなものも、サンプルがあります。

 

(K)CSSで作った対談(会話)式吹き出しをLINE風にしてスマホにも対応させる/WEB(K)Campus

(K)CSSで作った対談(会話)式吹き出しをLINE風にしてスマホにも対応させる

http://webkcampus.com/201411/829/

LINEのような吹き出しのCSSレイアウトを紹介しているサイトです。
スマホ用のレイアウトですので、レスポンシブ対応にもできますね。
検証しながら、試してみるといいかもしれません。

 

吹き出しやリストマーカーに使える三角形を CSS で作る/WWW WATCH

吹き出しやリストマーカーに使える三角形を CSS で作る

http://hyper-text.org/archives/2014/04/css_triangle_tips.shtml

吹き出しにもよく使われる三角形を、
CSSでつくる方法を紹介しているサイトです。
基本的な作り方さえわかっていれば応用がききますね。

 

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

CSSのみで三角形を作る方法を解説するよ!|ついでに扇型や吹き出しも作ってみる/

http://ideahacker.net/2013/07/26/5962/

CSSで三角形だけでなく、扇型や吹き出しの解説をしています。
考え方も紹介しているので、理解しながら読み進められます。
これで吹き出しも簡単に作れるようになりそうです。

 

[CSS] CSSだけでつくる吹き出しデザイン(可変) CSS Speech Bubble/NORM

[CSS] CSSだけでつくる吹き出しデザイン(可変) CSS Speech Bubble

http://norm-design.blogspot.com/2012/04/css-css-speech-bubble.html

吹き出しのとんがり部分(三角形)の位置を、
上下左右だけでなく、微妙な位置にしたサンプルをおいています。
もちろんソースも確認できるので、とても参考になりますね。

 

[CSS] CSSだけでつくる吹き出しデザイン:パート3 ドロップシャドウ付き(可変) CSS Speech Bubble with Drop Shadow/NORM

[CSS] CSSだけでつくる吹き出しデザイン:パート3 ドロップシャドウ付き(可変) CSS Speech Bubble with Drop Shadow

http://norm-design.blogspot.com/2012/05/css3-css-speech-bubble-with-drop-shadow.html

吹き出しに影をつける方法です。
とんがり部分(三角形)をCSSで作る三角形ではなく、
四角形を回転させて使うのがポイントです。

 

シェアボタンやツールチップでよく見る枠線付きの吹き出しをCSSで描画する方法/frasm

シェアボタンやツールチップでよく見る枠線付きの吹き出しをCSSで描画する方法

http://frasm.net/design/web_design/621/

ツールチップなどの枠線のついた吹き出しをつくる方法を
解説しています。
とてもシンプルな説明なので、わかりやすく覚えられます。

 

CSSで吹き出しを作る!/新米デザイナーの日常

CSSで吹き出しを作る!

http://nomochi.hateblo.jp/entry/2015/03/19/232744

吹き出しの作り方を解説していますが、
最初は三角形の考え方から説明しているので、
とても理解しやすくなりますね。

 

CSSで作る吹き出し12パターン/Ad A Type Inc.

CSSで作る吹き出し12パターン

http://www.dataplan.jp/blog/css/686

12パターンの吹き出しサンプルを確認することができます。
通常のとんがり部分が外側にでたものもありますが、
ちょっと変わった内側にとんがり部分があるものも紹介しています。

 

要素ひとつで吹き出しみたいな見出しをつくる/NAKAZI LAB.

要素ひとつで吹き出しみたいな見出しをつくる

http://nakazilab.com/one-elements-create-balloon-heading/

CSSの疑似要素:afterを利用した、ひとつの要素だけで
吹き出しのような形の作り方を解説しています。
見出しとして使っても、ワンポイントとして利用する価値ありですね。

 

まとめ

いかがでしたでしょうか。
たかが吹き出し、されど吹き出し。使う場面によってさまざまな利用方法があります。
目立たせたかったり、注意をひきたいポイントなどに、
ぜひ使ってみてくださいね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article【Photoshop】文字パネルの使い方とワークスペースに表示する方法