二量の関係を示すR-box作成→インボックスのパーツ化

授業で疲れたので、気分転換にクリエイティブな作業に逃避

試作アルファ

仮称 RelationBox(仮) 「R-box0」

材料はコレ

15

×0.8

12

÷0.8

作ってみる

前置される文章。前置される文章。前置される文章。

□の0.8倍は12
×0.8
12
÷0.8
□は12÷0.8です。

けっこう上手く出来た。これでPHPと組み合わせてhtmlプリントの量産ができる。

仕様

ボックス用のコンテナ「box-ctr1」に標準ボックス「D-box1」を入れて、その中に「R-box」を入れている

左の数(元の数)はクラス名「moto」左の数(元の数)はクラス名「saki」

右向きの矢印の数はクラス名「Rya」で付属要素で矢印を作った。before要素が矢印の本体でafter要素が先の部分。

この矢印の作成に手こずったのでメモしておく。

はじめ矢印の本体(before要素)をborder-radius50%の上ボーダーで作ろうとしたら両端が細くて見た目が悪いので、上と右にだけボーダーを持つ正方形を45°回転させて表現。

矢印の先(after要素)も同じ作りだが、尖った形状にするために三段階で変形させている(transform:rotate(-52deg) scaleX(0.6) rotate(45deg);)左から右に効果が上書きされてゆく。

before要素とafter要素の右下をそろえて良さげな位置に配置する。その上でtransform-originをbottom rightに設定して変形すると、位置合わせがラクチン。

改善点

元の数と先の数が大きくなると矢印との関係がおかしくなる。

R-box自体の大きさを固定にして(11emくらい?)(大きさを重畳クラス「S」「L」で調整指定)

元の数と先の数もposition:absolute;にして、元の数は位置指定rightのtext-align:right;、先の数は位置指定leftのtext-align:left;にすればよいのではないか?

試作ベータ

「Grd-ibx」等のインボックスに絶対配置する。

図1:

去年
(80%)
×0.8
12
÷0.8
説明書き

矢と数字を別オブジェクトにした。

図1:
15
去年
80%
(×0.8)

15×0.8
=12
÷0.8
説明書き

元の数と先の数の注釈を子要素にした

図1:

15

去年
(×0.8)
8割

15×0.8
=12
÷0.8
説明書き

ここまでやって気づいた。全部の要素を絶対配置にするのは効率が悪い。
全体を「yjz1」のようなセットにして、これを「Grd-ibx」に配置する(真ん中になるように)。「yjz1」の中にパーツを相対配置する(最初に戻った?www)。

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