マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

CSS WEB制作

CSS3のみで吹き出しを作成してみました!上下左右どこでも大丈夫!

投稿日:2014年9月16日 更新日:

凝ったデザインなどには吹き出しなどを作成したりします。
ですが、内容を画像ではなくテキストにしたい場合があると思います。
吹出し画像を文字数に合わせて調節したり、分割して組み立てたりするのは大変ですよね。
そんなときにCSSのみで吹き出しが作れたらとても助かります。

CSSで吹き出しを作成する基本的な部分をご紹介したいと思います。
まずは吹き出しで重要な部分の三角形を作成してみます。

上向き

border:50px solid transparent;
width:0;
border-bottom-color:#000;
border-top-width:0;

下向き

border:50px solid transparent;
width:0;
border-top-color:#000;
border-bottom-width:0;

右向き

border:50px solid transparent;
width:0;
border-left-color:#000;
border-right-width:0;

左向き

border:50px solid transparent;
width:0;
border-right-color:#000;
border-left-width:0;

次にこれらを利用して吹き出しを作成してみます。
枠のない吹出しを作成する場合は、:beforeと:afterのどちらかを使って作成します。

上向き
.demo05 {
padding: 20px;
margin-bottom:10px;
text-align: center;
background-color: #ddd;
position:relative;
}
.demo05:after {
border:20px solid transparent;
border-bottom-color:#ddd;
border-top-width:0;
top:-20px;
content:””;
display:block;
left:30px;
position:absolute;
width:0;
}
下向き
.demo06 {
padding: 20px;
margin-bottom:10px;
background-color: #ddd;
position:relative;
}
.demo06:after {
border:20px solid transparent;
border-top-color:#ddd;
border-bottom-width:0;
bottom:-20px;
content:””;
display:block;
left:30px;
position:absolute;
width:0;
}
右向き
.demo07 {
padding: 20px;
margin-bottom:10px;
background-color: #ddd;
position:relative;
}
.demo07:after {
border:20px solid transparent;
border-left-color:#ddd;
border-right-width:0;
right:-20px;
content:””;
display:block;
top:30px;
position:absolute;
width:0;
}
左向き
.demo08 {
padding: 20px;
margin-bottom:10px;
background-color: #ddd;
position:relative;
}
.demo08:after {
border:20px solid transparent;
border-right-color:#ddd;
border-left-width:0;
left:-20px;
content:””;
display:block;
top:30px;
position:absolute;
width:0;
}

今回は枠無しバージョンをご紹介致しました。
近いうちに枠有りバージョンをご紹介できたらと思います。
それだけでなく、様々な形の吹き出しを作成できますので、
それらもご紹介していきたいと思います。

これでデザインの幅やコーディングの幅が広がったかと思います。
この記事を参考に少しでも役立てていただければ幸いです。

-CSS, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ワードプレスのテーマの安全性をチェックしてくれる実用的なプラグイン

ワードプレスのテーマの安全性をチェックしてくれる実用的なプラグイン

WordPressのセキュリティを高めてくれるシンプルだけれども実用的なプラグインです。 名前もシンプルです。「AntiVirus」 WordPressで使用しているテーマに悪意のあるコードやセキュリ …

レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

ブロック要素の高さを揃えるJavaScriptはいくつかあります。 その中でも行ごとの高さを変えたい場合に便利な「fixHeight.js」をご紹介します。 「fixHeight.js」の設置方法 ま …

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

画面いっぱいに背景写真を敷くWEBデザインが流行っている今日この頃、 見栄えのする写真を探すのもなかなかの一苦労だったりしますよね。 そんな悩めるデザイナーさんたちにオススメしたい、高クオリティな写真 …

Google、ペンギンアップデート2.1を実施、アルゴリズムも変更されていた

Google、ペンギンアップデート2.1を実施、アルゴリズムも変更されていた

GoogleのMatt Cutts氏が、ペンギンアップデートver2.1を実行することをTwitter上で発表しました。 検索順位への影響は全体の1%以下とのことで、規模は大規模ではなさそうなことがう …

WEB制作に便利!CSS3ボタンジェネレーター3選

WEB制作に便利!CSS3ボタンジェネレーター3選

もちろん使わない派の方もいるかもしれませんが、私は便利なツールがあればどんどん使っちゃいます。 WEB制作の時短にもつながる便利なジェネレーターをご紹介します。   「CSS3 Button …