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

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

Ionic Frameworkコンポーネントのスタイルは自己完結型ですが、Ionicのすべての機能を使用するには、いくつかのグローバルスタイルシートを含める必要があります。Ionic Frameworkアプリが正しく表示され動作するためには、いくつかのスタイルシートが必須であり、その他はアプリをすばやくスタイル設定するためのオプションのユーティリティを含んでいます。

利用可能なスタイルシート​

必須​

Ionic Frameworkが正常に動作するには、次のCSSファイルを含める必要があります。

core.css​

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

次のCSSファイルは、Ionic Frameworkアプリに含めることをお勧めします。含まれていない場合、一部の要素に望ましくないスタイルが適用される場合があります。Ionic Frameworkコンポーネントをアプリの外部で使用している場合、これらのファイルは必要ない場合があります。

structure.css​

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

typography.css​

タイポグラフィは、ドキュメント全体のfont-familyを変更し、見出し要素のフォントスタイルを変更します。また、一部のネイティブテキスト要素に配置スタイルを適用します。このファイルは、動的フォントスケーリングが機能するために必要です。

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パッケージを、オプションのユーティリティの使用方法については、CSSユーティリティを参照してください。

目次

このページを編集