文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 吹き出しのデザイン > CSSのみで吹き出しを作成

CSSのみで吹き出しを生成

画像を使用せずに、CSSのみで吹き出しを作成することができます。

当ページでは簡単操作でいろいろな方向や位置の吹き出しを作成することが出来ます。
生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

吹き出しを作成してみよう

作成されるCSSは、吹き出し全体の幅や、吹き出し口の大きさは固定のため、必要に応じて変更して使用してください。吹き出し口の大きさの変更は、高さ・幅・位置調整をセットで実施してください。

吹き出し口の位置
方向
位置
背景の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度

テキストテキスト

使用したhtml
<p class="balloon">テキスト></p>
生成したCSS
.balloon {
  position   : relative;                /* 指定した分だけ相対的に移動 */
  padding: 10px;                        /* テキストの前後の余白 */
  background-color: rgba(102, 102, 255, 0.50);       /* 背景色(透明度) */
  width:300px;                          /* 吹き出し全体の幅 */
  left : 50%;                           /* 表示位置 */
  transform: translate(-50%);           /* 表示位置の調整 */
}
.balloon:after{
  border-right: 20px solid rgba(102, 102, 255, 0.50);  /* 吹き出し口の幅・色 */
  border-top: 10px solid transparent;     /* 吹き出し口の高さ1/2 */
  border-bottom: 10px solid transparent;  /* 吹き出し口の高さ1/2 */
  left: -20px;                            /* 吹き出し口の位置調整 */
  top : 50%;                       /* 吹き出し口の縦位置 */
  content: "";                       /* コンテンツの挿入 */
  position: absolute;                /* 親要素を基準 */
}
ページTOP
広告
広告

吹き出しの使用例

マウスオーバーで吹き出しを表示

吹き出しは項目の説明などで、項目にマウスを乗せた時のみ表示すると効果的です。

マウスオーバーで吹き出しを表示については以下をご確認ください。
マウスオーバーで吹き出しを表示

吹き出しが表示される マウスを乗せてください
<div class="sample1Oya">
  <span class="sample1吹き出しが表示される</span>
  マウスを乗せてください
</div>
<style type="text/css">
 /* --- 親要素 ------------------------ */
.sample1oya:hover .sample1 {
  display: block;
}
 /* --- 吹き出し ------------------ */
.sample1 {
  display: none;
  position: relative;                   /* 指定した分だけ相対的に移動 */
  margin-bottom: 10px;                  /* 吹き出しの下の余白 */
  padding: 5px;                         /* テキストの前後の余白 */
  background-color: rgba(255, 102, 255, 0.50);  /* 背景色(透明度) */
  width: 220px;                          /* 吹き出し全体の幅 */
  left: 50%;                            /* 表示位置 */
  transform: translate(-50%);           /* 表示位置の調整 */
}
.sample1:after{
  border-bottom: 12px solid rgba(255, 102, 255, 0.50);  /* 吹き出し口の高さ・色 */
  border-left: 10px solid transparent;   /* 吹き出し口の幅1/2 */
  border-right: 10px solid transparent;  /* 吹き出し口の幅1/2 */
  top: -12px;                            /* 吹き出し口の位置調整 */
  left:  5%;                             /* 吹き出し口の横位置 */
  content: "";                           /* コンテンツの挿入 */
  position: absolute;                    /* 親要素を基準 */
}
</style>
ページTOP

クリックで吹き出しを表示

吹き出しは項目の説明などで、クリックで表示すると効果的です。また、再度クリックすると非表示となります。

クリックで吹き出しを表示については以下をご確認ください。
クリックで吹き出しを表示

クリックしてください 吹き出しが表示される
<span class="sample20" onclick="showBalloon()">クリックしてください</span>
<span class="sample21" id="balloon2">吹き出しが表示される</span>
<style type="text/css">
.sample20 {
  cursor  : pointer;
}
 /* --- 吹き出し ------------------ */
.sample21 {
  display: none;
}
.sample22 {
  display: block;
  position: relative;                   /* 指定した分だけ相対的に移動 */
  margin-top: 10px;                     /* 吹き出しの上の余白 */
  padding: 5px;                         /* テキストの前後の余白 */
  background-color: rgba(153, 0, 0, 0.50);  /* 背景色(透明度) */
  width: 220px;                         /* 吹き出し全体の幅 */
  left: 50%;                            /* 表示位置 */
  transform: translate(-50%);           /* 表示位置の調整 */
}
.sample22:after{
  border-bottom: 12px solid rgba(153, 0, 0, 0.50);  /* 吹き出し口の高さ・色 */
  border-left: 10px solid transparent;   /* 吹き出し口の幅1/2 */
  border-right: 10px solid transparent;  /* 吹き出し口の幅1/2 */
  top: -12px;                            /* 吹き出し口の位置調整 */
  left: 5%;                              /* 吹き出し口の横位置 */
  content: "";                           /* コンテンツの挿入 */
  position: absolute;                    /* 親要素を基準 */
}
</style>
<script type="text/javascript">
function showBalloon(){
  var wObjballoon2	= document.getElementById("balloon2");
  // 吹き出しの表示/非表示制御(クラス変更)
  if (wObjballoon2.className == "sample22"){
  	wObjballoon2.className = "sample21";
  }else{
  	wObjballoon2.className = "sample22";
  }
}
</script>
ページTOP

注意事項

吹き出しは、<svg>などいろいろな方法で作成可能です。

ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン