グローバルスタイルシート

Ionic Framework のコンポーネントスタイルは自己完結していますが、Ionic のすべての機能を使用するために含める必要があるグローバルなスタイルシートがいくつか存在します。スタイルシートの中には、Ionic Framework アプリの外観と動作を適切にするために必要なものと、アプリをすばやくスタイル設定するためのオプションのユーティリティが含まれているものがあります。

利用可能

必須

Ionic Framework が正常に動作するためには、以下の CSS ファイルが含まれている必要があります。

core.css

このファイルは、Ionic コンポーネントが正常に動作するために必要な唯一のスタイルシートです。アプリ固有のスタイルが含まれており、colorプロパティがコンポーネント間で動作するようにします。このファイルが含まれていない場合、色は表示されず、いくつかの要素が正しく表示されない可能性があります。

推奨

Ionic Framework アプリでは、以下の CSS ファイルをインクルードすることが推奨されています。これらが含まれていない場合、一部の要素で好ましくないスタイルになる可能性があります。Ionic Framework のコンポーネントをアプリの外で使用する場合は、これらのファイルは必要ない場合があります。

structure.css

html> にスタイルを適用し、box-sizing のデフォルトを border-box にします。これにより、モバイルデバイスでのスクロールがネイティブのように動作するようになります。

typography.css

typography はドキュメント全体の font-family を変更し、見出し要素のフォントスタイルを変更する。また、いくつかのネイティブのテキスト要素に位置決めスタイルを適用します。これを動作させるためには、 Dynamic Font Scaling のファイルが必要です。

normalize.css

ブラウザがすべての要素をより一貫して、現代の標準に沿った形で表示するようにします。これは Normalize.css をベースにしています。

オプション

以下の CSS ファイルはオプションであり、アプリケーションで機能を使用しない場合は、コメントアウトまたは削除して問題ありません。

padding.css

任意の要素のパディングまたはマージンを変更するユーティリティクラスを追加します。使用方法については CSS ユーティリティ を参照してください。

float-elements.css

ブレークポイントと側面に基づいて要素をフロートさせるユーティリティクラスを追加します。使用方法については CSS ユーティリティ を参照してください。

text-alignment.css

要素のテキストを整列させたり、ブレークポイントに基づいてホワイトスペースを調整したりするユーティリティクラスを追加します。使用方法についてはCSS ユーティリティを参照してください。

text-transformation.css

ユーティリティクラスを追加して、要素のテキストをブレークポイントに基づいてuppercase、lowercase、またはcapitalizeに変換します。使用方法についてはCSS ユーティリティを参照してください。

flex-utils.css

ユーティリティクラスを追加して、フレックスコンテナとアイテムを整列させます。使用方法についてはCSS ユーティリティを参照してください。

display.css

ブレークポイントに基づいて要素を非表示にするユーティリティクラスを追加します。使用方法についてはCSS ユーティリティを参照してください。

使用方法

フレームワークに基づくグローバルなスタイルシートのインクルード方法は Ionic Packages を、オプションのユーティリティの使用方法は CSS Utilities を参照してください。