超絶テクニック】htmlとCSSで図解を作る!!

これヤバイわ。前人未到な気がするw

誰も作らなかった=役に立たない。ペイしない のかもしれないけど、とりあえず実戦投入してから判断しよう。

基礎研究Ⅰ

番外編での試み(インラインのみ)

「図解画像に文字を後入れする」での番外編

ボックス全体「zky1」に「cap1u」(上のキャプション)「tpl1」(画像)「cap1d」(下のキャプション)を入れる。

「tpl1」に画像(img)と後乗せ文字(「spi」div)を入れる。

この「spi」を改造して線分図を表示したのが下図

高さを20pxで指定して背景色グラデで中央に4pxの線を表示。widthで長さ。両端の区切りはボーダーで表現。

面積図mszも表示してみる。これは高さと幅を指定するだけでOK

図1:172を一の位で四捨五入
線分その1
面積図1
面積図2

説明書き

クラスを設定する

線分はクラス「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」で左のみ

線分図を作るパーツをCSSのみで作る
母親
3
測定線
B
2
合計

1
×12
×10000

説明書き

ついでに「矢印図」につかう矢印ユニットを作成「arw1」位置は矢印の先と根本の中間部分を基準に%で指定
本体は倍数。棒部分はbefore要素で先端はafter要素(全体を回転できないので、チマチマと位置合わせをした…)
位置合わせがまだうまくできず…

更に充実させる

線分に色をつけてみる(三量の和差算を念頭に)

線分の長さを割合で指定してみた。
一番長い線分「母親」⑤を50%として、Bはwidth:calc(50% * (3 / 5 ) )、Cはwidth:calc(50% * (4 / 5 ) )

線分図を作るパーツをCSSのみで作る

母親
5
測定線1
測定線2
B
3
C
4
合計
12
2

2

2

説明書き

ハサミ画像はIllustratorで作った画像をPhotoshopに持っていって透明png画像にして、tpl1の中に入れてwidth=”30″にして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);

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