yuwa design -2ページ目

タイトルボックス囲み枠｜ラムネミルク

囲み枠の中で改行しても

囲み枠が複製されないコードです。

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

ここにタイトル

タイトルボックス付き囲み枠

<div style="padding:10px 18px; background:#B0DFE6;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #B0DFE6; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルボックス付き囲み枠

<div style="padding:10px 18px; background:#B0DFE6; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #B0DFE6; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルボックス付き角丸囲み枠

<div style="padding:10px 18px; background:#B0DFE6; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #B0DFE6; padding:15px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

タイトルラベル付き囲み枠

<div style="display:inline-block; padding:10px 18px; background:#B0DFE6;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #B0DFE6; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルラベル付き囲み枠

<div style="display:inline-block; padding:10px 18px; background:#B0DFE6; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #B0DFE6; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルラベル付き角丸囲み枠

<div style="display:inline-block; padding:10px 18px; background:#B0DFE6; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #B0DFE6; padding:15px; border-top-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

見出し囲み枠｜ラムネミルク

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

吹き出し

<div style="padding:10px; background:#B0DFE6; margin-bottom:0; border-radius:5px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div><div style="width:0; height:0; border-style:solid; border-width:10px 10px 0 10px; border-color:#B0DFE6 transparent transparent transparent; margin-left:30px; margin-bottom:20px;"> </div>

左ライン

<div style="border-left:8px solid #B0DFE6; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

左と下ライン

<div style="border-left:12px solid #B0DFE6; border-bottom:2px solid #B0DFE6; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

付箋風

<div style="border:2px solid #B0DFE6; border-left:10px solid #B0DFE6; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

両端ライン

<div style="border:2px solid #B0DFE6; border-left:10px solid #B0DFE6; border-right:10px solid #B0DFE6; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

上下ライン

<div style="border-top:2px solid #B0DFE6; border-bottom:2px solid #B0DFE6; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

背景色つき囲み枠｜ラムネミルク

囲み枠の中で改行しても

囲み枠が複製されないコードです。

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

文字の長さに合わせた囲み枠

実　線：solid

<div style="display:inline-block; background:#F4FAFB; border:2px solid #B0DFE6; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; background:#F4FAFB; border:4px double #B0DFE6; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; background:#F4FAFB; border:2px dotted #B0DFE6; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

文字の長さに合わせた角丸囲み枠

実　線：solid

<div style="display:inline-block; background:#F4FAFB; border:2px solid #B0DFE6; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; background:#F4FAFB; border:4px double #B0DFE6; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; background:#F4FAFB; border:2px dotted #B0DFE6; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

シンプル囲み枠｜ラムネミルク

囲み枠の中で改行しても

囲み枠が複製されないコードです。

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

文字の長さに合わせた囲み枠

実　線：solid

<div style="display:inline-block; border:2px solid #B0DFE6; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; border:4px double #B0DFE6; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; border:2px dotted #B0DFE6; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

文字の長さに合わせた角丸囲み枠

実　線：solid

<div style="display:inline-block; border:2px solid #B0DFE6; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; border:4px double #B0DFE6; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; border:2px dotted #B0DFE6; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

タイトルボックス囲み枠｜メロンソーダ

囲み枠の中で改行しても

囲み枠が複製されないコードです。

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

ここにタイトル

タイトルボックス付き囲み枠

<div style="padding:10px 18px; background:#8FC9AD;"><p style="margin:0; font-weight:bold; color:#ffffff;">ここにタイトル</p></div><div style="border:2px solid #8FC9AD; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルボックス付き囲み枠

<div style="padding:10px 18px; background:#8FC9AD; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold; color:#ffffff;">ここにタイトル</p></div><div style="border:2px solid #8FC9AD; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルボックス付き角丸囲み枠

<div style="padding:10px 18px; background:#8FC9AD; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold; color:#ffffff;">ここにタイトル</p></div><div style="border:2px solid #8FC9AD; padding:15px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

タイトルラベル付き囲み枠

<div style="display:inline-block; padding:10px 18px; background:#8FC9AD;"><p style="margin:0; font-weight:bold; color:#ffffff;">ここにタイトル</p></div><div style="border:2px solid #8FC9AD; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルラベル付き囲み枠

<div style="display:inline-block; padding:10px 18px; background:#8FC9AD; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold; color:#ffffff;">ここにタイトル</p></div><div style="border:2px solid #8FC9AD; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルラベル付き角丸囲み枠

<div style="display:inline-block; padding:10px 18px; background:#8FC9AD; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold; color:#ffffff;">ここにタイトル</p></div><div style="border:2px solid #8FC9AD; padding:15px; border-top-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

