CSSユーティリティ

Ionic Frameworkは、テキストの変更、要素の配置、またはパディングとマージンの調整のために、任意の要素で使用できるCSSユーティリティクラスのセットを提供します。

注意

使用可能なIonic Frameworkスターターを使用してアプリが開始されていない場合は、これらのスタイルを機能させるために、グローバルスタイルシートのオプションセクションにリストされているスタイルシートを含める必要があります。

テキストの変更

テキストの配置

<ion-grid>
  <ion-row>
    <ion-col>
      <div class="ion-text-start">
        <h3>text-start</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-end">
        <h3>text-end</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-center">
        <h3>text-center</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <div class="ion-text-justify">
        <h3>text-justify</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-wrap">
        <h3>text-wrap</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-nowrap">
        <h3>text-nowrap</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

クラス	スタイルルール	説明
.ion-text-left	text-align: left	インラインコンテンツは、行ボックスの左端に揃えられます。
.ion-text-right	text-align: right	インラインコンテンツは、行ボックスの右端に揃えられます。
.ion-text-start	text-align: start	方向が左から右の場合はtext-leftと同じで、方向が右から左の場合はtext-rightと同じです。
.ion-text-end	text-align: end	方向が左から右の場合はtext-rightと同じで、方向が右から左の場合はtext-leftと同じです。
.ion-text-center	text-align: center	インラインコンテンツは、行ボックス内で中央揃えされます。
.ion-text-justify	text-align: justify	インラインコンテンツは、両端揃えされます。テキストは、最後の行を除き、左端と右端が行ボックスの左端と右端に揃うように間隔を空ける必要があります。
.ion-text-wrap	white-space: normal	空白のシーケンスは折りたたまれます。ソース内の改行文字は、他の空白として処理されます。行ボックスを埋めるために必要に応じて行を分割します。
.ion-text-nowrap	white-space: nowrap	空白はnormalの場合と同じように折りたたみますが、テキスト内の改行（テキストの折り返し）を抑制します。

テキストの変換

<ion-grid>
  <ion-row>
    <ion-col>
      <div class="ion-text-uppercase">
        <h3>text-uppercase</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-lowercase">
        <h3>text-lowercase</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-capitalize">
        <h3>text-capitalize</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

クラス	スタイルルール	説明
.ion-text-uppercase	text-transform: uppercase	すべての文字を大文字に変換します。
.ion-text-lowercase	text-transform: lowercase	すべての文字を小文字に変換します。
.ion-text-capitalize	text-transform: capitalize	各単語の最初の文字を大文字に変換します。

レスポンシブテキストクラス

上記のすべてのテキストクラスには、画面サイズに基づいてテキストを変更するための追加クラスがあります。各クラスのtext-の代わりに、特定の画面サイズでのみクラスを使用するには、text-{breakpoint}-を使用します。{breakpoint}は、Ionicブレークポイントにリストされているブレークポイント名の1つです。

次の表は、デフォルトの動作を示しています。{modifier}は、上記の説明のとおり、left、right、start、end、center、justify、wrap、nowrap、uppercase、lowercase、またはcapitalizeのいずれかです。

クラス	説明
.ion-text-{modifier}	すべての画面サイズで要素に修飾子を適用します。
.ion-text-sm-{modifier}	min-width: 576pxの場合に、要素に修飾子を適用します。
.ion-text-md-{modifier}	min-width: 768pxの場合に、要素に修飾子を適用します。
.ion-text-lg-{modifier}	min-width: 992pxの場合に、要素に修飾子を適用します。
.ion-text-xl-{modifier}	min-width: 1200pxの場合に、要素に修飾子を適用します。

要素の配置

要素のフロート

float CSSプロパティは、要素をコンテナの左側または右側に配置する必要があることを指定します。テキストとインライン要素は、その周りに折り返されます。このようにして、要素はWebページの通常のフローから取り出されますが、絶対配置とは対照的に、フローの一部として残ります。

<ion-grid>
  <ion-row>
    <ion-col>
      <h3>no float</h3>
      <img
        alt="Silhouette of a person's head"
        src="https://ionic.dokyumento.jp/docs/img/demos/avatar.svg"
        height="50px"
      />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
    </ion-col>
    <ion-col>
      <h3>float-left</h3>
      <img
        alt="Silhouette of a person's head"
        src="https://ionic.dokyumento.jp/docs/img/demos/avatar.svg"
        height="50px"
        class="ion-float-left"
      />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
    </ion-col>
    <ion-col>
      <h3>float-right</h3>
      <img
        alt="Silhouette of a person's head"
        src="https://ionic.dokyumento.jp/docs/img/demos/avatar.svg"
        height="50px"
        class="ion-float-right"
      />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
    </ion-col>
  </ion-row>
