# Morningstar デザインシステム

## Morningstar デザインシステム インターフェースプレビュー

2つのオリジナルの資産配分モデルを切り替え、アセットクラスごとの色を維持したまま、割合の順序を変更できます。

## Morningstar デザインシステム デザインリファレンス

Vue 3の現行の採用状況と、2025年のIntrinsicガイダンスをまとめ、公開定数の参照先をバージョンごとに明記しています。Legacy v2.37の数値は過去の参考情報であり、現行のVue 3パッケージについて示すものではありません。このサンプルでは、引用した過去のチャートカラーと独自のアプリケーションレイアウトを使用しています。

### 現行の採用範囲

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| UI scope | @mds | コンポーネントは個別にバージョン管理されています。 |
| Chart scope | @mce | チャート要素は個別にスコープされています。 |
| Vue 3 packages | -vue3 suffix | 対応する世代のライブラリを使用してください。 |
| Registry | artifacts.morningstar.com/repository/npm-prod-group/ | 内部アクセスが必要です。 |
| Sass | Dart Sass / sass package | 提供されたコンポーネントスタイルをコンパイルしてください。 |
| CSS Modules | [local]___researchNotebook | これはアプリケーションの名前空間の例であり、公式に必須とされるサフィックスではありません。 |
### Intrinsicへの移行

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Typeface | Morningstar Intrinsic | 承認済みのアセットは別途入手してください。 |
| Weights | Regular and Bold | 現在サポートされているウェイトのファミリー。 |
| Thin / Light / Regular | Map to Intrinsic Regular | 旧ウェイト名は、新たに3種類のフォントファイルがあることを意味しません。 |
| Bold / Heavy | Map to Intrinsic Bold | 強調は意図的に使いましょう。 |
| Vue 3 typography | @mds/typography-vue3 | 更新されたミックスイン。 |
| Legacy monolith / MBC | No Intrinsic updates | 古いモノリシックパッケージを基盤に、新しい連携を構築しないでください。 |
### テキストカラー — constants 3.3.0のスナップショット

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| $mds-text-color-primary | #1e1e1e | 明るい背景上の主要なテキスト。 |
| $mds-text-color-secondary | #5e5e5e | 明るい背景上の補助テキスト。 |
| $mds-text-color-primary-on-dark | #ffffff | 暗い背景上の主要なテキスト。 |
| $mds-text-color-secondary-on-dark | #ababab | 暗い背景上の補助テキスト。 |
| $mds-text-color-interactive-primary | #006fba | インタラクティブなテキスト。リンクにはlink mixinを優先してください。 |
| $mds-text-color-error | #ca0000 | フィードバック用の塗りつぶしとは区別されるエラーテキスト。 |
### 過去の資産配分パレット — v2.37

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| $mds-visualization-color-asset-allocation-equity | #1f55a5 | 株式のチャートセグメント。 |
| $mds-visualization-color-asset-allocation-fixed-income | #ef7622 | 債券のチャートセグメント。 |
| $mds-visualization-color-asset-allocation-cash | #518428 | 現金のチャートセグメント。 |
| $mds-visualization-color-asset-allocation-alternative | #a50032 | 代替資産のセグメント。 |
| $mds-visualization-color-asset-allocation-not-classified | #e5e5e5 | 未分類のセグメント。ラベルを併記してください。 |
### 過去のスペーシング — v2.37

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| $mds-space-quarter-x | 2px | 過去の定数です。採用前に、インストール済みパッケージを確認してください。 |
| $mds-space-half-x | 4px | 過去の定数です。採用前に、インストール済みパッケージを確認してください。 |
| $mds-space-1-x | 8px | 過去の定数です。採用前に、インストール済みパッケージを確認してください。 |
| $mds-space-1-and-a-half-x | 12px | 過去の定数です。採用前に、インストール済みパッケージを確認してください。 |
| $mds-space-2-x | 16px | 過去の定数です。採用前に、インストール済みパッケージを確認してください。 |
| $mds-space-3-x | 24px | 過去の定数です。採用前に、インストール済みパッケージを確認してください。 |
| $mds-space-4-x | 32px | 過去の定数です。採用前に、インストール済みパッケージを確認してください。 |
| $mds-space-6-x | 48px | 過去の定数です。採用前に、インストール済みパッケージを確認してください。 |
### テーブル構成の制御

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| row-numbers | Boolean on mds-table | mds-trに行番号を指定してください。 |
| nested-headers | Number of levels | mds-thead-group-nスロットを使用してください。 |
| multiselection | Boolean on mds-table | 全選択と一部選択の状態を区別してください。 |
| mds-thead.indeterminate | Boolean | 一部選択の状態を表します。 |
| mds-tr.multiselection-label | Row-identifying text | 選択用チェックボックスに名前を付けます。 |
| mds-pagination-page-changed | Pagination event | ページ切り替えのロジックはアプリケーション側で実装します。 |
## Morningstar デザインシステム 完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Morningstar デザインシステム 比較可能な数値を軸にしたリサーチノートブック

