Border
CSS変数でスタイルをアレンジするやり方が分かったので、ボーダー値の変更に応用してみる。
この設定も_block-style.scssに追加すればいいと思う。
.border クラス
単に.borderクラスだけを指定するとデフォルト値のボーダーが付く。1px solid #cdcdcdになる。
[markdown]
Box with Border
{: .border .pad-10px .wd-30 .text.align-c}
Box with Border
.border-none クラス
ボーダーをなしにするクラス。
[markdown]
Box no border
{: .border-none .pad-10px .wd-30 .text.align-c}
Box no border
–bdr-set CSS変数
さらに--bdr-setCSS変数で一括指定
[markdown]
Box with Border Set
{: .border .pad-10x20 .wd-30 .text.align-c}
{: style="--bdr-set:8px double lime;"}
Box with Border Set
Border 属性の個別指定
.bdr-widthボーダーの太さ、.bdr-styleスタイル、.border-color色、.bdr-radで角丸、それぞれ個別に指定するクラスを作った。ただしこの3種でボーダーを表示するためにはデフォルトクラス.borderが必要。
ボーダーの太さ
.bdr-width
.bdr-widthはボーダーの太さ指定。
--bdr-widthで太さを指定する。数値を省略した場合はデフォルトの 1px。
上下に2px、左右に6pxを指定した例。
[markdown]
Box with 2ｘ6px Border
{: .border .bdr-width .pad-10x20 .wd-30 .text.align-c}
{: style="--bdr-width: 2px 6px;"}
Box with 2ｘ6px Border
.bwd-wd-Xpx
.bdr-wd-2pxといった形でクラス名だけでボーダーの太さを指定する方法。1〜10pxまで対応。ただし.bdr-widthを使う方法と違って縦横の巾を変えたりはできない。
.border.bdr-wd-10pxを指定した例。
Box with 5px Border
ボーダーのスタイル
.bdr-style
.bdr-styleボーダーのスタイル。省略時のデフォルトは solid
[markdown]
Box with Dashed & Solid Border
{: .border .bdr-style .bdr-width .pad-10x20 .wd-40 .text.align-c}
{: style="--bdr-style:dashed solid; --bdr-width: 3px"}
Box with Dashed & Solid Border
.styleName
スタイル名を直接指定する方法。より簡単。ただし.bdr-styleを使う方法と違って縦横別のスタイルにしたりはできない。
.border.dashedの例。
[markdown]
Box with Dashed Border
{: .border.dashed .bdr-wd-3px .pad-10x20 .wd-40 .text.align-c}
Box with Dashed Border
ボーダーの色
.bdr-color
.bdr-colorボーダーの色。省略時のデフォルトは明るいグレイ（#cdcdcd）
[markdown]
Box with color Border
{: .border.bdr-wd-8px .bdr-color .pad-10x20 .wd-40 .text.align-c}
{: style="--bdr-color:red rgba(170, 50, 220, .6) green;"}
Box with color Border
.bdr-color-colorName
.bdr-color-色名で指定する簡単な方法。ただし.bdr-colorのような複雑な指定はできない。
[markdown]
Box with color Border
{: .border.bdr-wd-8px.bdr-color-springgreen .pad-10x20 .wd-40 .text.align-c}
Box with color Border
組合せ例
ボーダーの色がピンクで、スタイルがdashedの太いボーダー。
{: .border.bdr-wd-10px.dashed.bdr-color-hotpink}
Box with Pink Dashed Border
上の.dashedを省略してみたら、デフォルトの.solidになった。
{:.border.bdr-wd-10px.bdr-color-hotpink}
Box with Pink Solid Border
色も省略したもの。デフォルトのグレーになる
{:.border.bdr-wd-10px}
Box with Default Gray Solid Border, Width:10px
各辺の個別の太さ
.bdr-lwd, rwd, twd, bwd
左辺の太さ: .bdr-lwd
右辺の太さ: .bdr-rwd
上辺の太さ: .bdr-twd
下辺の太さ: .bdr-bwd
左右だけ10px, 上下は2px。CSSの指定と同じで後からの指定が前の指定を上書きする。この場合はまず全体を太さ2pxにしてから、左右の太さを個別に指定。
[markdown]
Box with Border
{: .border .bdr-width .bdr-color .bdr-lwd .bdr-rwd .pad-10x20 .wd-40 .text.align-c}
{: style="--bdr-width:2px; --bdr-color:gold; --bdr-lwd:10px; --bdr-rwd:10px;"}
Box with Border
左右は3px, 上は15px, 下は10px
[markdown]
Box with Border
{: .border .bdr-width .bdr-color .bdr-twd .bdr-bwd .pad-10x20 .wd-40 .text.align-c}
{: style="--bdr-width:3px; --bdr-color:olivedrab; --bdr-twd:15px; --bdr-bwd:10px;"}
Box with Border
いったん全体のボーダー幅を0にして後で必要なボーダーだけ指定しなおせば、特定のボーダーだけ指定することになります。下辺だけ残した例。
[markdown]
Box with Bottom Border
{: .border .bdr-width .bdr-color .bdr-bwd .pad-b0 .wd-35 .text.align-c .wd-flex}
{: style="--bdr-width:0; --bdr-color:coral; --bdr-bwd:3px;"}
Box with Bottom Border
.bdr-twd-Xpx
でもだんだん複雑になって書き方が面倒です。なのでクラス名だけで縦横左右の太さを個別に指定するやり方も用意してます。
上記の.bdr-twdに数値指定をくっつけて.bdr-twd-5pxなどと指定するだけ。ただし1〜10pxまでの対応。
[markdown]
Box with Left & Bottom Border
{: .border.bdr-wd-0px.bdr-lwd-10px.bdr-bwd-2px.bdr-color-royalblue .pad-l12px.pad-b5px .wd-50 .text.align-l}
Box with Left & Bottom Border
上の例では、topとrightのボーダーの太さを何も指定しないと、デフォルトの1pxになるので、一旦消すために.bdr-wd-0pxを先に指定している。これは.bdr-twd-0px.bdr-rwd-0pxと個別に消しても同じこと。
角丸のボーダー
.bdr-rad
.bdr-radで角丸、style="--bdr-rad:数値"で値指定。
[markdown]
Box with Border Radius
{: .border .bdr-width .bdr-color .bdr-rad .pad-10x20 .wd-40 .text.align-c}
{: style="--bdr-width:20px; --bdr-color:royalblue; --bdr-rad:35% 5%;"}
Box with Border Radius
.bdr-rad-Xpx
角丸の指定にも.bdr-rad-5pxなどとして、クラス名だけで指定する方法がある。1〜50pxまで対応。もちろん.bdr-radのほうが上記のような複雑な指定（css指定そのものなので）ができる。
Box with Border Radius 5px
Box with Border Radius 10px
Box with Border Radius 20px
Box with Border Radius 30px
Box with Border Radius 40px
Box with Border Radius 50px