</ion-grid>

クラス	スタイルルール	説明
.ion-float-left	float: left	要素は、包含ブロックの左側にフロートします。
.ion-float-right	float: right	要素は、包含ブロックの右側にフロートします。
.ion-float-start	float: left / float: right	方向が左から右の場合はfloat-leftと同じで、方向が右から左の場合はfloat-rightと同じです。
.ion-float-end	float: left / float: right	方向が左から右の場合はfloat-rightと同じで、方向が右から左の場合はfloat-leftと同じです。

レスポンシブフロートクラス

上記のすべてのフロートクラスには、画面サイズに基づいてフロートを変更するための追加クラスがあります。各クラスのfloat-の代わりに、特定の画面サイズでのみクラスを使用するには、float-{breakpoint}-を使用します。{breakpoint}は、Ionicブレークポイントにリストされているブレークポイント名の1つです。

次の表は、デフォルトの動作を示しています。{modifier}は、上記の説明のとおり、left、right、start、またはendのいずれかです。

クラス	説明
.ion-float-{modifier}	すべての画面サイズで要素に修飾子を適用します。
.ion-float-sm-{modifier}	min-width: 576pxの場合に、要素に修飾子を適用します。
.ion-float-md-{modifier}	min-width: 768pxの場合に、要素に修飾子を適用します。
.ion-float-lg-{modifier}	min-width: 992pxの場合に、要素に修飾子を適用します。
.ion-float-xl-{modifier}	min-width: 1200pxの場合に、要素に修飾子を適用します。

要素の表示

display CSSプロパティは、要素を表示するかどうかを決定します。要素が非表示の場合でも、DOM内に存在しますが、レンダリングされません。

<ion-grid>
  <ion-row>
    <ion-col class="ion-hide">
      <div>
        <h3>hidden</h3>
        You can't see me.
      </div>
    </ion-col>
    <ion-col>
      <div>
        <h3>not-hidden</h3>
        You can see me!
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

クラス	スタイルルール	説明
.ion-hide	display: none	要素は非表示になります。

レスポンシブ表示属性

画面サイズに基づいて可視性を変更するための追加クラスもあります。すべての画面サイズの.ion-hideだけでなく、特定の画面サイズでのみクラスを使用するには、.ion-hide-{breakpoint}-{dir}を使用します。{breakpoint}は、Ionicブレークポイントにリストされているブレークポイント名の1つであり、{dir}は、要素を指定したブレークポイントより上（up）または下（down）のすべての画面サイズで非表示にするかどうかです。

クラス	説明
.ion-hide-sm-{dir}	min-width: 576px（up）またはmax-width: 576px（down）の場合に、要素に修飾子を適用します。
.ion-hide-md-{dir}	min-width: 768px（up）またはmax-width: 768px（down）の場合に、要素に修飾子を適用します。
.ion-hide-lg-{dir}	min-width: 992px（up）またはmax-width: 992px（down）の場合に、要素に修飾子を適用します。
.ion-hide-xl-{dir}	min-width: 1200px（up）またはmax-width: 1200px（down）の場合に、要素に修飾子を適用します。

コンテンツスペース

要素のパディング

パディングクラスは、要素のパディング領域を設定します。パディング領域は、要素のコンテンツとその境界線の間のスペースです。

適用されるpaddingのデフォルト量は16pxであり、--ion-padding変数によって設定されます。これらの値を変更する方法の詳細については、CSS変数セクションを参照してください。

<ion-grid>
  <ion-row>
    <ion-col class="ion-padding">
      <div>padding</div>
    </ion-col>
    <ion-col class="ion-padding-top">
      <div>padding-top</div>
    </ion-col>
    <ion-col class="ion-padding-start">
      <div>padding-start</div>
    </ion-col>
    <ion-col class="ion-padding-end">
      <div>padding-end</div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col class="ion-padding-bottom">
      <div>padding-bottom</div>
    </ion-col>
    <ion-col class="ion-padding-vertical">
      <div>padding-vertical</div>
    </ion-col>
    <ion-col class="ion-padding-horizontal">
      <div>padding-horizontal</div>
    </ion-col>
    <ion-col class="ion-no-padding">
      <div>no-padding</div>
    </ion-col>
  </ion-row>
