MENU

コピペで使える囲み枠(赤色)

よく使っている枠をご紹介します♪

目次

コピペで使える「囲み枠」ー赤ー

点線&枠内色付き

枠内の本文
↓コピー用↓
<div style="background:#ffeeee; padding:10px; border:2px dotted #ff4040;">枠内の本文</div>

実線&枠内色付き

枠内の本文
↓コピー用↓
<div style="background:#ffeeee; padding:10px; border:2px solid #ff4040;">枠内の本文</div>

点線&枠内色なし

枠内の本文
↓コピー用↓
<div style="padding: 10px; border: 2px dotted #FF4040;">枠内の本文</div>

実線&枠内色なし

枠内の本文
↓コピー用↓
<div style="padding: 10px; border: 2px solid #FF4040;">枠内の本文</div>

区切り線(実線)


↓コピー用↓
<hr style="border:1px solid #ff4040">

区切り線(二重線)


↓コピー用↓
<hr style="border-top: 3px double #ff4040">

区切り線(点線)


↓コピー用↓
<hr style="border:1px dashed #ff4040">

区切り線(細かい点線)


↓コピー用↓
<hr style="border-top: 1px dotted #ff4040">

タイトル付き囲み枠

◆ここにタイトル枠内の本文
↓コピー用↓
<fieldset style="padding: 10px; border: 2px solid #FF4040;"><legend><span style="color: #ff4040;"><strong>◆ここにタイトル</strong></span></legend>枠内の本文</fieldset>

タイトル付き囲み枠(角丸)

◆ここにタイトル枠内の本文
↓コピー用↓
<fieldset style="padding: 10px; border-radius: 10px; border: 2px solid #FF4040;"><legend><span style="color: #ff4040;"><strong>◆ここにタイトル</strong></span></legend>枠内の本文</fieldset>

その他の便利な枠

タイトル
↓コピー用↓
<div style="border-bottom: 1px solid #ff4040; border-top: 1px solid #ff4040; padding: 13px;">枠内の本文</div>
タイトル
↓コピー用↓
<div style="border-left: 10px solid #ff4040; background-color: #fee; padding: 13px;">枠内の本文</div>
タイトル
↓コピー用↓
<div style="background-color: #fee; padding: 13px;">枠内の本文</div>
タイトル
↓コピー用↓
<div style="background-color: #faa; padding: 13px;">枠内の本文</div>

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次