メインコンテンツへスキップ
バージョン: v8

CSS変数

Ionicコンポーネントは、アプリケーションのカスタマイズを容易にするためにCSS変数を使用して構築されています。CSS変数を使用すると、1つの場所に値を格納し、他の複数の場所で参照できます。また、ランタイム時にCSSを動的に変更することもできます（以前はCSSプリプロセッサが必要でした）。CSS変数は、ブランドやテーマに合わせてIonicコンポーネントをオーバーライドすることをこれまで以上に容易にします。

値を設定する​

グローバル変数​

CSS変数は、:rootセレクタでアプリケーション全体にグローバルに設定できます。また、特定のモードでのみ適用することもできます。Ionicが提供するグローバル変数については、Ionic変数を参照してください。

Ionic CLIを使用してAngular、React、またはVueプロジェクトを開始すると、デフォルトのIonic変数をオーバーライドできるsrc/theme/variables.scssファイルが作成されます。

/* Set variables for all modes */
:root {
  /* Set the background of the entire app */
  --ion-background-color: #ff3700;

  /* Set the font family of the entire app */
  --ion-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Roboto', sans-serif;
}

/* Set text color of the entire app for iOS only */
:root.ios {
  --ion-text-color: #000;
}

/* Set text color of the entire app for Material Design only */
:root.md {
  --ion-text-color: #222;
}

コンポーネント変数​

特定のコンポーネントのCSS変数を設定するには、そのセレクタの中に変数を追加します。Ionicが提供するコンポーネントレベルの変数については、Ionic変数を参照してください。

/* Set the color on all ion-button elements */
ion-button {
  --color: #222;
}

/* Set the background on an ion-button with the .fancy-button class */
.fancy-button {
  --background: #00ff00;
}

JavaScript経由で設定された変数​

CSS変数は、setProperty()を使用してJavaScript経由で変更することもできます。

const el = document.querySelector('.fancy-button');
el.style.setProperty('--background', '#36454f');

値を取得する​

CSSを使用する​

var() CSS関数を使用して、CSS変数の値を取得できます。必要に応じて、フォールバック値をいくつでも指定できます。以下の例では、--backgroundプロパティは、--charcoal変数の値が定義されている場合はその値に設定され、定義されていない場合は#36454fを使用します。

.fancy-button {
  --background: var(--charcoal, #36454f);
}

JavaScriptを使用する​

CSS変数の値は、getPropertyValue()を使用してJavaScriptで読み取ることができます。

const el = document.querySelector('.fancy-button');
const color = el.style.getPropertyValue('--background');

Ionic変数​

コンポーネント変数​

Ionicは、--backgroundや--colorなど、コンポーネントレベルに存在する変数を提供します。コンポーネントが受け入れるカスタムプロパティのリストについては、APIリファレンスのCSSカスタムプロパティセクションを参照してください。たとえば、ボタンのCSSカスタムプロパティを参照してください。

グローバル変数​

アプリケーション全体のテーマ設定を容易にするために、Ionicが提供するいくつかのグローバル変数があります。詳細については、色、テーマ、および高度なテーマ設定を参照してください。

目次

このページを編集