### 正確な値はテーブルで確認できます

> オリジナルのサンプルには、架空の2つの資産配分モデル、積み上げバー、正確な値を示すテーブルが含まれています。視覚的なバーは構成比を示し、正式な値の確認にはテーブルを使用します。各モデルの合計は100%で、選択中のモデル名は見出しとテーブルキャプションの両方に表示されます。

並べ替えでは、分母やアセットクラスの色を変えずに、行の順序だけを変更します。独自の評価アイコンを読み解かなくても、配分の全体像から正確な割合を確認できます。これは具体的なリサーチ操作の例であり、Morningstarの実在しない製品や推奨を示すものではありません。

関連する仕様を確認する

## Morningstar デザインシステム 定数には明確な役割とバージョン境界があります

### すべてのグレーをテキストトークンにしない

MDSでは、役割に基づく定数と汎用カラーを区別しています。エンジニア向けガイドでは、テキストカラーと同じ視覚的な値をテキスト以外の要素に使う場合、汎用ニュートラルカラーを別に扱うよう明示しています。付属のSassの例では、テキストに読み取り用のカラーを使い、独自のテーブル罫線には汎用ニュートラルカラーを使用しています。

リファレンステーブルでは、それぞれのバージョン境界を維持しています。constants 3.3.0には引用したテキストカラーの値があり、公開されているv2.37アーカイブには過去の資産配分カラーとスペーシングの値があります。これらは既存のインターフェースを読み解く際には役立ちますが、現行のVue 3のすべての定数が同じ値に解決されることを示すものではありません。アーカイブされた数値を現行のデザイン要件として扱う前に、認可されたインストール済みパッケージを確認してください。

関連する仕様を確認する

## Morningstar デザインシステム Morningstar Intrinsicにより実装の基準が変わります

### 2種類のウェイトファミリーと、連携するコンポーネントの更新

2025年のIntrinsicに関する発表では、従来のthin、light、regularがregularフォントに、boldとheavyがboldフォントに対応しています。font-familyの宣言を変更するだけでは、この移行を再現できません。発表では、フォントやタイポグラフィのパッケージを含むコンポーネントの更新も求められています。

旧morningstar-design-systemモノリスとMorningstar Base Chartsは、Intrinsicの更新対象ではありません。新しい例で、アーカイブされたインストール手順と現行のVue 3向け手順を組み合わせないでください。このオフラインのノートブックではシステムフォントを使用し、独自のフォントファイルは埋め込んでいません。

関連する仕様を確認する

## Morningstar デザインシステム テーブルの機能は明示的に組み合わせます

### 選択、入れ子の見出し、ページネーションはそれぞれ別の役割です

MDSでは、すべてのデータ操作を不透明な単一のグリッドにまとめるのではなく、テーブルの各要素を組み合わせて構成できます。ドキュメントに記載されたパターンでは、行番号、入れ子の見出し用スロット、複数選択、ページネーションを利用できます。データ変換と選択状態の管理は、引き続きアプリケーション側の責任です。

提示されている実装例では、定数ベースのスタイルを使ったネイティブテーブルを意図的に採用しています。ネイティブコンポーネントファミリーへ移行する際は、ドキュメントに記載されたMDSの構成リファレンスが引き続き役立ちます。一部だけが選択されている場合はヘッダーを不確定状態にし、各行のチェックボックスには行を識別できる複数選択ラベルを付けてください。

- 表示用に書式設定するまでは、パーセンテージを数値のまま保持してください。書式設定済みの文字列で並べ替えないでください。

- 数値列のヘッダーも、セルと同じ右揃えにしてください。

