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

作成方針(2021/07/08)
まずアナログとペイントソフトで沢山書いて書式を定めて、それからテンプレ化。
矢印はドローソフトで作った画像を配置(時間を最小限にする！)

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

試作アルファ

仮称　RelationBox(仮)　「R-box0」

材料はコレ

15

×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」等のインボックスに絶対配置する。

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

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

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