イベント作成などで便利な角丸の枠を作成する方法

「角丸の枠を使うとやさしい雰囲気になります」

ブログご訪問ありがとうございます。
営業とWeb集客に強いビジネス心理コンサルタント漆沢英一です。

角丸での枠を作成する方法

＊2017年11月18日現在、スマートフォンページで文字が正しく表示されない現象が確認されています。そのため、スマホ版では、HTMLコードが表示されていません。この記事はパソコン版でお読み頂けると正確な情報が伝わります。

以前の記事で

をご紹介しました。

今回は追加として、角丸での枠を作成する方法をご説明します。

タグ編集エディタで記事を書く場合はそのままコピーして貼り付けして下さい。

最新エディタの場合は、下の表示切替でHTML表示にしてから、コピーして貼り付けしてお使いください。

張り付けたあとは、標準表示でご確認いただけます。

ブログ記事の中で、「お知らせ」や「イベント」など目立たせたい文章を囲むと効果的です。

角丸枠はやさしい印象になりますね。

下記のようなタグで記事を囲みます

<div style="border:3px dotted #ff0000;color:#333;background-color:#FFFCDB;border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:5px;">
枠線の作り方
</div>

<div style="border:3px dotted #ff0000;color:#333;background-color:#FFFCDB;border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:5px;">

ここに文章をいれます。
</div>

それぞれの「HTMLコード」の意味

3px(線の太さ)⇒数字が大きくなるほど線が太くなります

dotted(線の種類)　点線⇒実線・破線・点線・二重線など・・・

#ff0000(線の色)　赤⇒枠内の文字の色

color:#333(文字の色）

background-color:#FFFCDB(背景の色)⇒枠内の背景色

border-radius:10px;-moz-border-radius:10px(角丸の大きさ）⇒数字が大きくなるほど角が丸くなります

box-shadow: 5px 5px 5px #aaa;（枠の影の色と大きさ）

padding:5px;(文字と線との間隔)

以下にご参考例として色々な枠線を作成してみました

タグの部分をコピーしてブログに貼ってお使いいただけます

ご自分でカスタマイズしてみても良いかもしれません

<div style="border:3px solid #ff0000;color:#333;background-color:#FFFCDB;border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:5px;">

ここに文章をいれます。
</div>

3px(線の太さ)

solid(線の種類) 実線

#00ff00(線の色)　緑

color:#333(文字の色）

background-color:#FFFCDB;(背景の色)

border-radius:10px;-moz-border-radius:10px(角丸の大きさ

box-shadow: 5px 5px 5px #aaa;（枠の影の色と大きさ）

padding:5px;(文字と線との間隔)

<div style="border:3px double #0000ff;color:#CC00CC;background-color:#E6E6FA;border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:5px;">

ここに文章をいれます。
</div>

3px(線の太さ)

double(線の種類)　二重線

#0000ff(線の色)　青

color:#CC00CC(文字の色）

background-color:#E6E6FA;(背景の色)ラベンダー

border-radius:10px;-moz-border-radius:10px(角丸の大きさ

box-shadow: 5px 5px 5px #aaa;（枠の影の色と大きさ）

padding:5px;(文字と線との間隔)

<div style="border:3px dashed #ffa500;color:#fff;background-color:#000;border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:5px;">

ここに文章をいれます。
</div>

3px(線の太さ)

dashed(線の種類)　破線

#ffa500(線の色)　オレンジ

color:#fff(文字の色）

background-color:#000;(背景の色)　黒

border-radius:10px;-moz-border-radius:10px(角丸の大きさ

box-shadow: 5px 5px 5px #aaa;（枠の影の色と大きさ）

padding:5px;(文字と線との間隔)

<div style="border:7px groove #E4007F;color:#000;background-color:#D2CCE6;border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:5px;">

ここに文章をいれます。
</div>

7px(線の太さ)

groove(線の種類)　溝線

#E4007F(線の色)

color:#000(文字の色）

background-color:#D2CCE6;(背景の色)

border-radius:10px;-moz-border-radius:10px(角丸の大きさ

box-shadow: 5px 5px 5px #aaa;（枠の影の色と大きさ）

padding:5px;(文字と線との間隔)

<div style="border:7px ridge #F39800;color:#333;background-color:#D5EAD8;border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:5px;">

ここに文章をいれます。
</div>

7px(線の太さ)

ridge(線の種類)　稜線

#F39800(線の色)

background-color:#D5EAD8;(背景の色)

border-radius:10px;-moz-border-radius:10px(角丸の大きさ

box-shadow: 5px 5px 5px #aaa;（枠の影の色と大きさ）

padding:5px;(文字と線との間隔)

<div style="border:7px inset #8FC31F;color:#333;background-color:#D4ECEA;border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:5px;">

ここに文章をいれます。
</div>

7px(線の太さ)

inset(線の種類)　窪んだ感じの線

#8FC31F(線の色)

background-color:#D4ECEA;(背景の色)

border-radius:10px;-moz-border-radius:10px(角丸の大きさ

box-shadow: 5px 5px 5px #aaa;（枠の影の色と大きさ）

padding:5px;(文字と線との間隔)

<div style="border:7px outset #00A0E9;color:#333;background-color:#FADBDA;border-radius:10px;-moz-border-radius:10px;box-shadow: 5px 5px 5px #aaa; padding:5px;">

ここに文章をいれます。
</div>