見出し囲み枠｜メロンソーダ

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

吹き出し

<div style="padding:10px; background:#8FC9AD; margin-bottom:0; border-radius:5px; font-weight:bold; color:#ffffff;"><p style="margin:0;">ここに見出し</p></div><div style="width:0; height:0; border-style:solid; border-width:10px 10px 0 10px; border-color:#8FC9AD transparent transparent transparent; margin-left:30px; margin-bottom:20px;"> </div>

左ライン

<div style="border-left:8px solid #8FC9AD; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

左と下ライン

<div style="border-left:12px solid #8FC9AD; border-bottom:2px solid #8FC9AD; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

付箋風

<div style="border:2px solid #8FC9AD; border-left:10px solid #8FC9AD; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

両端ライン

<div style="border:2px solid #8FC9AD; border-left:10px solid #8FC9AD; border-right:10px solid #8FC9AD; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

上下ライン

<div style="border-top:2px solid #8FC9AD; border-bottom:2px solid #8FC9AD; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

背景色つき囲み枠｜メロンソーダ

囲み枠の中で改行しても

囲み枠が複製されないコードです。

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

文字の長さに合わせた囲み枠

実　線：solid

<div style="display:inline-block; background:#F4FBF7; border:2px solid #8FC9AD; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; background:#F4FBF7; border:4px double #8FC9AD; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; background:#F4FBF7; border:2px dotted #8FC9AD; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

文字の長さに合わせた角丸囲み枠

実　線：solid

<div style="display:inline-block; background:#F4FBF7; border:2px solid #8FC9AD; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; background:#F4FBF7; border:4px double #8FC9AD; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; background:#F4FBF7; border:2px dotted #8FC9AD; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

シンプル囲み枠｜メロンソーダ

囲み枠の中で改行しても

囲み枠が複製されないコードです。

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

文字の長さに合わせた囲み枠

実　線：solid

<div style="display:inline-block; border:2px solid #8FC9AD; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; border:4px double #8FC9AD; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; border:2px dotted #8FC9AD; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

文字の長さに合わせた角丸囲み枠

実　線：solid

<div style="display:inline-block; border:2px solid #8FC9AD; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

二重線：double

<div style="display:inline-block; border:4px double #8FC9AD; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

点　線：dotted

<div style="display:inline-block; border:2px dotted #8FC9AD; padding:15px; border-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

タイトルボックス囲み枠｜はちみつクリーム

囲み枠の中で改行しても

囲み枠が複製されないコードです。

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

ここにタイトル

タイトルボックス付き囲み枠

<div style="padding:10px 18px; background:#F2D88D;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #F2D88D; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルボックス付き囲み枠

<div style="padding:10px 18px; background:#F2D88D; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #F2D88D; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルボックス付き角丸囲み枠

<div style="padding:10px 18px; background:#F2D88D; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #F2D88D; padding:15px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

タイトルラベル付き囲み枠

<div style="display:inline-block; padding:10px 18px; background:#F2D88D;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #F2D88D; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルラベル付き囲み枠

<div style="display:inline-block; padding:10px 18px; background:#F2D88D; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #F2D88D; padding:15px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

ここにタイトル

角丸タイトルラベル付き角丸囲み枠

<div style="display:inline-block; padding:10px 18px; background:#F2D88D; border-top-left-radius:10px; border-top-right-radius:10px;"><p style="margin:0; font-weight:bold;">ここにタイトル</p></div><div style="border:2px solid #F2D88D; padding:15px; border-top-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><p style="margin:0;">ここに文章を入力してください。</p></div>

見出し囲み枠｜はちみつクリーム

お気に入りのデザインをコピーして

使ってみてくださいね＾＾

吹き出し

<div style="padding:10px; background:#F2D88D; margin-bottom:0; border-radius:5px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div><div style="width:0; height:0; border-style:solid; border-width:10px 10px 0 10px; border-color:#F2D88D transparent transparent transparent; margin-left:30px; margin-bottom:20px;"> </div>

左ライン

<div style="border-left:8px solid #F2D88D; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

左と下ライン

<div style="border-left:12px solid #F2D88D; border-bottom:2px solid #F2D88D; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

付箋風

<div style="border:2px solid #F2D88D; border-left:10px solid #F2D88D; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

両端ライン

<div style="border:2px solid #F2D88D; border-left:10px solid #F2D88D; border-right:10px solid #F2D88D; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>

上下ライン

<div style="border-top:2px solid #F2D88D; border-bottom:2px solid #F2D88D; padding:8px; font-weight:bold;"><p style="margin:0;">ここに見出し</p></div>