すだれ算インボックス内のdivのクラスを指定せずにCSS側で判断させるバージョン2
サンプル
基本形
基本要素の構成
全体のdivを「Sdz-ibx2」にする。
直下のdivが段になる。その中に「因数」「約数」の順にdivに入れて配置すると、自動でCSSが効く
「Sdz-ibx2」
付属要素
各段(floor)の「)」はfloorのbefore要素で表現。
最大公約数を示す縦の青線はSdz-ibx2全体のafter要素、先端の矢印は最下段のfloorのbefore要素を「)」から変更して表現。
最小公倍数を示すL字型の赤線はSdz-ibx2全体のafter要素、先端の矢印は最下段のfloorのafter要素で表現。
素因数分解表示
D-boxの下キャプションを利用
sdz-ibx2に隣接したcap1dにスタイルを指定
中のspanでクラス「lcm」「gcm」を指定すると矢印がつく
L字線なし
途中経過などでL字線を表示したくない場合は全体を「Sdz-ibx2 Pln」と重畳クラス指定(Pは大文字)
幅広のバリエーション
3ケタの数を扱う場合は重畳クラス「Sdz-ibx2 W」を指定して幅を広げる
「Sdz-ibx2 W」
2数3数のバリエーション
2数のすだれ算は全体を「Sdz-ibx2 D」という重畳クラスにして幅を広げる。直下のdiv内に「因数」「約数1」「約数2」の順に無名のdivに入れる
「Sdz-ibx1 D」
最小公倍数2×3×2×5=60
3ケタの数の場合は、全体を三重畳クラス「Sdz-ibx2 D W」で幅広にする
「Sdz-ibx1 D W」
最小公倍数2×3×5×5×7=1050
同様に3数のすだれ算は重畳クラス「Sdz-ibx2 T」を設定し、直下の無名div(floor)内部に、「因数」「約数1」「約数2」「約数3」の順にdivに入れて配置
「Sdz-ibx1 T」
最小公倍数2×3×3×2×5=180
3ケタの数の場合は、全体を三重畳クラス「Sdz-ibx2 T W」で指定
「Sdz-ibx1 T W」
最小公倍数2×3×5×3×5×7=3150
算数のすだれ算の特別表示。3数全部を割れない因数は「imp」クラスを指定するとカッコに入って薄くなり、下に降りる約数には「dwn」クラスを指定すると赤い矢印がつく
「Sdz-ibx1 T W」
最小公倍数2×3×5×3×5×7=3150
我ながら凄えの出来たなｗｗｗ
N進法用のバリエ！
重畳クラス「Sdz-ibx2 Nsn」を指定する
直下の無名div(floor)内に「因数」「約数」「余り」の順にdivに入れて配置。最上段と最下段は形式が異なるが自動でCSSが効く
L字線は本体のbefore要素で、先端は最上段のfloorのafter要素。
数が大きい場合は「W」を追加して「Sdz-ibx2 Nsn W」
れれれ