(補足)
それぞれを加えたり外したりしてアレンジしてみてね。
また、立体影線より下は、文字の装飾の応用なので、詳しいアレンジは、そちらも参考にしてみてね。
(注1)線の形を変えると、線の色が、白になります。そのため、背景色が白の場合は、一部の形の線(実線・二重線・丸い点線・四角い点線)で線が見えなくなります。
(注2)線の形が、二重線の場合など、一部の形では、太さが細いと、上手く表示されません。
(注3)枠付き線のみ、「align="〜〜"」と言う位置を表すタグが付けられないため、線の位置を指定したい時は、1.の「文字を〜〜に寄せる」と言うタグを使ってくださいね。詳しくは、(応用編2)を見てね。
↓枠の形をここから選んでね。
実線 :solid
二重線 :double
丸い点線 :dotted
四角い点線 :dashed
内沈み線 :inset
内浮き出し線:outset
山線 :ridge
谷線 :groove
赤い文字の部分を変更してコピー貼り付けで使ってね! | |
---|---|
普通の線 | <hr> |
線の太さを変える | <hr size="数字"> |
普通の色線 | <hr color="#線の色"> |
線の形と太さを変える(注1.2) | <hr size="数字" style="border-style:枠の形"> |
線の形と色を変える(注1) | <hr color="#線の色" style="border-style:枠の形"> |
線の形と太さと色を変える(注1.2) | <hr size="数字" color="#線の色" style="border-style:枠の形"> |
平面的な線 | <hr noshade> |
平面的な色線 | <hr noshade color="#線の色"> |
左側の線 | <hr width="線の長さ" align="left"> |
中央の線 | <hr width="線の長さ" align="center"> |
右側の線 | <hr width="線の長さ" align="right"> |
応用編 | <hr noshade size="数字" color="#線の色" width="線の長さ" align="right"> |
立体影線 | <font style="filter: shadow(color=#影の色,direction=135); width: 100%"><hr></font> |
立体影線(応用編) | <font style="filter: shadow(color=#影の色,strength=影の強度,direction=135); width: 100%"><hr color="#線の色" width="線の長さ"></font> |
重ね影線 | <font style="filter: dropshadow(color=#影の色); width: 100%"><hr></font> |
重ね影線(応用編) | <font style="filter: dropshadow(color=#影の色); width: 100%"><hr color="#線の色" width="線の長さ"></font> |
発光線 | <font style="filter: glow(color=#影の色); width: 100%"><hr></font> |
発光線(応用編) | <font style="filter: glow(color=#影の色,strength=発光強度); width: 100%"><hr color="#線の色" width="線の長さ"></font> |
枠付き線(注3) | <font style="border-style:枠の形;border-color:#枠の色;border-width:枠の太さ;height:1"><hr></font> |
枠付き線(応用編)(注3) | <font style="border-style:枠の形;border-color:#枠の色;border-width:枠の太さ;height:1"><hr color="#線の色" width="線の長さ"></font> |
右側の枠付き線(応用編2)(注3) | <div align="right"><font style="border-style:枠の形;border-color:#枠の色;border-width:枠の太さ;height:1"><hr color="#線の色" width="線の長さ"></font></div> |