- 並べ替え後も資産ラベルを保持してください。インデックス位置は安定したレコード識別子ではありません。

関連する仕様を確認する

## Morningstar デザインシステム 資産の色は汎用的な装飾ではありません

### 意味を固定し、同等のテキスト表現を用意する

過去の配分パレットでは、株式、債券、現金、オルタナティブ、未分類の項目を区別します。このサンプルでは、該当する3色を、モデルや行の順序が変わってもそれぞれの資産クラスに結び付けています。先頭にあるセグメントに応じて色が入れ替わることはありません。

テキストテーブルではすべての値を繰り返し表示するため、モデルを理解するのに青、オレンジ、緑を見分ける必要はありません。このサンプルでは、Morningstarの星、メダリスト、スタイルボックスの画像を使っていません。公式のアイコンリファレンスでは、知的財産権に関わるアイコンの用途を、定められた意味に限定しています。

関連する仕様を確認する

## Morningstar デザインシステム 過去のスケールとアプリケーションのレイアウトを分ける

### 非表示の列がない、コンパクトな閲覧用画面

アーカイブには、8ピクセルを基本とし、4分の1刻みと2分の1刻みを用いるスペーシングが記録されています。このサンプルでは、過去のリファレンスを参考に、控えめな8/16/24/32のリズムを採用しています。全体の幅、積み上げ棒グラフの高さ、モバイル表示への切り替え幅は、公式の定数を装ったものではなく、アプリケーション独自の選択です。

テーブルの列は、資産クラス、パーセンテージ、比較バーの3つだけです。画面幅が狭い場合は、小さな比較バーを非表示にし、資産名と正確なパーセンテージを残します。モデルセレクターはデータの上に配置し、ラベルも常に表示します。ラベルのないアイコンだけのフィルターはありません。

関連する仕様を確認する

## Morningstar デザインシステム アクセス範囲内で現行のパッケージ世代を採用する

### 製品のスタイルを設定する前に、実際のアセットを構成する

認可されたチームは、ドキュメントに記載された社内レジストリ、Vue 3のパッケージサフィックス、Sassの設定を使用できます。CSS モジュールはコンポーネントのスタイルをスコープ化するため、異なるバージョンを共存させられます。この例では製品固有の名前空間を使用しています。ホストされているフォントアセットは、それを使用するスタイルより先に設定してください。

公開プレビューでは、こうしたアクセスは必要ありません。これは、資産配分の操作を独立して完全に紹介するHTMLデモで、出典に基づく過去の配色と、明示的なシステムフォントのフォールバックを使用しています。別途示すVueの例は、定数ベースで導入する具体的な方法です。このページからレジストリやフォントにアクセスできるという意味ではありません。

1. 承認済みの社内レジストリとフォントへのアクセスを確認し、上記のスコープ付きプロジェクト設定を作成してください。

2. アプリケーションのコンポーネントを読み込む前にSassのエントリーポイントをコンパイルし、完全なApp.vueの例をマウントしてください。

3. プレビューで資産配分モデルを切り替え、昇順と降順の両方で並べ替え、ラベル、値、合計が連動していることを確認してください。

関連する仕様を確認する

## Morningstar デザインシステムのコンポーネント例

### 完全なスタンドアロンのインタラクティブ見本

