【囲み枠】２. 幅・色の変更

囲み枠、次にやりたいこと･･･

枠の幅を変えたい。　

枠の色を変えたい。　　　

　　　　　　　　　　　　　　　

　１．枠幅【display:inline-block;】
　２．枠色【＃数字】　　　　
　

１．枠幅【display:inline-block;】

　⇩

この枠の幅を変更

<div style="border: 3px solid #949799; padding: 20px;">この枠の幅を変更</div>

 

この文字の幅に変更

<div style="display:inline-block;border: 3px solid #949799; padding: 20px;">この文字の幅に変更</div>

 

　　　　　←　空白も自由　→　　　　　　

 

改行も
簡単にできる

２．枠色【＃数字】　　　　　　　

※　色見本で調べて色番号を変更。（#数字）

　⇩

この枠色を変更

<div style="border: 3px solid #949799; padding: 20px;">枠色を変更</div>

枠色を変更

<div style="border: 3px solid #ff6666; padding: 20px;">枠色を変更</div>

枠色を変更

<div style="border: 3px solid  #F7C242; padding: 20px;">枠色を変更</div>

枠色を変更

<div style="border: 3px solid #53BBD3; padding: 20px;">枠色を変更</div>

枠色を変更

<div style="border: 3px solid #669966; padding: 20px;">枠色を変更</div>

枠色を変更

<div style="border: 3px solid #a869be; padding: 20px;">枠色を変更</div>

枠色を変更

<div style="border: 3px solid #C2A890; padding: 20px;">枠色を変更</div>

枠色を変更

<div style="border: 3px solid #000113; padding: 20px;">枠色を変更</div>

　色番号を調べる　

　⇩

www.color-sample.com

www.colordic.org

　【囲い枠】　２．幅・色　

　１．枠の幅【display:inline-block;】                                                       　
　２．枠の色【＃数字】