新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

ブログ

CSSだけで三角形を表現して吹き出し風の見出しを作る方法【画像非使用】

2019.4.23

CSSだけで三角形を表現して吹き出し風の見出しを作る方法【画像非使用】
ブログ 0 0

こちらの記事は、このような方におすすめです。

・「見出しのデザインのアイデア収集をしたい」という方
・吹き出し風の見出しの作り方を知りたい方

妙高Web屋LINE@ 友だち追加

CSSでは様々なパターンの「見出し」を作れるようになりましたが、そのパターンの一つとして「吹き出し風の見出し」も広く用いられているようです。

今回の記事では、吹き出し風の見出しを作る方法をご紹介します。

この記事の目次

【結論】CSSで吹き出し風の見出しを作る方法

まず結論から。

こちらのコードで吹き出しを表示させてみてください。

.fukidashiTitle {
position: relative;
background: #000000; // 色は自由に変更可能
}
.fukidashiTitle:after {
content: "";
position: absolute;
right: 0;
bottom: -10px; // どの方向に吹き出しを出すかによってカスタマイズ可能
left: 0;
width: 0px;
height: 0px;
margin: auto;
border-style: solid;
border-color: #000000 transparent transparent transparent; // 色は自由に変更可能
border-width: 10px 10px 0px 10px; // 吹き出しの大きさを調整可能
}

上記のコードにおいて、ピクセル数を変更することで吹き出しの大きさを自由に変更できますので、試してみてください。

また、色も自由に変更可能です。

ただし、見出しの本体の部分と吹き出しの尖った部分の色を同じものにしておいた方が、違和感が無くて良いかと思います。

ページの先頭へ戻る

[詳細]吹き出しの三角形のキモになるのはborder属性

吹き出しの尖った部分の三角形は、border属性で罫線を定義して調整する方法を用います。

[content: “”;]で「中身は無し」を表現して、でも以降の定義でサイズや配置、色を設定することで、吹き出しの形を作り上げていきます。

ページの先頭へ戻る

参考サイト

今回の記事を作成するにあたり、下記のページを参考にさせていただきました。

こちらのページには、そのほかにも様々なアイデアが紹介されていました。

よろしければぜひご覧ください。

ページの先頭へ戻る

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
妙高Web屋LINE@ 友だち追加
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