*このページは web-dou.com のアーカイブです。(2025年 サイト統合)

WEBの便利ツール CSS 吹き出し ジェネレーター

TOP > WEB便利ツール >  CSS見出し ジェネレータ
X B! FB LINE

見出し生成ツール

▼生成した吹き出し

あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ

見出しサンプル

あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ

あいうえおかきくけこ

あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ

生成したソースを表示 生成結果のURL

CSSコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.sample2 {
    position: relative;
    color: #ffffff ;
    background: #000000;
    font-size: 16pt ;
    line-height: 1;
    margin: 20px -10px 20px -10px;
    padding: 10px 5px 10px 20px;
    box-shadow:1px 3px 7px 0px  #666666 ;
    border-top:3px solid #ff6347;
}
.sample2:after, sample2:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #333;
}
.sample2:after {
    left: 0;
    border-right: 5px solid #333;
}
.sample2:before {
    right: 0;
    border-left: 5px solid #333;
}

HTMLコード

1
2
3
<h3 class="sample2">
あいうえおかきくけこ
</h3>

▼以下を設定して下さい。

サンプル サンプル サンプル サンプル サンプル サンプル

見出しの種類

  • 吹き出し   リボン     普通(枠上)   普通(枠下)   普通(枠上下)  

ボックス関係

  • 背景
  • 枠 : 枠色   枠サイズpx   角丸px
  • 影   水平px   垂直px  
    ぼかしpx   太さpx   影色 

文字関係

  • 文字色   サイズpt  
  • 文章