【HTML】HTMLで区切り線を引く方法 | らい氏のブックマーク

らい氏のブックマーク

気になったことを書いています。

 

・枠線の種類

実践: solid


 

二重線: double


 

点線: dotted


 

破線: dashed


 

 

・hrはデフォルトで立体感がある水平線なので、立体感をなくすために

border-bottom: noneを記述します。要素の下側の境界線を表示しないという意味です。

 

・文字の下に点線を引く場合は、border- bottomプロパティに、文字の上に点線を引く場合はborder-topにsolidを指定します。

 

HTMLに

 

<hr style="border-top: 1px solid #94d175; border-bottom: none;">

 

 

[表示]

 


 

 

・太さを変えたいときは「order-top: 1px」の数値を変えてください。

 

・線の種類を変えたいときは「solid」のところを線の種類から選んで変えてみてください。

 

・色を変えたい場合は「#94d175」のところを変えてください。

 

 

 

 

■ほかにも遊んでみる

 

・短くする (width: 80%;)

 


 

HTMLに

<hr style="border-top: 2px solid #7f9aeb; width: 80%; border-bottom: none;">

 

 

・右から50% (margin-right: 50%)

 


 

HTMLに

<hr style=" margin-right: 50%; border-top: 2px solid #7f9aeb;border-bottom: none;">

 

 

 

・左から50% (margin-right: 50%)

 


 

HTMLに

 

<hr style="margin-left: 50%; border-top: 2px solid #7f9aeb;border-bottom: none;">