CSS・THML

CSSでの枠線の作り方のまとめ、コピペで超簡単に♪備忘録代わり

CSSでの枠線の作り方のまとめ、コピペで超簡単に♪備忘録代わり

CSSでの枠線の作り方のまとめ、コピペで超簡単に♪備忘録代わり

枠線を付けるときにいちいち調べていたので、備忘録代わりとしてです。

 

文字の周りに枠を付ける場合。

 

<div style=”padding: 10px; border: 3px solid #FEB4C2;”>
<p>文章</p>
<p>文章</p>
</div>

5px→ 枠線の太さ/ solid → 線の種類色 / #00cccc → 線の色

 

 

文字のバックに色を付ける場合。

 

<div style=”padding: 10px; background: #e0ffff; “>
<p>文章</p>
<p>文章</p>
</div>

背景の色は「#e0ffff」の部分を変えます。

 

 

文字のバックに色と枠線を付ける場合。

 

<div style=”padding: 10px; background: #fffacd;  border: 1px solid #f39800;”>
<p>文章</p>
<p>文章</p>
</div>

枠線の太さと色・・・border: 1px solid #f39800

 

 

文字に角丸の枠線を付ける場合。

 

<div style=”padding: 10px; border-radius: 10px; border: 5px solid #FEB4C2;”>
<p>文章</p>
<p>文章</p>
</div>

10px → 角丸の大きさ

 

 

文字に角丸の背景色を付ける場合。

 

<div style=”padding: 10px; background: #e0ffff; border-radius: 10px; “>
<p>文章</p>
<p>文章</p>
</div>

背景の色「#e0ffff」を変える。

 

 

文字に角丸の二重枠線を付ける場合。

 

<div style=”padding: 10px; border-radius: 10px; border: 5px double #00cccc;”>
<p>文章</p>
<p>文章</p>
</div>

線の色「#00cccc」を変える。

 

 

文字に角丸の点線枠(太い線)を付ける場合。

 

<div style=”padding: 10px; border-radius: 30px; border: 5px dashed #00cccc;”>
<p>文章</p>
<p>文章</p>
</div>

線の色「#00cccc」を変える。

 

 

文字に角丸の点線枠(細い線)を付ける場合。

 

<div style=”padding: 10px; border-radius: 15px; border: 2px dashed #FEB4C2;”>
<p>文章</p>
<p>文章</p>
</div>

 

 

文字に角丸のてんてん枠を付ける場合。

 

<div style=”padding: 10px; border-radius: 30px; border: 5px dotted #ff7f50;”>
<p>文章</p>
<p>文章</p>
</div>

 

 

ABOUT ME
みりん
50代も後半の主婦アフィリエイター、2018年4月に月収100万を超えました。(収入の柱は物販アフィリエイト♪) 『50代は50代の稼ぎ方』をおススメしています!初心者向け講座を開講中!SNSも3つやっています。一緒にアフィリできる仲間を募集しています(*^^*)メルマガは心を込めて書いています。主に稼ぐための思考を書いています。右側サイドバーより登録できます。アフィリエイトのことでお困りでしたらお気軽にご質問ください^^

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です