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

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から単純に「Sdz1」に、段は「floor」に名称変更し、左端の因数は「isu」途中の約数は「kaz」クラスを設定し「floor」直下に入れる。

D-boxの中に入れた
「Sdz1」
2
30
3
15
5
注釈

付属要素

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

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

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

幅広のバリエーション

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

D-boxの中に入れた
「Sdz1 W」
2
210
3
105
5
35
7
注釈

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

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

D-boxの中に入れた
「Sdz1 D」
2
12
30
3
6
15
2
5
注釈

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

D-boxの中に入れた
「Sdz1 D W」
2
150
315
3
75
105
5
25
35
5
7
注釈

同様に3数のすだれ算は重畳クラス「Sdz1 T」を設定し、2数目(真ん中)は「kaz2」3数目(左)「kaz3」クラスを設定

D-boxの中に入れた
「Sdz1 T」
2
12
12
30
3
12
6
15
12
2
5
注釈

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

D-boxの中に入れた
「Sdz1 T W」
2
90
150
315
3
45
75
105
5
15
25
35
3
5
7
注釈

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

 

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