</ion-grid>

クラス	スタイルルール	説明
.ion-padding	padding: 16px	すべての側にパディングを適用します。
.ion-padding-top	padding-top: 16px	上部にパディングを適用します。
.ion-padding-start	padding-start: 16px	開始位置にパディングを適用します。
.ion-padding-end	padding-end: 16px	終了位置にパディングを適用します。
.ion-padding-bottom	padding-bottom: 16px	下部にパディングを適用します。
.ion-padding-vertical	padding: 16px 0	上下にパディングを適用します。
.ion-padding-horizontal	padding: 0 16px	左右にパディングを適用します。
.ion-no-padding	padding: 0	すべての辺にパディングを適用しません。

要素のマージン

マージン領域は、要素を隣接要素から分離するために使用される空の領域で、境界領域を拡張します。

適用されるデフォルトのmarginの量は16pxで、--ion-margin変数によって設定されます。これらの値を変更する方法の詳細については、CSS変数セクションを参照してください。

<ion-grid>
  <ion-row>
    <ion-col class="ion-margin">
      <div>margin</div>
    </ion-col>
    <ion-col class="ion-margin-top">
      <div>margin-top</div>
    </ion-col>
    <ion-col class="ion-margin-start">
      <div>margin-start</div>
    </ion-col>
    <ion-col class="ion-margin-end">
      <div>margin-end</div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col class="ion-margin-bottom">
      <div>margin-bottom</div>
    </ion-col>
    <ion-col class="ion-margin-vertical">
      <div>margin-vertical</div>
    </ion-col>
    <ion-col class="ion-margin-horizontal">
      <div>margin-horizontal</div>
    </ion-col>
    <ion-col class="ion-no-margin">
      <div>no-margin</div>
    </ion-col>
  </ion-row>
</ion-grid>

クラス	スタイルルール	説明
.ion-margin	margin: 16px	すべての辺にマージンを適用します。
.ion-margin-top	margin-top: 16px	上部にマージンを適用します。
.ion-margin-start	margin-start: 16px	左側にマージンを適用します。
.ion-margin-end	margin-end: 16px	右側にマージンを適用します。
.ion-margin-bottom	margin-bottom: 16px	下部にマージンを適用します。
.ion-margin-vertical	margin: 16px 0	上下にマージンを適用します。
.ion-margin-horizontal	margin: 0 16px	左右にマージンを適用します。
.ion-no-margin	margin: 0	すべての辺にマージンを適用しません。

フレックスプロパティ

フレックスコンテナプロパティ

<ion-grid>
  <ion-row class="ion-justify-content-start">
    <ion-col size="3">
      <div>1 of 2</div>
    </ion-col>
    <ion-col size="3">
      <div>2 of 2</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-justify-content-center">
    <ion-col size="3">
      <div>1 of 2</div>
    </ion-col>
    <ion-col size="3">
      <div>2 of 2</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-justify-content-end">
    <ion-col size="3">
      <div>1 of 2</div>
    </ion-col>
    <ion-col size="3">
      <div>2 of 2</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-justify-content-around">
    <ion-col size="3">
      <div>1 of 2</div>
    </ion-col>
    <ion-col size="3">
      <div>2 of 2</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-justify-content-between">
    <ion-col size="3">
      <div>1 of 2</div>
    </ion-col>
    <ion-col size="3">
      <div>2 of 2</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-justify-content-evenly">
    <ion-col size="3">
      <div>1 of 2</div>
    </ion-col>
    <ion-col size="3">
      <div>2 of 2</div>
    </ion-col>
  </ion-row>
</ion-grid>

