[CSS]CSS で作る「吹き出し」のサンプル
スポンサード
また、
親子で
まずは
※この辺の数値はサイトに合わせて微調整してみてください。
スポンサード
吹き出しやバルーンとも言いますが、CSS だけで実現できるのでまとめました。
上下左右の4方向に対応した吹き出しサンプルです。
目次
「下向き」吹き出しの作り方
まずは「下向き」からです。<style> /*親*/ .parent1 { width:100%; background:#dd0000; padding:0; position:relative; } /*子*/ .parent1 .child1 { background:#dd0000; position:relative; /*テキストの補正*/ color:#fff; padding:10px 0 } /*擬似要素:after*/ .parent1 .child1:after { content: ' '; width:0; height: 0; position:absolute; border:10px solid transparent; border-top-color:#dd0000; top:100%; left:50%; } </style> <div class="parent1"> <p class="child1">「下向き」吹き出しのサンプル</p> </div>
吹き出し作成時のポイント
吹き出しの大きさ(幅)は、親要素である.parent
の width
で調整します。また、
height
で高さを指定する場合は、親子の要素で値を同じにすることでキレイに収まります。親子で
border
や background
の色を同じにすることで、単色のベタ塗りバルーンになります。擬似要素:after について
擬似要素:after
で吹き出しの位置と大きさを調整します。まずは
content:''
を空値にして、border-top-color:#dd0000
で矢印の向きを調整します。top:100%
で親要素の下位置に吹き出しの三角マークが来るようにして、left:50%
で三角マークを中央に持ってきています。※この辺の数値はサイトに合わせて微調整してみてください。
「下向き」吹き出しのサンプル
「下向き」吹き出しのデモ
「上向き」吹き出しの作り方
次は「上向き」吹き出しです。<style> /*親*/ .parent2 { width:100%; background:#dd0000; padding:0; position:relative; } /*子*/ .parent2 .child2 { background:#dd0000; position:relative; /*テキストの補正*/ color:#fff; padding:10px 0 } /*擬似要素:after*/ .parent2 .child2:after { content: ' '; width:0; height: 0; position:absolute; border:10px solid transparent; border-bottom-color:#dd0000; bottom:100%; left:50%; } </style> <div class="parent2"> <p class="child2">「上向き」吹き出しのサンプル</p> </div>
擬似要素:after について
下向きバルーンとの違いは「擬似要素:after」の値です。border-bottom-color:#dd0000
で矢印の向きを変えます。また、bottom:100%
で親要素の上位置に吹き出しの三角マークが来るように調整しています。「上向き」吹き出しのサンプル
「上向き」吹き出しのサンプル
「左向き」吹き出しの作り方
今度は「左向き」の吹き出しの作り方です。<style> /*親*/ .parent3 { width:100%; background:#dd0000; padding:0; position:relative; } /*子*/ .parent3 .child3 { background:#dd0000; position:relative; /*テキストの補正*/ color:#fff; padding:10px 0 } /*擬似要素:after*/ .parent3 .child3:after { content: ' '; width:0; height: 0; position:absolute; border:10px solid transparent; border-right-color:#dd0000; top:25%; right:100%; } </style> <div class="parent3"> <p class="child3">「左向き」吹き出しのサンプル</p> </div>
擬似要素:after について
同じく:after
の値の調整です。border-right-color:#dd0000
で矢印の向きを変え、top:25%
right:100%
で位置調整を行います。「左向き」吹き出しのサンプル
「左向き」吹き出しのサンプル
「右向き」吹き出しの作り方
最後に「左向き」の吹き出しの作り方です。<style> /*親*/ .parent4 { width:100%; background:#dd0000; padding:0; position:relative; } /*子*/ .parent4 .child4 { background:#dd0000; position:relative; /*テキストの補正*/ color:#fff; padding:10px 0 } /*擬似要素:after*/ .parent4 .child4:after { content: ' '; width:0; height: 0; position:absolute; border:10px solid transparent; border-left-color:#dd0000; top:25%; left:100%; } </style> <div class="parent4"> <p class="child4">右向き吹き出しの例</p> </div>
擬似要素:after について
border-left-color:#dd0000
で矢印の向きを変え、top:25%
left:100%
で位置調整を行います。「右向き」吹き出しのサンプル
「右向き」吹き出しの例
まとめ
「擬似要素:after」でwidth:0
height:0
を指定することと、border
の3辺を透明にすることで、以下のように三角マークに見える仕組みです。スポンサード
コメント