# SAP Fiori デザインシステム

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

購買申請を編集し、数量を検証し、密度を変更して、ローカルで概要を作成します。

## SAP Fiori デザインシステムの設計リファレンス

Morning Horizon (sap_horizon) のソースパラメーターと、現行の UI5 Web Components ドキュメント。以下の Less @sap 名はソースパラメーターです。ブラウザーのスタイルでは、対応する --sap カスタムプロパティを使用します。保護された寸法は観察結果であり、上書きを推奨する箇所ではありません。

### Horizon のカラーの役割

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| @sapBrandColor | #0070f2 | 主要なブランドカラーの役割。 |
| @sapBackgroundColor | #f5f6f7 | ページの背景。 |
| @sapBaseColor | #ffffff | ベースの背景。 |
| @sapTextColor | #131e29 | 主要テキスト。 |
| @sapNegativeColor | #aa0808 | 否定的な状態。 |
| @sapCriticalColor | #e76500 | 重大な役割。テキストには別途、派生した役割があります。 |
| @sapPositiveColor | #256f3a | 肯定的な状態。 |
| @sapInformationBackground | #e1f4ff | 情報メッセージの背景。 |
| @sapWarningBackground | #fff8d6 | 重大メッセージの背景。 |
### 文字と形状

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| @sapFontFamily | "72", "72full", Arial, Helvetica, sans-serif | 公開されているフォントスタック。 |
| @sapFontSize | 0.875rem | 基本サイズ。 |
| @sapContent_LineHeight | 1.5 | コンテンツの行の高さに適用する倍率。 |
| @sapElement_Height | 2.25rem | 保護された標準寸法。 |
| @sapElement_Compact_Height | 1.625rem | コンパクトサイズは変更できません。 |
| @sapElement_LineHeight | 2.75rem | 標準サイズの行ボックスは変更できません。 |
| @sapElement_Compact_LineHeight | 2rem | コンパクトサイズの行ボックスは変更できません。 |
| @sapButton_BorderCornerRadius | 0.5rem | ボタンの角丸パラメーター。 |
| @sapContent_FocusWidth | 0.125rem | フォーカス幅。 |
| @sapContent_FocusColor | #0032a5 | フォーカスカラー。 |
### テーマと密度の設定

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| sap_horizon | Morning Horizon | コンポーネントに組み込まれたデフォルトテーマ。 |
| sap_horizon_dark | Evening Horizon | 追加テーマにはアセットが必要です。 |
| sap_horizon_hcb / sap_horizon_hcw | High contrast black / white | サポートされている高コントラストテーマは、それぞれ別のテーマです。 |
| Assets.js | One import per component library used | 追加テーマのアセットを登録します。 |
| setTheme(name) | @ui5/webcomponents-base/dist/config/Theme.js | 公開APIを使ってテーマを変更します。 |
### Selectの仕様

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| ui5-select value | Matches option value or text | optionのselectedフラグと併用しないでください。 |
| selectedOption | Read-only IOption | 選択されたoptionオブジェクトを読み取ります。 |
| change | event.detail.selectedOption | 確定した選択変更。 |
| live-change | Navigation preview | 確定済みの業務上の選択として扱わないでください。 |
| accessible-name-ref | ID of visible labeling element | 表示されているテキストをコントロールに関連付けます。 |
### 入力とフィードバック

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| value | String | 数値入力は明示的に変換します。 |
| input | Each keystroke | リアルタイムの概算合計に使用します。 |
| change | Enter or focusout | キー入力ごとの入力とは異なります。 |
| value-state | None / Negative / Critical / Information / Positive | 現在のAPIにおける状態名。 |
| slot="valueStateMessage" | One root element | 特定のフィールドに関する説明。 |
### メッセージストリップ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| design | Information / Positive / Critical / Negative | アプリケーションの意味を伝えるメッセージ。 |
| hide-close-button | Boolean attribute | 必要な説明は常に表示しておきます。 |
| default slot | Prefer text content | メッセージストリップを複雑なパネルにしないでください。 |
## SAP Fiori デザインシステム完全ガイド

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

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

## SAP Fiori デザインシステムの設計とUI5の実装では対象範囲が異なります

### 具体的な導入例

