作成方針(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」等のインボックスに絶対配置する。
去年
×0.8
矢と数字を別オブジェクトにした。
去年
(×0.8)
15×0.8
=12
元の数と先の数の注釈を子要素にした
15
8割
□
=12
ここまでやって気づいた。全部の要素を絶対配置にするのは効率が悪い。
全体を「yjz1」のようなセットにして、これを「Grd-ibx」に配置する(真ん中になるように)。「yjz1」の中にパーツを相対配置する(最初に戻った?www)。