アメブロ記事で囲み枠・ボックスを使うと、読者に大事な内容を伝えやすくなります。

シンプルな囲み枠(枠線・角丸・二重線・塗りつぶし)

1.基本の枠(枠線)

ここに文字入力

<fieldset style=”padding:10px; border: 2px solid #ff00ff;”>ここに文字入力</fieldset>

2.基本の枠(角丸)

ここに文字入力

<fieldset style=”padding:10px;border-radius: 10px; border: 2px solid #ff80bb;”>ここに文字入力</fieldset>

3.基本の枠(二重線)

ここに文字入力

<fieldset style=”padding:10px;border: 5px double #ff80bb;”>ここに文字入力</fieldset>

4.基本の枠(二重線・角丸)

ここに文字入力

<fieldset style=”padding:10px;border-radius: 10px;border: 5px double #fa8072;”>ここに文字入力</fieldset>

5.基本の枠(点線)

ここに文字入力

<fieldset style=”padding:10px;border: 5px dotted #32cd32″>ここに文字入力</fieldset>

6.基本の枠(点線・角丸)

ここに文字入力

<fieldset style=”padding:10px;border-radius: 10px;border: 3px dotted #8a2be2″>ここに文字入力</fieldset>

7.基本の枠(破線)

ここに文字入力

<fieldset style=”padding:10px;border: 2px dashed #ff7f50″>ここに文字入力</fieldset>

8.基本の枠(塗りつぶし)

ここに文字入力

<fieldset style=”background:#ffa500; padding:10px; border:none;”>ここに文字入力</fieldset>

9.基本の枠(外枠・塗りつぶし)

ここに文字入力

<fieldset style=”background:#e6e6fa; padding:10px; border:3px solid #9932cc;”>ここに文字入力</fieldset>

10.基本の枠(角丸・塗りつぶし)

ここに文字入力

<fieldset style=”background:#ffffe0; padding:10px; border-radius:10px; border:3px solid #ffd700;”>ここに文字入力</fieldset>

タイトル付き囲み枠

11.タイトルボックス付き

タイトル
ここに文字
改行はshift+Enter

<div style=”background:#ff1493; border:1px solid #ff1493; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>タイトル</font></div><div style=”border:1px solid #ff1493; padding:10px; font-size:1em;”>ここに文字入力<br>改行はshift+Enter</div>

12.タイトルボックス付き(角丸)

タイトル
ここに文字入力
改行はshift+エンター

<div style=”background:#ffa500; padding:8px;border-top-left-radius: 10px; border-top-right-radius: 10px;”><span style=”font-weight:bold; color:#ffffff;”>タイトル</span></div><div style=”border:1px solid #ffa500; padding:15px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;”>ここに文字入力<br>改行はshift+Enter</div>

13.タイトル付枠

◆タイトル◆ 本文

<fieldset style=”border:2px solid #00ffff;”><legend>◆タイトル◆</legend>
本文</fieldset>

14.ラベル風タイトル枠

 タイトル 
ここに文字入力
改行はshift+エンター

<div style=”display: inline-block; background: #00ff00; padding: 5px;”><span style=”font-weight: bold; color: #ffffff;”> タイトル </span></div><div style=”border: 1px solid #00FF00; padding: 15px;”>ここに文字入力<br>改行はshift+エンター</div>