ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

HTML, CSS 吹き出し(バルーン)を作る方法

html5 css3 image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

画像を使わずに、HTMLとCSSだけで吹き出しを作る方法です。

画像を読み込まないので、応答時間やページの表示時間が少しだけ短縮できます。

HTMLとCSSだけで作ることは、画像やcanvasなどを使った吹き出しと比べ応答時間やページの表示時間が大幅に改善されるかといえば、そんなに変わらないでしょう。

でも、CSSの基本機能だけでつくるので、このような小さなことの積み重ねが結果的に大きな改善につながります。

(ただし、CSSサイズが大きくなるデメリットがあります。)

HTMLとCSS、そしてその結果を見ていきましょう。

上の吹き出し

See the Pen Balloon top by tadtadya (@tadtadya) on CodePen.

.balloon::beforeと.balloon::afterのborderのサイズで、吹き出しの矢印部分のサイズが変更できます。

.balloonのmargin-bottomと.balloon::before, .balloon::afterのleft, topで、吹き出しの矢印の位置を調整します。

下の吹き出し

See the Pen Balloon bottom by tadtadya (@tadtadya) on CodePen.

吹き出しの調整方法は、使うプロパティがちがうだけで上の吹き出しと同じ。

左の吹き出し

See the Pen Balloon left by tadtadya (@tadtadya) on CodePen.

吹き出しの調整方法は同じ。

右の吹き出し

See the Pen Balloon right by tadtadya (@tadtadya) on CodePen.

吹き出しの調整方法は同じ。

吹き出しの矢印について

吹き出しの矢印はborderの角の特長を利用しています。まずは以下のサンプルを見てください。

See the Pen Balloon triangle by tadtadya (@tadtadya) on CodePen.

borderのtop, left, right, bottomの接点は、borderの外輪郭と内輪郭の角を結んだ斜め線で分かれます。

吹き出しの矢印の三角形はこの部分を使います。たとえば、下向きの三角形は次のように。

See the Pen Balloon triangle bottom by tadtadya (@tadtadya) on CodePen.

コンポーネントのサイズは0で実体はなく、border-left, border-right, border-topを使うとborder-topが三角形になります。

吹き出しでは、これを::before、::afterの疑似要素でつくりました。

::beforeの上に::afterの三角形をかぶせて少しずらすことで三角形の線ができます。

今回は、吹き出しの背景が白色だったのでこのように表現しました。吹き出しの背景が有色で吹き出しの枠線がいらないとき、::afterはいりません。

HTML&CSSの本

post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください