現行の「ピッタリ途中式ボックス」
５×(□-3)=30 2×(3)=6
５×(□-3)=6 3-2=1
５×(-3)□=3+6=9
５×(□-3)=6 3-2=1
５×(-3)□=3+6=9
試作1
三重構造。一番外側のdivは背景白のflex。真ん中がN-boxでdisplayをinline-flexに。一番内側にdivが4つ横に並んでいる。左側から「問題式の左辺と等号(右寄せ)」「問題式の右辺(左寄せ)」「計算例の左辺と等号(右寄せ)」「計算例の右辺(左寄せ)」
(問題
5×(□-3)=
(□-3)=
□-3=
□=
5×(□-3)=
(□-3)=
□-3=
□=
式)
30
30÷5=6
6
6+3=9
30
30÷5=6
6
6+3=9
(計算
2×(3)=
(3)=
3-2=
3=
2×(3)=
(3)=
3-2=
3=
例)
6
6÷2
1
1+2
6
6÷2
1
1+2
試作2(CSS)
4つのdiv「L1」「L2」「R1」「R2」を内包する「C-box4」を「D-box1」と「box-ctr1」に入れる(四重構造！)。C-box4とD-box1の間の上下にpをはさんでいる。
(問題式) (計算例)
5×(□-3)=
(□-3)=
□-3=
□=
(□-3)=
□-3=
□=
30
30÷5=6
6
6+3=9
30÷5=6
6
6+3=9
2×(3)=
(3)=
3-2=
3=
(3)=
3-2=
3=
6
6÷2
1
1+2
6÷2
1
1+2
この解説はC-box4の外側