ドキュメント全体をindex.htmlとして保存し、ブラウザーで開いてください。引用した過去のMDS資産配分カラーとシステムフォントを使った、オフラインで動作するネイティブなHTML実装です。MDS Vueランタイム、独自の格付け、ライブの投資データは含みません。

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Allocation notebook — MDS interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#fff;color:#1e1e1e;font:16px/1.45 Arial,sans-serif}.app{max-width:1100px;margin:auto;padding:32px}.mast{border-bottom:2px solid #333;display:flex;justify-content:space-between;padding-bottom:16px;gap:16px}.mast b{letter-spacing:.06em}.mast span,.muted{color:#5e5e5e;font-size:13px}h1{font-size:36px;font-weight:400;line-height:1.2;margin:28px 0 10px}.intro{max-width:600px;color:#5e5e5e;margin:0 0 24px}.controls{background:#f2f2f2;display:flex;align-items:center;gap:16px;padding:16px;margin-bottom:24px}select{font:inherit;padding:8px 32px 8px 10px;background:white;border:1px solid #808080;border-radius:2px}button:focus-visible,select:focus-visible{outline:3px solid #006fba;outline-offset:3px}.chart{display:grid;grid-template-columns:1fr 90px;gap:24px;align-items:center;margin:28px 0 32px}.stack{display:flex;height:42px;overflow:hidden}.segment{min-width:0}.total{text-align:right;font-size:30px}.total small{display:block;font-size:11px;color:#5e5e5e}.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;margin-top:12px}.legend i{display:inline-block;width:8px;height:8px;margin-right:6px}table{width:100%;border-collapse:collapse}caption{text-align:left;font-size:20px;padding-bottom:12px}th,td{padding:16px 8px;border-bottom:1px solid #e5e5e5;text-align:left;font-weight:400}thead th{border-top:2px solid #333;border-bottom:1px solid #808080;font-size:13px}.numeric{text-align:right;font-variant-numeric:tabular-nums}.sort{border:0;background:none;color:#006fba;cursor:pointer;padding:0;font:inherit;text-align:right}.spark{width:35%}.track{height:6px;background:#f2f2f2}.fill{height:6px}.status{font-size:12px;min-height:20px;color:#5e5e5e}.foot{margin-top:32px;padding-top:16px;border-top:1px solid #ccc;font-size:12px;color:#5e5e5e}@media(max-width:600px){.app{padding:20px}.mast{flex-direction:column;gap:4px}h1{font-size:30px}.controls{align-items:flex-start;flex-direction:column;gap:8px}.chart{grid-template-columns:1fr 70px;gap:12px}.spark{display:none}.numeric{width:35%}th,td{padding:16px 4px}.legend{gap:10px}}</style><main class="app"><header class="mast"><b>RESEARCH NOTEBOOK</b><span>Independent MDS interpretation</span></header><h1>One model. Every allocation.</h1><p class="intro">Read the mix at a glance, then inspect the exact numbers. These two original models are fictional.</p><div class="controls"><label for="model">Sample model</label><select id="model"><option value="balanced">Balanced sample</option><option value="reserve">Reserve sample</option></select><span class="muted">No market data or investment recommendation</span></div><div class="chart"><div><div class="stack" id="stack" aria-hidden="true"></div><div class="legend"><span><i style="background:#1f55a5"></i>Equity</span><span><i style="background:#ef7622"></i>Fixed income</span><span><i style="background:#518428"></i>Cash</span></div></div><div class="total">100<small>PERCENT TOTAL</small></div></div><table><caption id="caption">Balanced sample allocation</caption><thead><tr><th scope="col">Asset class</th><th scope="col" id="sorthead" class="numeric" aria-sort="descending"><button class="sort" id="sort">Allocation (%) ↓</button></th><th scope="col" class="spark">Share of model</th></tr></thead><tbody id="rows"></tbody></table><p class="status" id="status" role="status">Sorted by allocation, highest first.</p><p class="foot">Historical MDS v2.37 allocation colors; original application layout and system-font fallback. No Morningstar ratings, proprietary font assets or native Vue components are included.</p></main><script>const models={balanced:[55,35,10],reserve:[20,45,35]},assets=[{name:'Equity',color:'#1f55a5'},{name:'Fixed income',color:'#ef7622'},{name:'Cash',color:'#518428'}];let ascending=false;const model=document.querySelector('#model');function render(){const entries=assets.map((a,i)=>({...a,value:models[model.value][i]}));document.querySelector('#stack').innerHTML=entries.map(a=>`<div class="segment" style="width:${a.value}%;background:${a.color}"></div>`).join('');document.querySelector('#caption').textContent=model.selectedOptions[0].textContent+' allocation';document.querySelector('#rows').innerHTML=[...entries].sort((a,b)=>ascending?a.value-b.value:b.value-a.value).map(a=>`<tr><th scope="row">${a.name}</th><td class="numeric">${a.value.toFixed(1)}%</td><td class="spark"><div class="track"><div class="fill" style="width:${a.value}%;background:${a.color}"></div></div></td></tr>`).join('');document.querySelector('#sorthead').setAttribute('aria-sort',ascending?'ascending':'descending');document.querySelector('#sort').textContent='Allocation (%) '+(ascending?'↑':'↓');document.querySelector('#status').textContent='Sorted by allocation, '+(ascending?'lowest first.':'highest first.')}model.onchange=render;document.querySelector('#sort').onclick=()=>{ascending=!ascending;render()};render();</script></html>
```

コードリファレンス

- 資産配分の値は架空です。並べ替え後も資産の色はカテゴリに対応した意味を保ちます。このドキュメントには、独自のMDS VueアセットやIntrinsicフォントは埋め込まれていません。

### 分母を明示した、並べ替え可能な完全なテーブル

Vue 3のテーブルでは、ネイティブのセマンティクスと、上記のMDSのビジュアル言語設定を使用しています。並べ替えでは数値を保持し、順序を表示します。

```
<!-- src/App.vue — native table styled with MDS constants, not MdsTable -->
<script setup>
import {computed,ref} from 'vue';
const ascending=ref(false);
const rows=[{name:'Sample Equity',allocation:55},{name:'Sample Bonds',allocation:35},{name:'Sample Cash',allocation:10}];
const sorted=computed(()=>[...rows].sort((a,b)=>ascending.value?a.allocation-b.allocation:b.allocation-a.allocation));
</script>
<template>
 <main><h1>Research notebook</h1><p>Fictional allocation; not an investment recommendation.</p>
 <table><caption>Sample allocation, total 100%</caption><thead><tr><th scope="col">Asset</th><th scope="col" class="numeric" :aria-sort="ascending?'ascending':'descending'"><button type="button" @click="ascending=!ascending">Allocation (%) {{ascending?'↑':'↓'}}</button></th></tr></thead>
 <tbody><tr v-for="row in sorted" :key="row.name"><th scope="row">{{row.name}}</th><td class="numeric">{{row.allocation.toFixed(1)}}%</td></tr></tbody></table>
 <p role="status">Sorted by allocation, {{ascending?'lowest first':'highest first'}}.</p></main>
