実践で使える見出しのデザイン:吹き出し編
4-12 実践で使える見出しのデザイン:スタンダード編
4-13 実践で使える見出しのデザイン:左右の―線―編
4-14 実践で使える見出しのデザイン:どこかで使いたい編
とみてきました。
今回はこのコンテンツでも使っている「吹き出し」のパターンをご紹介します。
4-12 実践で使える見出しのデザイン:スタンダード編
4-13 実践で使える見出しのデザイン:左右の―線―編
4-14 実践で使える見出しのデザイン:どこかで使いたい編
とみてきました。
今回はこのコンテンツでも使っている「吹き出し」のパターンをご紹介します。
この記事は「2021年01月14日」に書かれた記事です
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; }
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; }
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; }
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; }
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; }
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; }
心の中で何かを思っているときなど。漫画などではよく登場します。
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; }
このコンテンツでもちょいちょい登場する画像入り、吹き出しです。
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; }
HOME > ホームページ制作 > CSSでホームページを1UP > 実践で使える見出しのデザイン:吹き出し編