中安拓也のブログ

中安拓也がプログラミングについて書くブログ

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

f:id:l08084:20200502232249p:plain
作成したマトリクス図

はじめに

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

環境

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

  • Angular: 8.2.14
  • Node: 12.13.1

マトリクス図の作成

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

CSSリセット

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

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

マトリクス図の全コード

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

マトリクス図

参考サイト

flexboxを使った中央寄せについて - Qiita

CSSで作図する - Qiita