> SAP Fioriはエンタープライズ向けのユーザーエクスペリエンスを定義しています。このリファレンスでは、実装可能な購買依頼のサンプルにUI5 Web Componentsを採用しています。これらのコンポーネントをインストールしても、SAPUI5アプリケーション、Fiori elementsのフロアプラン、または認可されたSAPの業務トランザクションが作成されるわけではありません。

メインのコンポーネントパッケージには、Input、Select、Buttonが含まれています。より高機能なFioriコンポーネントは別のパッケージにあります。この例で使用するモジュールだけをインポートすることで、導入の入口を明確にし、サポートされていない全コンポーネント向けCDNがあるかのような誤解を避けられます。

関連する仕様を確認する

## SAP Fiori デザインシステム 汎用的な青系配色ではなく、Horizonの名前付きパラメーターを使用する

### 背景レイヤーと状態の役割

Morning Horizonでは、ページの背景にライトグレー、ベースとなる背景レイヤーに白を使用します。ブランドブルーとテキストカラーは別々のパラメーターです。Negative、Critical、Positive、Informativeは意味を表す役割であり、カードごとに使い回す装飾色の一覧ではありません。

このプレビューでは、準備段階の内容を情報ストリップで要約しています。準備は購買の承認ではないためです。商品価格、コストセンター、承認に関する注記は、この例のために作成したサンプルデータです。SAPが提供する業務ルールとして解釈しないでください。

関連する仕様を確認する

## SAP Fiori デザインシステムのコンパクト設定は、スクリーンショットを小さくする設定ではありません

### 意味のある範囲に密度を適用する

UI5では、ルート、body、領域、またはコンポーネントにコンパクトマーカーを設定できます。data-ui5-compact-size属性とui5-content-density-compactクラスは、公開されている設定方法です。マーカーを動的に変更しても、別の密度APIは必要ありません。

操作に適している場合に限り、情報量の多いデスクトップ作業でコンパクトなコントロールを使用します。埋め込み表示ではコントロールと行の間隔を詰めますが、情報量は変えません。狭いレイアウトでは、すべてのラベルやボタンを縮小するのではなく、領域を縦に並べます。

```
<section data-ui5-compact-size>
  <ui5-input accessible-name="Request title"></ui5-input>
</section>
```

コードリファレンス

関連する仕様を確認する

## SAP Fiori デザインシステム 72フォントファミリーと読み込み動作

### フォントの利用可否もセットアップの一部です

Horizonテーマでは、フォールバックフォントより前に72と72fullを指定します。UI5には、デフォルトのフォント読み込みを無効にする方法と、フォントをローカルでホストする方法が記載されています。簡便なFontFace.cssエントリは実験的な機能のため、この方法を選ぶ場合はパスを固定し、再確認してください。

単体のプレビューでは、オフライン時のフォールバックとしてArialを明示的に使用します。ネイティブUI5の例では、公開されているfont-family変数を使用します。この違いにより、見た目が似たフォールバックのスクリーンショットを、SAPのフォントアセットが読み込まれた証拠と誤認することを防げます。

関連する仕様を確認する

## SAP Fiori デザインシステム Selectには確定済みの変更と仮の変更があります

### 選択方法は一つに統一する

Selectのvalueは、Optionのvalueまたはテキストと一致します。SelectのvalueとOptionのselectedフラグを併用することは推奨されません。存在しない値を指定すると、選択されたoptionはありません。この例では実在するコストセンターのoptionを初期値に設定し、結果の準備時にSelectのvalueを読み取ります。

changeイベントには選択されたoptionが含まれます。live-changeは、option間を移動している間やEscapeキーで元に戻す際にも発生します。業務データには確定済みの選択を使い、仮の変更はプレビューに限って使用してください。

- タグをレンダリングする前に、SelectとOptionを登録するモジュールをインポートします。

- accessible-name-refを使って、表示されているコストセンターのラベルを関連付けます。

- この例では、選択方法をvalueだけに統一します。

関連する仕様を確認する

## SAP Fiori デザインシステム 数値入力にもアプリケーション側の検証が必要です

### 値の状態とメッセージはセットで扱う

入力タイプがNumberでも、Inputのvalueは文字列です。サンプル価格を掛ける前に数値に変換し、有限の整数であることと範囲を確認します。空の値を0として受け入れてはいけません。ここで使う現在の意味的なエラー状態はNegativeであり、Errorという列挙値を独自に作るものではありません。

