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

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
us us
html5 css3 image

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

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

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

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

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

上の吹き出し

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

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

下の吹き出し

吹き出しの調整方法は、使うプロパティは違いますが、上の吹き出しと同じです。

左の吹き出し

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

右の吹き出し

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

 吹き出しの矢印について

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

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

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

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

吹き出しでは、これを::before、::afterの疑似要素でつくっています。::beforeの上に::afterの三角形をかぶせて少しずらすことで三角形の線をつくります。

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

 

最近Webカテゴリでよく読まれている記事です。
post-cta-image
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

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

この記事を気に入ったらぜひシェアも!!