すだれ算インボックスを簡易化

すだれ算インボックス内のdivのクラスを指定せずにCSS側で判断させる。

試作ベータ

基本形

基本要素の構成

全体のdivを「Sdz-ibx2」にする。

直下のdivが段になる。その中に「因数」「約数」の順にdivに入れて配置すると、自動でCSSが効く

D-boxの中に入れた
「Sdz-ibx2」
2
30
3
15
5
30=2×3×5

付属要素

各段(floor)の「)」はfloorのbefore要素で表現。

最大公約数を示す縦の青線はSdz-ibx2全体のafter要素、先端の矢印は最下段のfloorのbefore要素を「)」から変更して表現。

最小公倍数を示すL字型の赤線はSdz-ibx2全体のafter要素、先端の矢印は最下段のfloorのafter要素で表現。

素因数分解表示

 

幅広のバリエーション

3ケタの数を扱う場合は重畳クラス「Sdz-ibx2 W」を指定して幅を広げる

D-boxの中に入れた
「Sdz-ibx2 W」
2
210
3
105
5
35
7
210=2×3×5×7

2数3数のバリエーション

2数のすだれ算は全体を「Sdz-ibx2 D」という重畳クラスにして幅を広げる。直下のdiv内に「因数」「約数1」「約数2」の順に無名のdivに入れる

D-boxの中に入れた
「Sdz-ibx1 D」
2
12
30
3
6
15
2
5
最大公約数2×3=6
最小公倍数2×3×2×5=60

3ケタの数の場合は、全体を三重畳クラス「Sdz-ibx2 D W」で幅広にする

D-boxの中に入れた
「Sdz-ibx1 D W」
2
150
315
3
75
105
5
25
35
5
7
最大公約数2×3×5=30
最小公倍数2×3×5×5×7=1050

同様に3数のすだれ算は重畳クラス「Sdz-ibx2 T」を設定し、直下の無名div(floor)内部に、「因数」「約数1」「約数2」「約数3」の順にdivに入れて配置

D-boxの中に入れた
「Sdz-ibx1 T」
2
18
12
30
3
9
6
15
3
2
5
最大公約数2×3=6
最小公倍数2×3×3×2×5=180

3ケタの数の場合は、全体を三重畳クラス「Sdz-ibx2 T W」で指定

D-boxの中に入れた
「Sdz-ibx1 T W」
2
90
150
315
3
45
75
105
5
15
25
35
3
5
7
最大公約数2×3×5=30
最小公倍数2×3×5×3×5×7=3150

算数のすだれ算の特別表示。3数全部を割れない因数は「imp」クラスを指定するとカッコに入って薄くなり、下に降りる約数には「dwn」クラスを指定すると赤い矢印がつく

D-boxの中に入れた
「Sdz-ibx1 T W」
2
90
50
210
3
45
25
105
5
15
25
35
3
5
7
最大公約数2×5=10
最小公倍数2×3×5×3×5×7=3150

我ながら凄えの出来たなwww

N進法用のバリエ!

重畳クラス「Sdz-ibx2 Nsn」を指定する

直下の無名div(floor)内に「因数」「約数」「余り」の順にdivに入れて配置。最上段と最下段は形式が異なるが自動でCSSが効く

L字線は本体のbefore要素で、先端は最上段のfloorのafter要素。

「Sdz-ibx1 Nsn」
2
10
2
5
0
2
2
1
1
0
10=1010(2)

数が大きい場合は「W」を追加して「Sdz-ibx2 Nsn W」

「Sdz-ibx1 Nsn W」
4
100
4
25
0
4
6
1
4
1
2
0
1
100=1210(4)

れれれ

タイトルとURLをコピーしました