伸縮自在な囲み枠(ボックスデザイン)枠線背景色も変える

ブログの中で枠を付けて見やすくしたい

①以下のコードをコピーする

<div style="border: 1px solid #cccccc;  border-radius: 10px; padding: 10px; width: 80%;">
<p>ここに本文を入れる</p>
</div>

② 「見たまま編集画面」を「HTML編集画面」にして、①でコピーしたものをペーストする。

③「見たまま編集画面」に戻り、枠の中を編集する

★「border: 1px」の数字が枠の太さ

★「#cccccc」を変えると枠の色が変わる

カラーコード 

https://www.colordic.org/

http://www.netyasun.com/home/color.html

自分の好きな風に変えた ↓

グレー枠・背景も薄いグレー・伸縮あり

<div style="border: 1px solid #dcdcdc;
color: black;
background-color: #fafafa;
border-radius: 10px;
padding: 10px;
display: inline-block;">
<p>ここに本文を入れる</p>
</div>

ピンク枠・背景薄ピング・幅固定

<div style="border: 1px solid #f7deec;  
color: black;
background-color: #fff5f6;
border-radius: 10px;
padding: 10px;
display: width: 90%;">
<p>ここに本文を入れる</p>
</div>

知り得たことは、width: 90%と inline-block を一緒にコードに入れると、width: 90%が優先される。文の長さに合わせて縮み、幅は制限あり・・に設定したいが、まだ知識が追い付かない。

参考にした枠

<div style="color: #fff; border-radius: 10px; background: #e95388; padding: 5px;">

<center>

<span style="font-size: 150%;">

<strong>こちらもコピペで使えます～</strong> 

</span>

</center>

</div>

★文字の色　color: #fff; 

★角を丸く　border-radius: 10px;

★枠の中の背景色　background: #e95388;

 ↑このように枠幅を小さくしたい場合は

「width: 60%;」とし、必ず「"~~"」の中に入れること

こちらのサイト様からの、丸ごとコピペです。有難うございました

www.bambi.red