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>
