実践で使える見出しのデザイン:吹き出し編

4-12 実践で使える見出しのデザイン:スタンダード編
4-13 実践で使える見出しのデザイン:左右の―線―編
4-14 実践で使える見出しのデザイン:どこかで使いたい編

とみてきました。
今回はこのコンテンツでも使っている「吹き出し」のパターンをご紹介します。

この記事は「2021年01月14日」に書かれた記事です

  1. 1ポイント:下向き
  2. 1ポイント:上向き
  3. 1ポイント:左向き
  4. 1ポイント:右向き
  5. 1ポイント:ちょっぴり斜め
  6. 見出し風吹き出し
  7. 何か思い出したり、心の中で思っている風
  8. アイコン入り吹き出し

1.1ポイント:下向き

CHECK

HTML

<div class="samp-bubble">CHECK</div>

CSS

.samp-bubble {
position: relative;
display: inline-block;
width: 80px;
height: 80px;
font-size: 1rem;
font-weight: 700;
line-height: 80px;
padding: 0 5px;
margin: 1.5em 0;
color: #FFF;
background-color : #EE6557;
text-align: center;
box-sizing: border-box;
border-radius: 50%;
}

.samp-bubble:before {
content: "";
position: absolute;
left: 50%;
bottom: -25px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border: 15px solid transparent;
border-top: 15px solid #EE6557;
z-index: 0;
}

2.1ポイント:上向き

CHECK

HTML

<div class="samp-bubble02">CHECK</div>

CSS

.samp-bubble02 {
position: relative;
display: inline-block;
width: 80px;
height: 80px;
font-size: 1rem;
font-weight: 700;
line-height: 80px;
padding: 0 5px;
margin: 1.5em 0;
color: #FFF;
background-color : #EE6557;
text-align: center;
box-sizing: border-box;
border-radius: 50%;
}

.samp-bubble02::before {
content: "";
position: absolute;
top: -25px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border: 15px solid transparent;
border-bottom: 15px solid #EE6557;
z-index: 0;
}

3.1ポイント:左向き

CHECK

HTML

<div class="samp-bubble03">CHECK</div>

CSS

.samp-bubble03 {
position: relative;
display: inline-block;
width: 80px;
height: 80px;
font-size: 1rem;
font-weight: 700;
line-height: 80px;
padding: 0 5px;
margin: 1.5em 0;
color: #FFF;
background-color : #EE6557;
text-align: center;
box-sizing: border-box;
border-radius: 50%;
}

.samp-bubble03::before {
content: "";
position: absolute;
top: 50%;
left: -25px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border: 15px solid transparent;
border-right: 15px solid #EE6557;
z-index: 0;
}

4.1ポイント:右向き

CHECK

HTML

<div class="samp-bubble04">CHECK</div>

CSS

.samp-bubble04 {
position: relative;
display: inline-block;
width: 80px;
height: 80px;
font-size: 1rem;
font-weight: 700;
line-height: 80px;
padding: 0 5px;
margin: 1.5em 0;
color: #FFF;
background-color : #EE6557;
text-align: center;
box-sizing: border-box;
border-radius: 50%;
}

.samp-bubble04::before {
content: "";
position: absolute;
top: 50%;
right: -25px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border: 15px solid transparent;
border-left: 15px solid #EE6557;
z-index: 0;
}

5.1ポイント:ちょっぴり斜め

CHECK

HTML

<div class="samp-bubble05">CHECK</div>

CSS

.samp-bubble05 {
position: relative;
display: inline-block;
width: 80px;
height: 80px;
font-size: 1rem;
font-weight: 700;
line-height: 80px;
padding: 0 5px;
margin: 1.5em 0;
color: #FFF;
background-color : #EE6557;
text-align: center;
box-sizing: border-box;
border-radius: 50%;
}

.samp-bubble05::before {
content: "";
position: absolute;
bottom: -8px;
right: -8px;
border: 15px solid transparent;
border-left: 15px solid #EE6557;
-webkit-transform: translate(0,2%) rotate(45deg);
transform: translate(0,2%) rotate(45deg);
z-index: 0;
}

6.見出し風吹き出し

1ポイントではなく文言全体を吹き出しに入れて見出し風にもできます。

設定方法の説明

HTML

<div class="samp-bubble06">設定方法の説明</div>

CSS

.samp-bubble06 {
position: relative;
font-size:1.2rem;
font-weight: 700;;
color: #FFF;
padding: 0.6em 1em;
margin: 0 0 1em 0;
background-color: #EE6557;
border-radius: 6px;
}

.samp-bubble06::after {
content: "";
position: absolute;
left: 1em;
bottom: -9px;
width: 0;
height: 0;
border-width: 10px 10px 0 10px;
border-style: solid;
border-color: #EE6557 transparent;
}

7.何か思い出したり、心の中で思っている風

心の中で何かを思っているときなど。漫画などではよく登場します。

宝くじが当たるといいなぁ

HTML

<div class="samp-bubble07">宝くじが当たるといいなぁ</div>

CSS

.samp-bubble07 {
font-size: 1.2rm;
font-weight: 700;
position: relative;
margin-bottom: 2em;
padding: 0.6em 1em;
color :#FFF;
background-color: #999;
border-radius: 6px;
}

.samp-bubble07::before {
content: "";
position: absolute;
left: 30px;
bottom: -15px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #999;
}

.samp-bubble07::after {
content: "";
position: absolute;
left: 50px;
bottom: -30px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #999;
}

8.アイコン入り吹き出し

このコンテンツでもちょいちょい登場する画像入り、吹き出しです。

複数行になっても問題ないです。

HTML

<div class="samp-bubble08">
<div class="samp-bubble08-img">●</div>
<div class="samp-bubble08-txt">複数行になっても問題ないです。</div>
</div>

●の部分には画像データが入ります。

CSS

.samp-bubble08 {
position: relative;
margin: 2.5em 0;
}

.samp-bubble08-txt {
font-weight:bold;
position: relative;
width: 85%;
margin: 25px 0 25px 100px;
padding: 15px;
background-color: #FFF;
border: 3px solid #EE6557;
border-radius: 7px;
box-shadow: 0px 2px 8px -1px rgba(0,0,0,0.2);
}

.samp-bubble08-txt:before {
content: "";
position: absolute;
top: 19px;
left: -8px;
width: 10px;
height: 10px;
margin: auto;
background-color: #FFF;
border-top: 3px solid #EE6557;
border-right: 3px solid #EE6557;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}

.samp-bubble08-img {
display: block;
position: absolute;
top: -5px;
left: 0;
width: 60px;
height: 60px;
text-align:center;
}

.samp-bubble08-img img {
width: 80%;
margin:0 auto;
padding: 8px 0 0 4px;
}

.samp-bubble08-img::after {
display: block;
content: "キャラ名";
position: absolute;
bottom: -26px;
left: 0;
right: 0;
margin: 0 -10px;
font-size: 11px;
text-align: center;
}

.samp-bubble08-img::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 3px solid #EE6557;
border-radius: 50%;
overflow: hidden;
background-color: #FFF;
background-size: 54px 66px;
z-index: -1;
}
松江ブログ(M2エムツー)

HOME > ホームページ制作 > CSSでホームページを1UP > 実践で使える見出しのデザイン:吹き出し編

ページトップへ