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

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

要素をクリックで吹き出しを表示させることができます。

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

いろいろな位置に吹き出しを表示してみよう

吹き出しの作成については以下をご確認ください。
CSSのみで吹き出しを作成

吹き出しの表示位置
背景の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
クリックしてください 吹き出しが表示される
使用したhtml
<div class="balloonoya" onclick="showBalloon()">クリックしてください
  <span class="balloon1" id="makeImg">吹き出しが表示される></span>
</div>
生成した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;                /* 親要素を基準 */
}
生成したJavaScrupt
<script type="text/javascript">
function showBalloon(){
var wObjballoon	= document.getElementById("makeImg");
if (wObjballoon.className == "balloon1"){
wObjballoon.className = "balloon";
}else{
wObjballoon.className = "balloon1";
}
}
</script>
ページTOP
広告
広告

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

吹き出しはいろいろな方法で表示できます。

クリックで回転して吹き出しを表示

クリックしてください 吹き出しが表示される
<div class="sample1oya" onclick="showBalloon()">クリックしてください
  <span class="sample1" id="idsample1">吹き出しが表示される</span>
</div>
<style type="text/css">
.sample1oya {
  position: relative;                  /* 指定した分だけ相対的に移動 */
  cursor   : pointer;                  /* カーソルをポインターで表示 */
}
.sample1 {
  display: none;                        /* 要素を非表示 */
}
 /* --- 吹き出し ------------------ */
.sample10 {
  position: absolute;                   /* 親要素を基準 */
  display: inline;                      /* インライン要素として表示 */
  padding: 2px;                         /* テキストの前後の余白 */
  background-color: rgba(255, 102, 255, 0.50);  /* 背景色(透明度) */
  width: 180px;                         /* 吹き出し全体の幅 */
  left : -1%;                           /* 表示位置 */
  font-size: 80%;                       /* 文字サイズ */
  animation: sample1Anime 1s linear;
}
.sample10:after{
  border-left: 12px solid rgba(255, 102, 255, 0.50);  /* 吹き出し口の幅・色 */
  border-bottom: 10px solid transparent;  /* 吹き出し口の高さ1/2 */
  border-top: 10px solid transparent;     /* 吹き出し口の高さ1/2 */
  right: -12px;                           /* 吹き出し口の位置調整 */
  top : 5%;                               /* 吹き出し口の縦位置 */
  content: "";                            /* コンテンツの挿入 */
  position: absolute;                     /* 親要素を基準 */
}
@keyframes sample1Anime{
 100% { transform: rotate(360deg); }      /* 回転を指定 */
}
</style>
<script type="text/javascript">
function showSample(){
var wObjballoon	= document.getElementById("idsample1");
if (wObjballoon.className == "sample1"){
wObjballoon.className = "sample10";
}else{
wObjballoon.className = "sample1";
}
}
</script>
ページTOP

クリックしてゆっくり吹き出しを表示

クリックしてください 吹き出しが表示される
<div class="sample2oya" onclick="showSample()">クリックしてください
  <span class="sample2" id="idsample2">吹き出しが表示される</span>
</div>
<style type="text/css">
.sample2oya {
  position: relative;                  /* 指定した分だけ相対的に移動 */
  cursor   : pointer;                  /* カーソルをポインターで表示 */
}
.sample2 {
  display: none;                        /* 要素を非表示 */
}
 /* --- 吹き出し ------------------ */
.sample20 {
  position: absolute;                   /* 親要素を基準 */
  display: inline;                      /* インライン要素として表示 */
  padding: 2px;                         /* テキストの前後の余白 */
  background-color: rgba(255, 127, 127, 0.75);  /* 背景色(透明度) */
  width:180px;                          /* 吹き出し全体の幅 */
  left : 30%;                           /* 表示位置 */
  top : 100%;                           /* 表示位置 */
  margin-top : 12px;                    /* 表示位置 */
  font-size: 80%;                       /* 文字サイズ */
  animation: sample2Anime 1s linear;
}
.sample20:after{
  border-bottom: 12px solid rgba(255, 127, 127, 0.75);  /* 吹き出し口の高さ・色 */
  border-left: 10px solid transparent;   /* 吹き出し口の幅1/2 */
  border-right: 10px solid transparent;  /* 吹き出し口の幅1/2 */
  top: -12px;                            /* 吹き出し口の位置調整 */
  left : 5%;                         /* 吹き出し口の横位置 */
  content: "";                       /* コンテンツの挿入 */
  position: absolute;                /* 親要素を基準 */
}
@keyframes sample2Anime{
 100%{ color : black; background:rgba(255, 127, 127, 0.75) }
  50%{ color : black; background:rgba(255, 127, 127, 0.25) }
   0%{ color : white; background:white   }
}
</style>
<script type="text/javascript">
function showSample(){
var wObjballoon	= document.getElementById("idsample2");
if (wObjballoon.className == "sample2"){
wObjballoon.className = "sample20";
}else{
wObjballoon.className = "sample2";
}
}
</script>
ページTOP

