画像を使用せずに、SVGを使用して吹き出しを作成することができます。
当ページでは、簡単な操作で吹き出しの形や色を指定し、SVGを自動で作成できます。
CSSのみで吹き出しを作成する場合は、以下を参照ください。
CSSのみで吹き出しを作成
作成されるSVGは、吹き出し口の位置や大きさは固定のため、必要に応じてSVGを変更して使用してください。SVGの指定方法は、以下のページを参照ください。
svgでグラフィックを描く
他▶
|
他▶
|
<svg xmlns=‘http://www.w3.org/2000/svg‘ height=‘60‘ width=‘200‘ viewBox=‘0 0 200 60‘ style=‘fill:#ffff1a;stroke:#999999‘ ><!-- 背景色と枠線を指定 --> <polygon points=‘1,2 160,2 160,48 70,48 80,60 55,48 1,48 1,2‘ ></polygon><!-- polygonで吹き出しを描く --> <text x="80" y="35" text-anchor="middle">SVGで描く</text></svg><!-- textで文字の開始位置、中央基点を指定 -->
<svg>で図形を描く方法は、上記以外にも多数あります。上記は、あくまでも一例です。特に、曲線を描く方法はいろいろありますので、最適な方法を選択してください。
生成できるホームページ・パーツ一覧 | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
ご利用時の注意事項・制約事項 | |
よくあるご質問 | |
何で無料なの? | |
生成コードに利用制限はある? | |
生成コードに保証はある? | |
jQueryで生成できない? |
スマートフォン・タブレット | 運営:株式会社シーマン |