HP上で見出しなどに使用する枠線を引く方法

今日は見出しなどに良く使われている枠線の引き方を紹介してみたいと思います・・・

段落要素のP要素を使用します・・・

• 先ず、ボーダーの場所は・・・
  1. 左側の枠線の太さ・・・border-left-width
     
  2. 下側の枠線の太さ・・・border-bottom-width
     
  3. 右側枠線の太さ・・・border-right-width
     
  4. 上側枠線の太さ・・・border-top-width

今回は左側枠線の太さを15px・下側枠線を3pxと指定しています。

右側と上側は必要ないので右側枠線hは0px・上側枠線も0pxと指定しています。

• ライム色のところでデザインを変更
• ブルー色のところで枠線の色を変更
• 赤色ところで枠線の太さを変更して下さい。

1. 　左枠が太く下枠は細く

   • ＜P style="border:solid;border-color:lime;border-left-width:15px;border-bottom-width:3px;border-right-width:0px;border-top-width:0px"＞　左枠が太く下枠は細く＜/P＞
   
   
   

2. 　左枠が太く下枠は細く

   • ＜P style="border:ridge;border-color:deepskyblue;border-left-width:15px;border-bottom-width:3px;border-right-width:0px;border-top-width:0px"＞　左枠が太く下枠は細く＜/P＞
   
   
   

3. 　左枠が太く下枠は細く

   • ＜P style="border:double;border-color:deepskyblue;border-left-width:15px;border-bottom-width:3px;border-right-width:0px;border-top-width:0px"＞　左枠が太く下枠は細く＜/P＞

今日の小技は如何でしたか？