職人技】すだれ算用C-BOX5を「Sdz-ibx1」インボックスに再設計!【芸術的

CSSとhtmlで色々試してみて位置合わせの難しさを実感した(無色の数字をおいたり)ので、ラスター画像との合わせ技にしようかと思い(その方がPHPでの量産も楽そうだし)、まずイラストレータで一段、二段、三段、四段の画像を作ろうとして気づいた。

D-boxの中にposition:relative;なboxを配置して中にabsoluteで位置をすれば、線分図よりもずっとラクにhtmlで作れると。

スポンサーリンク

試作アルファ版

単純に段ごとに「sdr1」divにして、その直下に因数のdivをposition:absolute;にするという平凡な構成に

最下段は自動で修正される

通常は2ケタがちょうど入る幅で、C-box5cに重複クラスWをつけると3ケタ、XWをつけると4ケタの数が入る幅になる。

D-boxの中に入れた
「C-box5c W」
2

210

3

105

5

35

7

注釈

1数のすだれ算としてはこれでOKでは?

試作ベータ

基本形

基本要素の構成

全体のdivをC-box5から単純に「Sdz-ibx1」に、段は「floor」に名称変更し、左端の因数は「isu」途中の約数は「kaz」クラスを設定し「floor」直下に入れる。

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

付属要素

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

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

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

幅広のバリエーション

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

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

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

2数のすだれ算は全体を「Sdz-ibx1 D」という重畳クラスにして幅を広げ、2数目(左の数)は「kaz2」クラスを設定

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

3ケタの数の場合は、全体を三重畳クラス「Sdz-ibx1 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-ibx1 T」を設定し、2数目(真ん中)は「kaz2」3数目(左)「kaz3」クラスを設定

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-ibx1 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数全部を割れない因数は重畳クラス「isu imp」指定するとカッコに入って薄くなり、下に降りるkazには重畳クラス「kaz 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-ibx1 Nsn」を指定する

余りを「rst」クラスにして「floor」divの中にposition:absolute;で入れる

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

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

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

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

れれれ

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