これヤバイわ。前人未到な気がするｗ
誰も作らなかった＝役に立たない。ペイしない のかもしれないけど、とりあえず実戦投入してから判断しよう。
目次(クリックでジャンプ)
基礎研究Ⅰ
番外編での試み(インラインのみ)
「図解画像に文字を後入れする」での番外編
ボックス全体「Z-box1」に「cap1u」(上のキャプション)「tpl1」(画像)「cap1d」(下のキャプション)を入れる。
「tpl1」に画像(img)と後乗せ文字(「spi」div)を入れる。
この「spi」を改造して線分図を表示したのが下図
高さを20pxで指定して背景色グラデで中央に4pxの線を表示。widthで長さ。両端の区切りはボーダーで表現。
面積図mszも表示してみる。これは高さと幅を指定するだけでOK
クラスを設定する
線分はクラス「sbn1」で本体は線分では無く、線分と同じ幅で大きな高さのボックスで、中身の文字(丸数字か品目)を上寄せに表示する。位置はabsoluteでtopとleftを指定する。transform:translateY(calc(-100% + 10px));で下にずらしてある。
widthで線分図の幅を指定。heightは初期設定が1.3emにしてあり文字が線分図の少し上に表示される。heightを高くすると文字が線分図から離れていく。
線分図はbefore要素で高さは20px。背景色で線を表現。左右のボーダーで区切りを表現。位置はabsoluteでbottom:-10px;left:0;
クラスを「sbn1 range」と重畳指定すると範囲線が文字と同じ高さで表示される
クラスを「sbn1 d」と重畳指定すると文字が線分の下に表示される
線分の題名(ラベル)は「sbl1」で右寄せ(右端を線分と同じ数値で位置指定)。文字を小さくしたい時は「sbl1 S」「sbl1 XS」
さらに、合計を示す波括弧を作成。本体は合計を示す文字で高さでカッコの長さが決まる。カッコはbefore要素で幅は固定で高さは100％、角はafter要素で45°回転してから縦に短縮。
全体をtranslateXで右に寄せているので波括弧の左端を、translateYで上に寄せているのでカッコのくちばしの先を基準点にする。
重畳クラス「sbn1 R」で区切り線が右だけ「sbn1 L」で区切り線が左だけになる。
線分図の起点終点をたどる線measure line「msl1」も設定。位置基準はleft top でwidthとheightをインラインで指定。widthは1％くらい大きくしていしないとずれる…
デフォルトで左右に点線がタテに走る。「msl1 R」で右のみ「msl1 L」で左のみ
➅
1
ついでに「矢印図」につかう矢印ユニットを作成「arw1」位置は矢印の先と根本の中間部分を基準に%で指定
本体は倍数。棒部分はbefore要素で先端はafter要素(全体を回転できないので、チマチマと位置合わせをした…)
位置合わせがまだうまくできず…
更に充実させる
線分に色をつけてみる(三量の和差算を念頭に)
線分の長さを割合で指定してみた。
一番長い線分「母親」⑤を50％として、Bはwidth:calc(50% * (3 / 5 ) )、Cはwidth:calc(50% * (4 / 5 ) )
12
2
2
ハサミ画像はIllustratorで作った画像をPhotoshopに持っていって透明png画像にして、Tplt1の中に入れてwidth=”30″(px不要)にしてstyle=”position:absolute;left:64%;top:79%;transform:rotate(137deg);”で位置を指定する。filter:contrast(1.5);で画像をクッキリさせてもよい
改造案
線分の色付けを、もとの色を残して上から蛍光ペンでマーキングしたスタイルにしてみる
テスト済みのCSS(緑)
border-color: #777;
background: linear-gradient(180deg,transparent 5px,#4d7 6px,#4d7 7px,#777 8px,#777 11px,#4d7 12px,#4d7 13px,transparent 14px);
基礎研究Ⅱ(変更)
名称の変更をする
画像を入れるdivを「tplt」から「zky」にして、一つ外側のdiv「zky」を廃止して標準ボックス「D-box1」に入れる。この方が単純な使用になるだろう。
それに応じて「zky」と「D-box1」と幅の使用を変更する。