valueStateMessageスロットには、具体的な説明を含むルート要素を一つ指定します。リアルタイムの合計はinputイベントを監視し、準備済みの要約はユーザーがアクションを実行したときにのみ更新します。

1. コンポーネントからタイトルと数値文字列を読み取ります。

2. このサンプルでは、タイトルが入力されていることと、数量が1から20までの整数であることを必須にします。

3. 該当するコントロールをNegativeに設定し、入力値は保持します。

4. 両方の条件を満たした場合にのみ、要約を準備します。

関連する仕様を確認する

## SAP Fiori デザインシステム 結果は説明的に、ローカルにとどめる

### 簡潔な結果の表示にはストリップを使う

MessageStripは意味を表すデザインと閉じる操作に対応しています。必要な説明を常に表示するには、閉じるボタンを非表示にできます。デフォルトスロットにはテキストを設定し、フォームやダッシュボードのように拡張しないでください。

要約には、タイトル、数量、サンプルの合計額、コストセンターが含まれます。最後の文で、何も送信されていないことを説明します。実際のサービスでは、このローカルな処理を、認可された依頼と実際のバックエンド状態を示す応答に置き換えます。

関連する仕様を確認する

## SAP Fiori デザインシステム テーマアセットとモジュール登録

### テーマを選択するには、対応するリソースが必要です

Morning Horizonはドキュメントで定義されているデフォルトテーマで、コンポーネントに組み込まれています。追加テーマを使うには、使用する各ライブラリのAssets.jsモジュールが必要です。その後、setThemeでEvening Horizonまたはいずれかの高コントラストバリアントを選択できます。読み込み済みのリソースを確認せずにダークテーマの名前を指定しても、統合が完了したことにはなりません。

提供されたエントリーポイントは、マークアップを作成する前に各カスタム要素を登録します。Viteは動的なESインポートとJSONリソースを処理します。ネイティブプロジェクトをビルドし、オフラインのHTMLサンプルとは別に、フォント、テーマの読み込み、キーボード操作を確認してください。

関連する仕様を確認する

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

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

