文字の画像(イメージ)化

cman.jp > パーツ作成メニュー > 吹き出しのデザイン > CSSのみで吹き出しを作成

CSSのみで吹き出しを生成

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

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

SVGで吹き出しを描く場合は、以下を参照ください。
SVGで吹き出しを描く

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

作成される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;     /* 吹き出し口の高さ１／２ */
  border-bottom: 10px solid transparent;  /* 吹き出し口の高さ１／２ */
  left: -20px;                            /* 吹き出し口の位置調整 */
  top : 50%;                       /* 吹き出し口の縦位置 */
  content: "";                       /* コンテンツの挿入 */
  position: absolute;                /* 親要素を基準 */
}

広告

広告

吹き出しの使用例

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

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

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

吹き出しが表示されるマウスを乗せてください

<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;   /* 吹き出し口の幅１／２ */
  border-right: 10px solid transparent;  /* 吹き出し口の幅１／２ */
  top: -12px;                            /* 吹き出し口の位置調整 */
  left:  5%;                             /* 吹き出し口の横位置 */
  content: "";                           /* コンテンツの挿入 */
  position: absolute;                    /* 親要素を基準 */
}
</style>

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

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

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

クリックしてください吹き出しが表示される

<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;   /* 吹き出し口の幅１／２ */
  border-right: 10px solid transparent;  /* 吹き出し口の幅１／２ */
  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>

注意事項

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

広告

生成できるホームページ・パーツ一覧
	文字のデザイン
	画像のデザイン
	ボタンのデザイン
	入力項目のデザイン
	テーブルのデザイン
	BOXのデザイン
	吹き出しのデザイン
	ページのデザイン
	図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
	何で無料なの？
	生成コードに利用制限はある？
	生成コードに保証はある？
	jQueryで生成できない？

広告

当サイト内の関連するページ

便利なCSS、JavaScriptの自動生成一覧

CSS吹き出し

マウスオンで
吹き出し吹き出し

マウス吹き出し

クリックで
吹き出し吹き出し

click吹き出し

星(★)の採点

ランク１
ランク２
ランク３

ランキング表示

SVG吹き出し

広告

QrCode

このページのURL

当サイトについてお問い合わせよくあるご質問

cman.jp サーバ監視【無料】 QRコード作成【無料】画像加工【無料】 htaccess作成【無料】 WEB便利ノート【無料】 IT比較実験【無料】アイコン素材【無料】 WEBページ作成リファレンス【無料】文字/ボタンのイメージ画像作成【無料】

スマートフォン・タブレット

運営:株式会社シーマン