商品分析などに使うマトリクス（ポジショニングマップ）のCSS

※当サイトにはプロモーションが含まれています。

市場におけるポジション（立ち位置）を示すのに、マトリクス表を利用すると便利です。

例えば、下記のような表です。

高機能

シンプル

価格安い

価格高い

★賢威

★SWELL

★THOR

このような２軸で可視化するマトリクス表をHTMLとCSSで作ってみました。

商品の評価などに使えるマトリクスのCSS

商品の評価などに使うマトリクスのHTMLとCSSです。

HTML

<div class="matrix-container">
<div class="axis-x"></div>
<div class="axis-y"></div>

<!-- x軸とy軸の名称を指定 -->
<div class="label label-top">高機能</div>
<div class="label label-bottom">シンプル</div>
<div class="label label-left">価格安い</div>
<div class="label label-right">価格高い</div>

<!-- 星の位置を直接HTMLで指定 -->
<div class="star star1" style="left: 25%; top: 25%;">★賢威</div>
<div class="star star2" style="left: 60%; top: 40%;">★SWELL</div>
<div class="star star3" style="left: 40%; top: 70%;">★THOR</div>
</div>

x軸とy軸の名称は次の箇所で記載します。

<!-- x軸とy軸の名称を指定 -->
<div class="label label-top">高機能</div>
<div class="label label-bottom">シンプル</div>
<div class="label label-left">価格安い</div>
<div class="label label-right">価格高い</div>

また、星の位置は、left:**%、top:**%で調整します。

<div class="star star1" style="left: 25%; top: 25%;">★賢威</div>
<div class="star star2" style="left: 60%; top: 40%;">★SWELL</div>
<div class="star star3" style="left: 40%; top: 70%;">★THOR</div>

CSS

.matrix-container {
position: relative;
width: 300px;
height: 300px;
margin: 20px auto;
}

/* 縦横の軸 */
.axis-x, .axis-y {
position: absolute;
background: black;
}

.axis-x {
width: 100%;
height: 2px;
top: 50%;
left: 0;
}

.axis-y {
width: 2px;
height: 100%;
left: 50%;
top: 0;
}

/* ラベル */
.label {
position: absolute;
font-size: 14px;
font-weight: bold;
}
 /* 文字位置の調整 */
.label-top { top: 0px; left: 35%; transform: translateX(-50%); }
.label-bottom { bottom: 0px; left: 65%; transform: translateX(-50%); } 
.label-left { left: 0px; top: 55%; transform: translateY(-50%); } 
.label-right { right: 0px; top: 45%; transform: translateY(-50%); }

/* 星の位置と色 */
.star {
position: absolute;
font-size: 24px;
white-space: nowrap;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
gap: 5px;
}
.star1 { color: gold; } /* 星1の色 */
.star2 { color: red; } /* 星2の色 */
.star3 { color: blue; } /* 星3の色 */

x軸とy軸の名称の位置を調整するのが下記の箇所の、top:**px、left:**pxで調整します。

 /* 文字位置の調整 */
.label-top { top: 0px; left: 35%; transform: translateX(-50%); }
.label-bottom { bottom: 0px; left: 65%; transform: translateX(-50%); } 
.label-left { left: 0px; top: 55%; transform: translateY(-50%); } 
.label-right { right: 0px; top: 45%; transform: translateY(-50%); }

このように記述すると、下記のような２軸で可視化するマトリクス表が作成できます。

高機能

シンプル

価格安い

価格高い

★賢威

★SWELL

★THOR

少し調整が複雑なこともあり、動作確認用として、HTMLとCSSをまとめたものも掲載しておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動的マトリクス評価</title>
<style>
.matrix-container {
position: relative;
width: 300px;
height: 300px;
margin: 20px auto;
}
/* 縦横の軸 */
.axis-x, .axis-y {
position: absolute;
background: black;
}
.axis-x {
width: 100%;
height: 2px;
top: 50%;
left: 0;
}
.axis-y {
width: 2px;
height: 100%;
left: 50%;
top: 0;
}
/* ラベル */
.label {
position: absolute;
font-size: 0.95em;
font-weight: bold;
}
.label-top { top: 0px; left: 40%; transform: translateX(-50%); }
.label-bottom { bottom: 0px; left: 65%; transform: translateX(-50%); }
.label-left { left: 0px; top: 55%; transform: translateY(-50%); }
.label-right { right: 0px; top: 45%; transform: translateY(-50%); }
/* 星の位置と色 */
.star {
position: absolute;
font-size: 1.05em;
white-space: nowrap;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
gap: 5px;
}
.star1 { color: orange; } /* 星1の色 */
.star2 { color: red; } /* 星2の色 */
.star3 { color: blue; } /* 星3の色 */
</style>
</head>
<body>
<div class="matrix-container">
<div class="axis-x"></div>
<div class="axis-y"></div>
<!-- x軸とy軸の名称を指定 -->
<div class="label label-top">高機能</div>
<div class="label label-bottom">シンプル</div>
<div class="label label-left">価格安い</div>
<div class="label label-right">価格高い</div>
<!-- 星の位置を直接HTMLで指定（3つに増やし、それぞれ色を変更） -->
<div class="star star1" style="left: 25%; top: 25%;">★賢威</div>
<div class="star star2" style="left: 60%; top: 40%;">★SWELL</div>
<div class="star star3" style="left: 40%; top: 70%;">★THOR</div>
</div>
</body>
</html>