罫線（hr）
罫線（hr）のバリエーションを考える。_block-styles.scssに定義していく。
markdown では、
------ とか、
***************** とか
書くと罫線(hr)になる。色と太さとスタイルを変えられるようにしてみる。
色変更
hrの色はbackground属性を変更することでできる。{: .none}で透明化できるようにした。bg-xxxxでxxxxに適当な（WEB標準140色で定義された）色名を付けると、背景色を変えられるようにした。
さきほどの線に他の色を付けてみる。ちょっとわずらわしいのだが、-----------の下にクラス指定を書かないと反映されない。
[sample markdown]
-----------------------------------------
{: .bg-palegreen}
[palegreen]
[royalblue]
[olivedrab]
[orange]
[deeppink]
太さ変更
hrタグの太さは特殊でheightで指定する。height のクラス.ht-Xpxをつくってみた。
.ht-1pxで太さ1px。そんなにバリエーションは要らないだろう。
height の指定は前の項目で作った.ht-Xpxクラスで罫線に特化したものではないので、高さ123px の線（それ面？）なんてできてしまうが、普通は1pxから10pxまであれば十分。
[markdown]
-----------------------------------------
{: .bg-gray .ht-1px}
[height 1px]
[height 2px]
[height 3px]
[height 4px]
[height 5px]
[height 6px]
[height 7px]
[height 8px]
[height 9px]
[height 10px]
罫線のスタイル変更
hr のスタイル変更は特殊。hr要素って線というより実は面だから。
やり方はまた他のエレメントで説明するが、CSS変数を使ってborder-top: Xpx style colorの形の設定を渡している。
insetとoutsetについては設定はできるが効果がないので省略。
[default: 1px solid gray]
[solid]
[dotted]
[dashed]
[double]
[groove]
[ridge]
dashedを例に markdown を載せておく。
[markdown]
------------------------------------------------
{: .hr-style .bg-transparent style="--hr-style:3px dashed palegreen" }
背景を.bg-transparentせずに色を指定するとこういう罫線にもなる。
まあこの程度のことなら{: style="border:8px dashed lime"}などとALDsに直接CSS指定を書いても同じでバカバカしい（いやそのほうがちょっとだけ短い（笑））けど、このCSS変数を渡すやり方が表組みなど複雑な指定で使えるようになるので、知っていて損はないと思う。
.hr.dashedなどとしてスタイル指定の個々のクラスを作ってもよいが、さほど使わないだろうし、そこでまた太さや色を合わせて指定するぐらいなら一括指定できれば十分。
実は後で作る.borderクラスの機能を hr に使えば同じようなことができる。
.borderを単純に使うと面に対する周囲の線に設定するので、こういう変な罫線になる。専用の.hr-styleクラスを使うほうが早い。
ただ.borderクラスは、CSS変数を使わずにクラス名だけで指定する方法があるので、トップのボーダーにだけスタイルを指定するなどの hr 特有のことがわかっていれば同じことができる。ただ、一度ボーダーの太さを全て0にしてトップボーダーだけ太さ指定しなおすなど、指定するのがかなり面倒。
[markdown]
---------------------------------------------
{: .bg-transparent .border.bdr-wd-0px.bdr-twd-3px.dashed.bdr-color-lime }