※当サイトにはプロモーションが含まれています。
市場におけるポジション（立ち位置）を示すのに、マトリクス表を利用すると便利です。
例えば、下記のような表です。
高機能
シンプル
価格安い
価格高い
★賢威
★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>上記をコピペして、色々とご自身で調整してみてください。
ご支援のお願い
この記事が役に立ったと感じたら･･･
この記事が少しでもお役に立ったと感じていただけましたら、ぜひ下の“ボタン”をクリックしてお買い物をしていただけると嬉しいです。
ご購入いただいた商品の金額の一部が私に入り、より多くの有益な記事を作るための励みになります。