クリックして横回転して吹き出しを表示

クリックしてください 吹き出しが表示される
<div class="sample3oya" onclick="showBalloon()">クリックしてください
  <span class="sample3" id="idsample3">吹き出しが表示される</span>
</div>
<style type="text/css">
.sample3oya {
  position: relative;                  /* 指定した分だけ相対的に移動 */
  cursor   : pointer;                  /* カーソルをポインターで表示 */
}
.sample3 {
  display: none;                        /* 要素を非表示 */
}
 /* --- 吹き出し ------------------ */
.sample30 {
  position: absolute;                   /* 親要素を基準 */
  display: inline;                      /* インライン要素として表示 */
  padding: 2px;                        /* テキストの前後の余白 */
  background-color: rgba(127, 127, 0, 0.75);  /* 背景色(透明度) */
  width:180px;                         /* 吹き出し全体の幅 */
  right : -1%;                         /* 表示位置 */
  font-size: 80%;                      /* 文字サイズ */
  animation: sample3Anime 1s linear;
}
.sample30:after{
  border-right: 12px solid rgba(127, 127, 0, 0.75);  /* 吹き出し口の高さ・色 */
  border-bottom: 10px solid transparent; /* 吹き出し口の幅1/2 */
  border-top: 10px solid transparent;    /* 吹き出し口の幅1/2 */
  left: -12px;                           /* 吹き出し口の位置調整 */
  top : 5%;                              /* 吹き出し口の横位置 */
  content: "";                           /* コンテンツの挿入 */
  position: absolute;                    /* 親要素を基準 */
}
@keyframes sample3Anime{
 100% { transform: rotateY(360deg); }  /* 横回転を指定 */
}
</style>
<script type="text/javascript">
function showSample(){
var wObjballoon	= document.getElementById("idsample3");
if (wObjballoon.className == "sample3"){
wObjballoon.className = "sample30";
}else{
wObjballoon.className = "sample3";
}
}
</script>
ページTOP

クリックして縦回転して吹き出しを表示

クリックしてください 吹き出しが表示される
<div class="sample4oya" onclick="showBalloon()">クリックしてください
  <span class="sample4" id="idsample4">吹き出しが表示される</span>
</div>
<style type="text/css">
.sample4oya {
  position   : relative;               /* 指定した分だけ相対的に移動 */
  cursor   : pointer;                  /* カーソルをポインターで表示 */
}
.sample4 {
  display: none;                        /* 要素を非表示 */
}
 /* --- 吹き出し ------------------ */
.sample40 {
  position: absolute;                   /* 親要素を基準 */
  display: inline;                      /* インライン要素として表示 */
  padding: 2px;                         /* テキストの前後の余白 */
  background-color: rgba(102, 255, 102, 0.75);  /* 背景色(透明度) */
  width:180px;                          /* 吹き出し全体の幅 */
  left : 30%;                           /* 表示位置 */
  bottom : 100%;                        /* 表示位置 */
  margin-bottom : 12px;                 /* 表示位置 */
  font-size: 80%;                       /* 文字サイズ */
  animation: sample4Anime 1s linear;
}
.sample40:after{
  border-top: 12px solid rgba(102, 255, 102, 0.75);  /* 吹き出し口の高さ・色 */
  border-left: 10px solid transparent;   /* 吹き出し口の幅1/2 */
  border-right: 10px solid transparent;  /* 吹き出し口の幅1/2 */
  bottom: -12px;                         /* 吹き出し口の位置調整 */
  left : 5%;                             /* 吹き出し口の横位置 */
  content: "";                           /* コンテンツの挿入 */
  position: absolute;                    /* 親要素を基準 */
}
@keyframes sample4Anime{
 100% { transform: rotateX(360deg); }   /* 縦回転を指定 */
}
</style>
<script type="text/javascript">
function showSample(){
var wObjballoon	= document.getElementById("idsample4");
if (wObjballoon.className == "sample4"){
wObjballoon.className = "sample40";
}else{
wObjballoon.className = "sample4";
}
}
</script>
ページTOP

注意事項

当ページの吹き出しは、CSSのみで作成しています。

ページTOP
広告

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

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