</template>
```

コードリファレンス

- MDSでは、チームがVueコンポーネントを使わずに、定数やビジュアル言語を調整できます。

- この例では、MdsTableのインポートやドキュメントにない並べ替えイベントを意図的に作っていません。

- 55/35/10の配分は架空のもので、合計は100です。市場データではありません。

### 文字のスケールと見出しのセマンティックなレベルを分ける

公式ミックスインを使うと、文書上の意味を変えずに、h1をレベル2の視覚的なスケールでスタイリングできます。

```
@use '@mds/constants-vue3' as *;
@use '@mds/typography-vue3' as *;
h1 { @include mds-level-2-heading($bold:true); color:$mds-text-color-primary; }
p { @include mds-body-text-m(); color:$mds-text-color-primary; }
```

コードリファレンス

- タイポグラフィのミックスインはテキストの色を設定しません。

- MDSの上書きがチャートにも反映されると想定せず、チャート要素には別途スコープを設定したMCE定数を使用してください。

## Morningstar デザインシステム AIエージェントの設定

### 実装の出発点

認可されたチーム向けの、制限付きレジストリ設定です。フォントのパスには、ライセンスを取得し、アプリケーションが実際にホストしているファイルを指定してください。下のApp.vueと組み合わせて使用します。これは定数ベースのネイティブなHTMLテーブルであり、MDSパッケージが一般公開されている、またはネイティブコンパイルが検証済みであることを示すものではありません。

```
# Authorized Morningstar teams only: project .npmrc
@mds:registry=https://artifacts.morningstar.com/repository/npm-prod-group/
@mce:registry=https://artifacts.morningstar.com/repository/npm-prod-group/

# Within a Vite Vue 3 project with approved registry access
pnpm add @mds/constants-vue3 @mds/typography-vue3 @mds/fonts-vue3
pnpm add -D sass

// vite.config.js
import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
  plugins:[vue()],
  css:{modules:{generateScopedName:'[local]___researchNotebook'}}
});

// src/main.js
import {createApp} from 'vue';
import './main.scss';
import App from './App.vue';
createApp(App).mount('#app');

