最近、いろいろなサイトを見ていると上の画像のように吹き出しがついた見出しが表示されていることがあります。このようなデザインはサイトを見る人も
「この項目の説明をしているんだな」
と一目でわかるので、サイトを作る上で大切な“見やすい・わかりやすい”条件に当てはまることになります。そこで今回はこの吹き出しをCSSで作る方法を書いていきたいと思います！
見本
まず、以下の見本を実装できるようにしたいと思います。
上のような吹き出しを作る時には以下のようにHTMLコードを記述します。
<h2>吹き出し</h2>
CSSで吹き出しのようにデザインする
それでは上のHTMLコードを吹き出しのようにデザインするため、以下のようにCSSを記述してあげます！
h2 {
position: relative;
background: #999;
border-radius: 10px;
padding: 10px 80px;
color: #fff;
font-size: 15px;
font-weight: bold;
line-height: 20px;
text-align: center;
}
h2::after {
position: absolute;
display: block;
content: "";
border-top: 12px solid #999; //矢印の色を指定
border-right: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 12px solid transparent;
left: 50%;
top: 100%;
}
吹き出し部分は::afterという疑似要素を使って作ります。
矢印に関しては、border要素を使って作りました。
.mihon-y {
position: relative;
}
.mihon-y::after {
position: absolute;
display: block;
content: "";
border-top: 20px solid #ff0000;
border-right: 20px solid #ffff00;
border-bottom: 20px solid #0000ff;
border-left: 20px solid #000;
left: 50%;
top: -18px;
}
例えば、上記コードでCSSを設定すると下のようなものができます。
上の見本を見るとわかるように、
border-top：下向きの矢印
border-right：左向きの矢印
border-bottom：上向きの矢印
border-left：右向きの矢印
をそれぞれ設定することができます。
今回は下向きの矢印が必要だったので、border-topで矢印の大きさや色を設定し、その他のborder-right、border-bottom、border-leftはborder-topと同じ大きさに設定した以外はtransparentという値を設定して、下矢印のみ表示されるようにしています。
※border-bottomも設定はされているので、矢印との間は矢印の大きさぶんとらないと、文章が書かれいているページにborder-bottomが被ってしまう可能性があるので気を付けてください！
矢印の位置を変えたい場合は？
ちなみに以下のように左端から少しだけ空けたい場合は
left: ～px;
という風に空けたい分の値を入れてあげます！(下の見本は30px空けています)
まとめ
以上が吹き出しを作るCSSになります！矢印をCSSで作る…というのは以前ご紹介した「CSSにて矢印を表示させる方法とは？」でも書いたように、transform: rotate(～deg);で回転させて再現させる、というのが主流のようなので、是非とも覚えましょう！