<ion-grid>
  <ion-row class="ion-align-items-start">
    <ion-col>
      <div>1 of 4</div>
    </ion-col>
    <ion-col>
      <div>2 of 4</div>
    </ion-col>
    <ion-col>
      <div>3 of 4</div>
    </ion-col>
    <ion-col>
      <div>4 of 4 # # #</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-align-items-end">
    <ion-col>
      <div>1 of 4</div>
    </ion-col>
    <ion-col>
      <div>2 of 4</div>
    </ion-col>
    <ion-col>
      <div>3 of 4</div>
    </ion-col>
    <ion-col>
      <div>4 of 4 # # #</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-align-items-center">
    <ion-col>
      <div>1 of 4</div>
    </ion-col>
    <ion-col>
      <div>2 of 4</div>
    </ion-col>
    <ion-col>
      <div>3 of 4</div>
    </ion-col>
    <ion-col>
      <div>4 of 4 # # #</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-align-items-baseline">
    <ion-col>
      <div>1 of 4</div>
    </ion-col>
    <ion-col>
      <div>2 of 4</div>
    </ion-col>
    <ion-col>
      <div>3 of 4</div>
    </ion-col>
    <ion-col>
      <div>4 of 4 # # #</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-align-items-stretch">
    <ion-col>
      <div>1 of 4</div>
    </ion-col>
    <ion-col>
      <div>2 of 4</div>
    </ion-col>
    <ion-col>
      <div>3 of 4</div>
    </ion-col>
    <ion-col>
      <div>4 of 4 # # #</div>
    </ion-col>
  </ion-row>
</ion-grid>

クラス	スタイルルール	説明
.ion-justify-content-start	justify-content: flex-start	項目は主軸の開始位置に詰められます。
.ion-justify-content-end	justify-content: flex-end	項目は主軸の終了位置に詰められます。
.ion-justify-content-center	justify-content: center	項目は主軸に沿って中央に配置されます。
.ion-justify-content-around	justify-content: space-around	項目は、周囲に等間隔で主軸上に均等に配置されます。
.ion-justify-content-between	justify-content: space-between	項目は主軸上に均等に配置されます。
.ion-justify-content-evenly	justify-content: space-evenly	項目は、任意の2つの項目間の間隔が等しくなるように配置されます。
.ion-align-items-start	align-items: flex-start	項目は交差軸の開始位置に詰められます。
.ion-align-items-end	align-items: flex-end	項目は交差軸の終了位置に詰められます。
.ion-align-items-center	align-items: center	項目は交差軸に沿って中央に配置されます。
.ion-align-items-baseline	align-items: baseline	項目は、それらのベースラインが揃うように配置されます。
.ion-align-items-stretch	align-items: stretch	項目は、コンテナを埋めるように引き伸ばされます。
.ion-nowrap	flex-wrap: nowrap	項目はすべて1行に配置されます。
.ion-wrap	flex-wrap: wrap	項目は、上から下に向かって複数行に折り返されます。
.ion-wrap-reverse	flex-wrap: wrap-reverse	項目は、下から上に向かって複数行に折り返されます。

フレックスアイテムプロパティ

<ion-grid>
  <ion-row>
    <ion-col class="ion-align-self-start">
      <div>1 of 4</div>
    </ion-col>
    <ion-col class="ion-align-self-center">
      <div>2 of 4</div>
    </ion-col>
    <ion-col class="ion-align-self-end">
      <div>3 of 4</div>
    </ion-col>
    <ion-col>
      <div>4 of 4 # # #</div>
    </ion-col>
  </ion-row>
</ion-grid>

クラス	スタイルルール	説明
.ion-align-self-start	align-self: flex-start	項目は交差軸の開始位置に詰められます。
.ion-align-self-end	align-self: flex-end	項目は交差軸の終了位置に詰められます。
.ion-align-self-center	align-self: center	項目は交差軸に沿って中央に配置されます。
.ion-align-self-baseline	align-self: baseline	項目は、他の項目のベースラインと揃うように配置されます。
.ion-align-self-stretch	align-self: stretch	項目は、コンテナを埋めるように引き伸ばされます。
.ion-align-self-auto	align-self: auto	項目は、親のalign-itemsの値に従って配置されます。

ボーダー表示

ボーダー表示CSSプロパティは、ボーダーを表示するかどうかを決定します。このプロパティは、ion-headerとion-footerに適用できます。

<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-title>Header - No Border</ion-title>
  </ion-toolbar>
</ion-header>

<ion-footer class="ion-no-border">
  <ion-toolbar>
    <ion-title>Footer - No Border</ion-title>
  </ion-toolbar>
</ion-footer>

クラス	説明
.ion-no-border	要素にボーダーは表示されません。

Ionicブレークポイント

Ionicは、画面サイズに基づいてアプリケーションのスタイルを異なるものにするために、メディアクエリでブレークポイントを使用します。上記のユーティリティクラスで使用される次のブレークポイント名は、幅が満たされた場合にクラスが適用される場所を示します。

ブレークポイント名	幅
xs	0
sm	576px
md	768px
lg	992px
xl	1200px