市松模様を入れたCSS吹き出しデザイン

「linear-gradient」で市松模様を入れてます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100vw; height: 100vh; padding: 0 6rem; box-sizing: border-box; background-color: #fefefe; } .box { position: relative; padding: 1rem; border-radius: 5px; border: 2px solid #333; background: linear-gradient(45deg, #3f1a42 25%, transparent 25%, transparent 75%, #3f1a42 75%), linear-gradient(45deg, #3f1a42 25%, #63436b 25%, #63436b 75%, #3f1a42 75%); background-position: 0 0, 10px 10px; background-size: 20px 20px; color: #333; } .box::before { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); height: 20px; width: 2px; background-color: #333; content: ""; } .box p { color:white; line-height: 1.5; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <div class="box"> <p>市松模様を入れた吹き出しデザイン。市松模様を入れた吹き出しデザイン。市松模様を入れた吹き出しデザイン。</p> </div> </div> </body></html>

グリッドパターンを入れたCSS吹き出しデザイン

「repeating-linear-gradient」でグリッドパターンを入れてます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100vw; height: 100vh; padding: 0 6rem; box-sizing: border-box; background-color: #fefefe; } .box { position: relative; padding: 1rem; border-radius: 5px; border: 2px solid #333; background: repeating-linear-gradient(#c9efcb 0 2px, transparent 2px 6px), repeating-linear-gradient(90deg,#c9efcb 0 2px, transparent 2px 6px); color: #333; } .box::before { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); height: 20px; width: 2px; background-color: #333; content: ""; } .box p { line-height: 1.5; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <div class="box"> <p>グリッドパターンを入れた吹き出しデザイン。グリッドパターンを入れた吹き出しデザイン。グリッドパターンを入れた吹き出しデザイン。</p> </div> </div> </body></html>

斜めストライプを入れたCSS吹き出しデザイン

「repeating-linear-gradient」で斜めストライプを入れてます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100vw; height: 100vh; padding: 0 6rem; box-sizing: border-box; background-color: #fefefe; } .box { position: relative; padding: 1rem; border-radius: 5px; border: 2px solid #333; background: repeating-linear-gradient(45deg, #aAE8F2 0 3px, #e1ecef 3px 6px); color: #333; } .box::before { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); height: 20px; width: 2px; background-color: #333; content: ""; } .box p { line-height: 1.5; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <div class="box"> <p>斜めストライプを入れた吹き出しデザイン。斜めストライプを入れた吹き出しデザイン。斜めストライプを入れた吹き出しデザイン。</p> </div> </div> </body></html>

ギザギザしたCSS吹き出しデザイン

before,after疑似要素を回転させてギザギザの吹出を作っています

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100vw; height: 100vh; background-color: #fefefe; } .box, .box:before, .box:after, .box-body, .box-body:before { position: absolute; background-color: #94B3AD; width: 200px; height: 200px; } .box:before { transform: rotate(22deg); content: ''; } .box:after { transform: rotate(-22deg); content: ''; } .box-body { display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 1; } .box-body:before { transform: rotate(45deg); content: ''; z-index: -1; } .box-body p { padding: 0.2rem; font-size: 18px; color: white; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <div class="box"> <div class="box-body"> <p>ギザギザの吹き出し。ギザギザの吹き出し。ギザギザの吹き出し。</p> </div> </div> </div> </body></html>

吹出口を中央にしパターンを入れたCSS吹き出しデザイン

before,after疑似要素の「border」で吹出口を作っています

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 6rem; box-sizing: border-box; background-color: #fefefe; } .box { position: relative; padding: 1rem 1rem 1.2rem; border-bottom: 2px solid #333; background: radial-gradient(#f2eded 30%, transparent 30%), linear-gradient(#F3C1C2 0 100%); background-repeat: repeat,no-repeat; background-size:10px 10px,100% 100%; } .box:before, .box:after { position: absolute; left: 50%; content: ""; height: 0; width: 0; } .box:before { top: 100%; border: 9px solid; border-color: transparent; border-top-color: #333; margin-left: -9px; } .box:after { top: 99%; border: 8px solid; border-color: transparent; border-top-color: #F3C1C2; margin-left: -8px; } .box p { color: #333; line-height: 1.5; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <div class="box"> <p>パターンを入れた吹き出しデザイン。パターンを入れた吹き出しデザイン。パターンを入れた吹き出しデザイン。パターンを入れた吹き出しデザイン。パターンを入れた吹き出しデザイン。</p> </div> </div> </body></html>

吹出口の右側だけ線を入れたCSS見出しデザイン

before疑似要素で「skew」を指定し線を斜めに、「border-right」で右側だけ実線を入れてます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; background-color: white; padding: 0 6rem; box-sizing: border-box; } .box { position: relative; padding: 15px; outline: 2px solid #333; outline-offset: 2px; background: #CC6740; color: #333; } .box:before { position: absolute; top: calc(100% + 2px); left: 50px; transform: skew(-25deg); height: 20px; width: 15px; background-color: white; border-right: 3px solid #333; content: ""; } .box p { color: white; line-height: 1.5; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <div class="box"> <p>吹出口の右側だけ黒線にした吹き出しデザイン。吹出口の右側だけ黒線にした吹き出しデザイン。吹出口の右側だけ黒線にした吹き出しデザイン。</p> </div> </div> </body></html>

吹出口を中央にしたCSS吹き出しデザイン

before,after疑似要素の「border」で吹出口を作っています

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 6rem; box-sizing: border-box; background-color: #fefefe; } .box { position: relative; padding: 1rem 1rem 1.2rem; border-bottom: 2px solid #333; background: linear-gradient(#DFF3CA 0 calc(100% - 0.2rem), white calc(100% - 0.2rem)); } .box:before, .box:after { position: absolute; left: 50%; content: ""; height: 0; width: 0; } .box:before { top: 100%; border: 9px solid; border-color: transparent; border-top-color: #333; margin-left: -9px; } .box:after { top: 99%; border: 8px solid; border-color: transparent; border-top-color: white; margin-left: -8px; } .box p { color: #333; line-height: 1.5; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <div class="box"> <p>吹出口を中央にしたシンプルな吹き出し。吹出口を中央にしたシンプルな吹き出し吹出口を中央にしたシンプルな吹き出し</p> </div> </div> </body></html>

線だけを入れたシンプルなCSS吹き出しデザイン

before疑似要素の「border」で吹出口を作っています

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://picput.tubudeco.com/css/prism/prism.css"><style id="out-style">.pic-container { display: flex; justify-content: center; flex-direction: column; width: 600px; height: 338px; padding: 0 6rem; box-sizing: border-box; background-color: #fefefe; } .box { position: relative; padding: 1rem; border-radius:10px; background-color: #b8d8e0; border: 2px solid #333; } .box::before { position: absolute; top: 100%; left: 10%; height: 25px; width: 2px; transform: rotate(-20deg); background-color: #333; content: ''; } .box p { color: #333; line-height: 1.5; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container pic-background"> <div class="box"> <p>線だけを入れたシンプルな吹き出し。線だけを入れたシンプルな吹き出し。線だけを入れたシンプルな吹き出し。</p> </div> </div> </body></html>