// src/main.scss — host licensed font files at this application path first
@use '@mds/fonts-vue3/scss/config' with ($font-path:'/fonts/morningstar-intrinsic');
@use '@mds/fonts-vue3';
@use '@mds/constants-vue3' as *;
@use '@mds/typography-vue3' as *;
h1 { @include mds-level-2-heading($bold:true); color:$mds-text-color-primary; }
p,td,th { @include mds-body-text-m(); color:$mds-text-color-primary; }
main { margin:$mds-space-4-x; }
table { width:100%;border-collapse:collapse; }
th,td { text-align:left; border-bottom:1px solid $mds-color-neutral-37; }
.numeric { text-align:right;font-variant-numeric:tabular-nums; }
button { font:inherit;cursor:pointer; }
```

### あなたのプロジェクト向けプロンプト

```
このガイドに記載された明確なバージョン境界に沿って、Morningstarに着想を得たリサーチノートを作成してください。正確な資産配分値はセマンティックなテーブルに記載し、色は各資産の意味に固定してください。格付けを作り出したり、知的財産権に関わるアイコンを装飾として使ったりしないでください。現行の認可済みVue 3の定数・フォント設定は、承認されたアクセスがある場合にのみ使用してください。それ以外の場合は、オフライン実装であることを明確に示してください。
```

## Morningstar デザインシステム 出典と適用範囲

独立したOpenDesignガイドです。資産配分の例は架空のもので、金融アドバイスではありません。過去の数値定数には出典のバージョンを明記しています。現行のパッケージおよびフォントへのアクセスは、引き続きMorningstarの管理下にあります。

- Vue 3の導入 レジストリ、Sass、フォント、モジュール、定数。

- Intrinsicのお知らせ 現行のフォント移行と、対象外となるレガシー項目。

- 過去の定数 v2.37 過去のスペーシングと資産配分カラーを明示。

- テキスト定数 3.3.0 バージョン管理された読み取り用の色の値。

- テーブル機能ガイド 構成、選択、ページネーション。

- アイコンの意味 知的財産権に関わるアイコンの制限とアクセシブルな使用方法。

- MDSについて ネイティブコンポーネントを使わない、定数ベースの導入。

## Morningstar デザインシステム 関連リソース

### Mozilla Protocol

実際のフォントスタック、余白、コンテナのスケールを含む、編集者向けの Protocol ガイドです。イラスト付きのレスポンシブな読書ページと、ネイティブな CSS フォームの完全な例も掲載しています。

### Nord デザインシステム

ルーム申請の下書きを通して、NordのTherapyテーマのトークンとWeb Componentの仕様を確認できます。実際の色の役割、画面幅に応じたフィールドのサイズ、明示的なバリデーション、ローカルで用意した結果を確認できます。

### Oracle Redwood

Oracle JET 19 Redwoodの実際の配色、セマンティックな役割、スペーシング、密度の境界を、編集可能な独自の株式レビューシートを通して詳しく確認できます。


- [実装リファレンス](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples)
- [ソース](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3)
- [ソース](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/)
- [ソース](https://designsystem.morningstar.com/component-docs/constants/3.3.0/color.html?tab=text)
- [ソース](https://designsystem.morningstar.com/legacy/visual-language/constants.html)
- [ソース](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples)
- [関連する仕様を確認する](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples)
- [関連する仕様を確認する](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3)
- [関連する仕様を確認する](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/)
- [関連する仕様を確認する](https://designsystem.morningstar.com/ui-elements-docs/icon-vue3/2.0.0/index.html)
- [関連する仕様を確認する](https://designsystem.morningstar.com/legacy/visual-language/constants.html)
- [コードリファレンス](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples)
- [コードリファレンス](https://designsystem.morningstar.com/getting-started/about-mds/)
- [コードリファレンス](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3)
- [Vue 3の導入 レジストリ、Sass、フォント、モジュール、定数。](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3)
- [Intrinsicのお知らせ 現行のフォント移行と、対象外となるレガシー項目。](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/)
- [過去の定数 v2.37 過去のスペーシングと資産配分カラーを明示。](https://designsystem.morningstar.com/legacy/visual-language/constants.html)
- [テキスト定数 3.3.0 バージョン管理された読み取り用の色の値。](https://designsystem.morningstar.com/component-docs/constants/3.3.0/color.html?tab=text)
- [テーブル機能ガイド 構成、選択、ページネーション。](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples)
- [アイコンの意味 知的財産権に関わるアイコンの制限とアクセシブルな使用方法。](https://designsystem.morningstar.com/ui-elements-docs/icon-vue3/2.0.0/index.html)
- [MDSについて ネイティブコンポーネントを使わない、定数ベースの導入。](https://designsystem.morningstar.com/getting-started/about-mds/)