HTMLとCSSでマトリックス図を描く

仕事でCSSフレームワークを使わずにテーブルを作成する機会があったので、備忘録としてプライベートでもマトリクス図を作ってみました。

SPAフレームワークのAngularを使用しています。

サンプルとして、年収と年齢から、その人がお客さんになってくれそうかどうかを判定するマトリクス図を作ってみます（トップの画像が完成図）。

デフォルトで<table>タグを使うと、セルとセルの間に余白ができてしまうので、下記のCSSを追加してセルの隙間を消します。

table {
  border-collapse: collapse;
  border-spacing: 0;
}

完成したマトリクス図の全コードになります。Angualrフレームワークを使用しない場合は、matrix.component.tsは必要ないので無視してください。レイアウトの設定はSCSSを使用しています。

中安拓也のブログ