枠などの表示の仕方
枠を自分の好きなように作るには、
<div style="~;~;~;~;~;~;">(文章)</div>
「~;~;~;~;~;」の部分に、プロパティや値を入力すると、好きなように作ることができる。
~;~;~;の順番は決まってません。
線の種類
直線=solid
破線=dashed
点線=dotted
二重線=double
線なし=none
破線=dashed
点線=dotted
二重線=double
線なし=none
4線の指定
border-(場所 left top right bottom): (線の種類)(色)(太さ)
線の色の指定
border: (色)
背景の色の指定
background: (色)
余白の指定
padding: (上)(右)(下)(左)
範囲の指定
width:(範囲)
角の指定
丸角 border-radius:(四つ角すべての場合1つ)
border-radius:(左上)(右上)(右下)(左下)
border-radius:(左上)(右上)(右下)(左下)
影の指定
box-shadow:(入れたい場所)(色)
枠内の文字の色の指定
color:(色)
枠内の文字の大きさの指定
font-size: (大きさ)
枠内の文字の位置の指定
text-align: (場所center left right)
表示の仕方の例
******
<div style="border-left: solid red 7px; border-bottom: solid #666666 2px; padding-left: 8px;">******</div>
******
<div style="border: #666666 solid 2px; border-left: red solid 10px; padding: 20px; background: pink; font-size:50%;">******</div>
******
<div style="border: #666666 solid 2px; padding: 20px; border-radius: 10px 0 10px 0;">******</div>
******
<div style="border:1px #333333 solid; padding: 20px; box-shadow: 0 2px 3px 0 #666666;">******</div>
点線・破線の大きさを変えるには
******
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;">******</div>
******
<div style="padding: 10px; margin-bottom: 10px ;border: 2px dotted #333333;">******</div>