紹介する作品は実際に公開しています。覗いて頂けると嬉しいです|ω^)
「Base」紹介HP → https://ss719917.stars.ne.jp/HP/index.html
「Base」試用版 → https://ss719917.stars.ne.jp/
探究活動で開発したWebアプリ「Base」を題材に，設計や開発時の工夫を全5回で紹介します。
実装の意図
成績グラフでは，まだ入力されていないテストも存在します。
空欄ではなく， 『×』 を表示しデータが存在しないことを表現したい，と考え当初は文字で設計していました。
<span>×</span>
しかし，実際にグラフへ組み込んでみると，
- フォントの幅に最小値があり，途中でデザインが崩れてしまう
- OSのシステムフォントによって，表示される見た目にばらつきがある
特に文字サイズに関しては画面サイズによって自動で制限されてしまうため，文字ではサイズ調整に限界がありました。
CSSでの描画
そこで，「文字を表示する」から「×を描画する」へ方針を転換し，下記のコードを実装しました。
.graph-text::before{
transform:rotate(45deg);
}
.graph-text::after{
transform:rotate(-45deg);
}
疑似要素を利用して，45度と-45度に回転させた線を重ねています。
これにより，線の長さや太さなども自在に更新できるようになりました。
最後に
こちらが完成形になります。ここに文字は一切使用していません。
文字を表示するだけなら簡単ですが，表示サイズやデザインを細かく調整したい場合は、CSSで図形として描画するのも良いのではないでしょうか。
次回は，これまで紹介した色分けや表示方法を組み合わせて，divだけで棒グラフ全体を描画した方法を紹介します。
「Base」紹介HP(再掲) → https://ss719917.stars.ne.jp/HP/index.html
「Base」試用版(再掲) → https://ss719917.stars.ne.jp/
前回 → ④(前編)：Chart.jsを使わずに成績グラフを実装する - グラデーション生成関数
今回 → ④(中編)：Chart.jsを使わずに成績グラフを実装する - ×の描画
次回 → ④(後編)：Chart.jsを使わずに成績グラフを実装する - divで棒グラフを作る
投稿次第，掲載します。