ドキュメント全体をindex.htmlとして保存し、ブラウザーで開いてください。Morning HorizonのパラメーターとUI5のフォーム構成を、オフラインでHTML向けに再現しています。ネイティブパッケージの例は別途掲載しています。

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Fiori purchase request</title><style>
*{box-sizing:border-box}body{margin:0;color:#131e29;background:#f5f6f7;font:14px/1.5 Arial,sans-serif}header{background:white;padding:12px 24px;display:flex;gap:16px;align-items:center;border-bottom:1px solid #d5dadd}.symbol{width:32px;height:32px;display:grid;place-items:center;background:#0070f2;color:white;border-radius:8px;font-weight:bold}header strong{font-size:16px}header span:last-child{margin-left:auto;color:#556b82;font-size:12px}main{max-width:1100px;margin:auto;padding:24px}.objecthead{display:flex;justify-content:space-between;gap:20px;align-items:start;margin-bottom:24px}h1{font-size:28px;line-height:36px;margin:0 0 6px}h2{font-size:18px;margin:0 0 16px}.subtitle{color:#556b82;margin:0}.draft{background:#e1f4ff;color:#0032a5;padding:6px 12px;border-radius:6px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}.panel{background:white;border-radius:12px;padding:24px;border:1px solid #d5dadd}label{display:block;margin-bottom:6px;color:#556b82}input,select{width:100%;height:44px;border:1px solid #758ca4;border-radius:8px;padding:8px 12px;background:#fff;font:inherit;color:inherit}input:focus,select:focus,button:focus-visible{outline:2px solid #0032a5;outline-offset:3px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.fields>div:first-child{grid-column:1/-1}.line{border-top:1px solid #d5dadd;padding-top:20px;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center}.monitor{background:#e1f4ff;border:2px solid #556b82;height:42px;border-radius:4px;position:relative;margin-bottom:12px}.monitor:after{content:'';position:absolute;bottom:-12px;left:25%;width:50%;height:10px;border-bottom:3px solid #556b82;border-left:8px solid transparent;border-right:8px solid transparent}.line strong{display:block}.line small{color:#556b82}.money{font-size:24px;font-weight:600;white-space:nowrap}.unit{font-size:12px;color:#556b82}.total{display:flex;justify-content:space-between;padding-top:24px;font-weight:600}.controls{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}button{border:1px solid #0070f2;background:white;color:#0057b8;padding:10px 16px;border-radius:8px;font:600 14px/20px Arial;cursor:pointer}button.primary{background:#0070f2;color:white}button:hover{filter:brightness(.95)}.steps{list-style:none;padding:0;margin:0;counter-reset:step}.steps li{position:relative;padding:0 0 24px 36px;color:#556b82}.steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;border:1px solid #758ca4;border-radius:50%;width:24px;height:24px;text-align:center;background:white}.steps strong{display:block;color:#131e29}.steps li:first-child:before{background:#e1f4ff;color:#0057b8;border-color:#0070f2}.strip{margin-top:24px;background:#e1f4ff;border:1px solid #0070f2;padding:12px 16px;border-radius:8px}.strip.error{background:#ffeaf4;border-color:#aa0808;color:#aa0808}.foot{font-size:12px;color:#556b82;margin-top:24px}.compact input,.compact select{height:32px;padding:4px 8px}.compact .fields{gap:12px}.compact .panel{padding:16px}.compact .line{padding-top:12px}.compact button{padding:6px 12px}.hint{font-size:12px;color:#556b82;margin:6px 0 0}@media(max-width:700px){main{padding:20px 16px}.layout{grid-template-columns:1fr}.fields{grid-template-columns:1fr}.objecthead{display:block}.draft{display:inline-block;margin-top:12px}.line{grid-template-columns:48px minmax(0,1fr)}.line>.money{grid-column:2}.panel{padding:20px}header{padding:12px 16px}}
</style><header><span class="symbol">P</span><strong>Procurement workspace</strong><span>Sample environment</span></header><main><div class="objecthead"><div><h1>Purchase request</h1><p class="subtitle">PR-DRAFT · Workplace equipment</p></div><span class="draft">Draft · not submitted</span></div><div class="layout"><section class="panel"><h2>Request details</h2><form id="form" novalidate><div class="fields"><div><label for="title">Request title</label><input id="title" placeholder="e.g. Studio display upgrade" aria-describedby="notice"></div><div><label for="team">Cost center</label><select id="team"><option value="Design · CC-240">Design · CC-240</option><option value="Research · CC-360">Research · CC-360</option></select></div><div><label for="qty">Monitor quantity</label><input id="qty" type="number" min="1" max="20" step="1" value="2" aria-describedby="qty-help notice"><p id="qty-help" class="hint">Whole number from 1 to 20.</p></div></div><div class="line"><div class="monitor" aria-hidden="true"></div><div><strong>27-inch studio monitor</strong><small>Equipment · Item 100240</small></div><div class="money">€320 <span class="unit">/ unit</span></div></div><div class="total"><span>Estimated line total</span><output id="total">€640</output></div><div class="controls"><button class="primary">Prepare summary</button><button type="button" id="density" aria-pressed="false">Compact controls</button></div></form></section><aside class="panel"><h2>Request path</h2><ol class="steps"><li><strong>Prepare draft</strong>Check quantities and cost center.</li><li><strong>Review summary</strong>Confirm the local request details.</li><li><strong>Submit to service</strong>Not connected in this preview.</li></ol><p class="hint">The review path and price are illustrative application data.</p></aside></div><div class="strip" id="notice" role="status">Complete the draft before preparing the summary.</div><p class="foot">HTML interpretation of SAP Morning Horizon · UI5 native integration provided in guide · No SAP transaction created</p></main><script>
const $=id=>document.getElementById(id);function amount(){const n=Number($('qty').value);return Number.isInteger(n)&&n>=1&&n<=20?n:null}$('qty').oninput=()=>{$('total').textContent=amount()===null?'Invalid quantity':'€'+amount()*320};$('density').onclick=()=>{const active=document.body.classList.toggle('compact');$('density').setAttribute('aria-pressed',String(active));$('density').textContent=active?'Cozy controls':'Compact controls'};$('form').onsubmit=e=>{e.preventDefault();const title=$('title').value.trim(),n=amount();$('title').setAttribute('aria-invalid',String(!title));$('qty').setAttribute('aria-invalid',String(n===null));$('notice').classList.toggle('error',!title||n===null);if(!title||n===null){$('notice').textContent=!title?'Enter a title for this request.':'Use a whole quantity from 1 to 20.';(!title?$('title'):$('qty')).focus();return}$('notice').textContent='Local summary: '+title+' · '+n+' monitors · €'+n*320+' · '+$('team').value+'. Nothing submitted.'};
</script></html>
```

コードリファレンス

- このHTMLドキュメントの密度切り替えは独自の再現です。UI5のエントリーポイントでは、実際のコンパクト表示マーカー、登録済みカスタム要素、Horizonアセットを示しています。

### 数量を検証するHorizon購買依頼

Input、Select/Option、Button、MessageStripを組み合わせて、ローカルの購買依頼概要を作成します。キー入力ごとの合計は、作成済みの結果とは別に扱います。

```
// main.js in a Vite vanilla project. index.html contains <div id="app"></div>.
import '@ui5/webcomponents/dist/Button.js';
import '@ui5/webcomponents/dist/Input.js';
import '@ui5/webcomponents/dist/Select.js';
import '@ui5/webcomponents/dist/Option.js';
import '@ui5/webcomponents/dist/MessageStrip.js';
import '@ui5/webcomponents/dist/Assets.js';
import {setTheme} from '@ui5/webcomponents-base/dist/config/Theme.js';
setTheme('sap_horizon');
document.querySelector('#app').innerHTML = `
  <main style="max-width:800px;margin:auto;padding:24px;font-family:var(--sapFontFamily)">
    <h1>Purchase request</h1>
    <p>Prepare a local requisition summary. No SAP transaction is created.</p>
    <p id="request-label">Request title</p>
    <ui5-input id="title" accessible-name-ref="request-label" required>
      <span slot="valueStateMessage">Enter a title for this request.</span>
    </ui5-input>
    <p id="team-label">Cost center</p>
    <ui5-select id="team" accessible-name-ref="team-label" value="design">
      <ui5-option value="design">Design · CC-240</ui5-option>
      <ui5-option value="research">Research · CC-360</ui5-option>
    </ui5-select>
    <p id="qty-label">Monitor quantity</p>
    <ui5-input id="qty" type="Number" accessible-name-ref="qty-label" value="2">
      <span slot="valueStateMessage">Use a whole number from 1 to 20.</span>
    </ui5-input>
    <p id="total">Estimated line total: €640</p>
    <ui5-button id="prepare" design="Emphasized">Prepare summary</ui5-button>
    <ui5-button id="density">Toggle compact controls</ui5-button>
    <ui5-message-strip id="notice" design="Information" hide-close-button style="display:block;margin-top:24px">
      Complete the draft before preparing the summary.
    </ui5-message-strip>
  </main>`;
const title=document.querySelector('#title'),qty=document.querySelector('#qty');
qty.addEventListener('input',()=>{
  const n=Number(qty.value);
  document.querySelector('#total').textContent=Number.isInteger(n)&&n>=1&&n<=20
    ? `Estimated line total: €${n*320}` : 'Enter a valid quantity to calculate the total.';
});
document.querySelector('#prepare').addEventListener('click',()=>{
  const n=Number(qty.value), validTitle=!!title.value.trim(), validQty=Number.isInteger(n)&&n>=1&&n<=20;
  title.valueState=validTitle?'None':'Negative';qty.valueState=validQty?'None':'Negative';
  const notice=document.querySelector('#notice');
  if(!validTitle||!validQty){notice.design='Negative';notice.textContent='Correct the request title or quantity before continuing.';return;}
  notice.design='Information';
  notice.textContent=`Local summary: ${title.value.trim()}, ${n} monitors, €${n*320}, ${document.querySelector('#team').value}. Nothing submitted.`;
});
document.querySelector('#density').addEventListener('click',()=>document.body.toggleAttribute('data-ui5-compact-size'));
```

コードリファレンス

- 数量ルール、商品単価320ユーロ、原価センターは、SAPの方針ではなく、このアプリケーション用に作成したデータです。

- UI5 Web ComponentsはFioriのパターンを実装する方法のひとつです。完全なSAPUI5アプリケーションでも、Fiori elementsのフロアプランでもありません。

- SAPのトランザクションは作成されません。オフラインプレビューの検証は、ネイティブ依存関係のビルドを意味するものではありません。

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

### 実装の出発点

Viteのmain.jsをサンプル全体で置き換えてください。UI5のドキュメントではESモジュールバンドラーが必要とされています。すべてのコンポーネントに対応する公式CDNは提供されていません。

```
npm create vite@latest fiori-request -- --template vanilla
cd fiori-request
npm install
npm install @ui5/webcomponents @ui5/webcomponents-base
npm run dev
```

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

```
Horizonテーマを使い、UI5 Web ComponentsのInput、Select、Button、MessageStripでFioriの購買依頼を構成します。数値の検証、正しいNegative value state、明示的なコンパクト表示、ローカルの概要表示の範囲を正確に保ってください。
```

## SAP Fiori デザインシステムの情報源と適用範囲

独立したOpenDesignの参考例です。UI5 Web Componentsの使用例であり、SAPの本番トランザクションや完全なFiori elementsアプリケーションではありません。

- はじめに 公式パッケージとバンドラーの設定。

- Horizonの情報源 テーマパラメーターのスナップショット。

- 設定 テーマ名とアセットの読み込み。

- 密度 コンパクト表示マーカーとRTL。

- フォント 72の読み込みとローカルフォントに関するガイダンス。

- 入力 値の状態と入力イベント。

- Select 選択方法とイベント。

- MessageStrip セマンティックメッセージの構成。

- Buttonの出典 ネイティブのボタン実装。

## SAP Fiori デザインシステムの関連リソース

### SEEK Braid

テーマごとにスコープされた変数、実際の4つのブレークポイント、文脈に応じたテキスト、トーンの異なるボタン、操作を無効にするのではなく検証内容を説明する制御付きフィールドを使った、独自の求人検索レイアウトを通して Braid を理解しましょう。

### Segment Evergreen

実際のテーマ値、入力を制御したタグ追加、ルールとのリアルタイム照合、空の状態からの復帰手段、ブラウザー標準の確認ダイアログを備えた Evergreen の参考実装です。

### Semi Design

Semi推奨の基本的なSteps、制御されたInputとSwitch、実際のテーマトークンを使って、順を追ったワークスペース設定を作成してください。また、React 18とReact 19のどちらのパッケージを使うか明示してください。


- [実装リファレンス](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less)
- [ソース](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less)
- [ソース](https://ui5.github.io/webcomponents/docs/advanced/configuration/)
- [ソース](https://ui5.github.io/webcomponents/components/Select/)
- [ソース](https://ui5.github.io/webcomponents/components/Input/)
- [ソース](https://ui5.github.io/webcomponents/components/MessageStrip/)
- [関連する仕様を確認する](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/)
- [関連する仕様を確認する](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less)
- [コードリファレンス](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/)
- [関連する仕様を確認する](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/)
- [関連する仕様を確認する](https://ui5.github.io/webcomponents/docs/advanced/fonts/)
- [関連する仕様を確認する](https://ui5.github.io/webcomponents/components/Select/)
- [関連する仕様を確認する](https://ui5.github.io/webcomponents/components/Input/)
- [関連する仕様を確認する](https://ui5.github.io/webcomponents/components/MessageStrip/)
- [関連する仕様を確認する](https://ui5.github.io/webcomponents/docs/advanced/configuration/)
- [コードリファレンス](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less)
- [コードリファレンス](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/)
- [はじめに 公式パッケージとバンドラーの設定。](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/)
- [Horizonの情報源 テーマパラメーターのスナップショット。](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less)
- [設定 テーマ名とアセットの読み込み。](https://ui5.github.io/webcomponents/docs/advanced/configuration/)
- [密度 コンパクト表示マーカーとRTL。](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/)
- [フォント 72の読み込みとローカルフォントに関するガイダンス。](https://ui5.github.io/webcomponents/docs/advanced/fonts/)
- [入力 値の状態と入力イベント。](https://ui5.github.io/webcomponents/components/Input/)
- [Select 選択方法とイベント。](https://ui5.github.io/webcomponents/components/Select/)
- [MessageStrip セマンティックメッセージの構成。](https://ui5.github.io/webcomponents/components/MessageStrip/)
- [Buttonの出典 ネイティブのボタン実装。](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/packages/main/src/Button.ts)