スポンサードサーチ

コピペで出来る囲み枠素材集

 

HTMLタグをテキスト表示画面で入力すると、簡単に囲み枠を作ることが出来ます。
お好みのHTMLタグをコピペして利用してください。

 

囲み枠を設置する方法・手順

 

以下のブログで囲み枠の設置方法を紹介しています。使い方が分からないという方はご覧ください。

 

【HTML】ワードプレスで囲み枠を作る方法

シンプルな囲み枠素材集

 

囲み枠のHTML素材集です。HTMLタグをコピペして自由にお使いください。

 

青色

 

ここに文章を入力
<div style=”padding: 16px; border: solid 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;”>ここに文章を入力</div>

外枠赤・背景ピンク

 

ここに文章を入力
<div style=”padding: 16px; border: solid 3px #ff0000; border-radius: 10px; background-color: #ffc0cb; margin-top: 30px; margin-bottom: 30px;”>ここに文章を入力</div>

外枠黄色・背景ホワイトスモーク

 

ここに文章を入力
<div style=”padding: 16px; border: solid 3px #ffff00; border-radius: 10px; background-color: #f5f5f5; margin-top: 30px; margin-bottom: 30px;”>ここに文章を入力</div>

 

外枠オレンジ・背景黄色

 

ここに文章を入力
<div style=”padding: 16px; border: solid 3px #ffa500; border-radius: 10px; background-color: #ffff00; margin-top: 30px; margin-bottom: 30px;”>ここに文章を入力</div>

 

外枠黒・背景グレー

 

ここに文章を入力
<div style=”padding: 16px; border: solid 3px #000000; border-radius: 10px; background-color: #c0c0c0; margin-top: 30px; margin-bottom: 30px;”>ここに文章を入力</div>

 

外枠緑・背景グリーンイエロー

ここに文章を入力
<div style=”padding: 16px; border: solid 3px #008000; border-radius: 10px; background-color: #adff2f; margin-top: 30px; margin-bottom: 30px;”>ここに文章を入力</div>