Skip to main content
Version: v8

CSSユーティリティ

Ionic Framework は、テキストの順番を入れ替えたり、要素の配置や padding や margin を修正する一連のユーティリティ属性を提供します。これは要素で使うことができます。

important

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

テキストの修正​

Text Align​

<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>
ClassStyle Rule説明
.ion-text-lefttext-align: leftインラインコンテンツは行ボックスの左端に揃えられます。
.ion-text-righttext-align: rightインラインコンテンツは行ボックスの右端に揃えられます。
.ion-text-starttext-align: start方向が左から右の場合はtext-leftと同じで、方向が右から左の場合はtext-rightと同じです。
.ion-text-endtext-align: end方向が左から右の場合はtext-rightと同じで、方向が右から左の場合はtext-leftと同じです。
.ion-text-centertext-align: centerインラインコンテンツは行ボックス内で中央揃えされます。
.ion-text-justifytext-align: justifyインラインコンテンツは両端揃えされます。テキストは、最後の行を除いて、その左右の端を行ボックスの左右の端に揃えるように間隔を空ける必要があります。
.ion-text-wrapwhite-space: normal空白の連続は折りたたまれます。ソース内の改行文字は他の空白として処理されます。必要に応じて行を折り返して行ボックスを埋めます。
.ion-text-nowrapwhite-space: nowrapnormalと同様に空白を折りたたみますが、テキスト内の改行（テキストの折り返し）を抑制します。

Text Transform​

<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>
ClassStyle Rule説明
.ion-text-uppercasetext-transform: uppercaseすべての文字を大文字に変換します。
.ion-text-lowercasetext-transform: lowercaseすべての文字を小文字に変換します。
.ion-text-capitalizetext-transform: capitalize各単語の最初の文字を大文字に変換します。

Responsive Text Classes​

上に挙げたすべてのテキストクラスには、スクリーンサイズに応じてテキストを変更するための追加のクラスがあります。各クラスで text- の代わりに text-{breakpoint}- を使用すると、特定のスクリーンサイズでのみそのクラスを使用できます。ここで {breakpoint} は Ionic Breakpoints にリストされているブレークポイント名のうちの 1 つです。

以下の表は、 {modifier} のデフォルトの挙動です。 left, right, start, end, center, justify, wrap, nowrap, uppercase, lowercase, capitalize は上記の通りです。

Class説明
.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​

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

<ion-grid>
  <ion-row>
    <ion-col>
      <h3>no float</h3>
      <img
        alt="Silhouette of a person's head"
        src="https://ionicframework.com/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://ionicframework.com/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://ionicframework.com/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>
ClassStyle Rule説明
.ion-float-leftfloat: left要素は包含ブロックの左側にフロートします。
.ion-float-rightfloat: right要素は包含ブロックの右側にフロートします。
.ion-float-startfloat: left / float: right方向が左から右の場合はfloat-leftと同じで、方向が右から左の場合はfloat-rightと同じです。
.ion-float-endfloat: left / float: right方向が左から右の場合はfloat-rightと同じで、方向が右から左の場合はfloat-leftと同じです。

レスポンシブな Float クラス​

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

次の表に、デフォルトの動作を示します。 {modifier} は、前述のように left, right, start, end のいずれかです。

Class説明
.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​

display CSS プロパティは、要素をブロックまたはインラインボックスとして扱うかどうか、およびその子に使用されるレイアウト（フローレイアウト、グリッド、flex など）を設定します。レイアウトから要素を完全に非表示にするためにも使用できます。

Ionic はdisplay用に以下のユーティリティクラスを提供します：

ClassStyle Rule説明
.ion-display-nonedisplay: none要素の表示をオフにして、レイアウトに影響を与えないようにします（要素が存在しないかのようにドキュメントがレンダリングされます）。
.ion-display-inlinedisplay: inline要素はインライン要素として動作し、その前後に改行を作成しません。
.ion-display-inline-blockdisplay: inline-block要素はブロック要素として動作し、単一のインラインボックスであるかのように周囲のコンテンツと流れます。
.ion-display-blockdisplay: block要素はブロック要素として動作し、通常のフローではその前後に改行を作成します。
.ion-display-flexdisplay: flex要素はブロック要素のように動作し、flexbox モデルに従ってコンテンツをレイアウトします。
.ion-display-inline-flexdisplay: inline-flex要素はインライン要素のように動作し、flexbox モデルに従ってコンテンツをレイアウトします。
.ion-display-griddisplay: grid要素はブロック要素のように動作し、グリッドモデルに従ってコンテンツをレイアウトします。
.ion-display-inline-griddisplay: inline-grid要素はインライン要素のように動作し、グリッドモデルに従ってコンテンツをレイアウトします。
.ion-display-tabledisplay: table要素は HTML の<table>要素のように動作します。ブロックレベルのボックスを定義します。
.ion-display-table-celldisplay: table-cell要素は HTML の<td>要素のように動作します。
.ion-display-table-rowdisplay: table-row要素は HTML の<tr>要素のように動作します。

レスポンシブ Display クラス​

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

以下の表は、デフォルトの動作を示しています。{modifier}は、上記で説明されているように、none、inline、inline-block、block、flex、inline-flex、grid、inline-grid、table、table-cell、table-rowのいずれかです。

Class説明
.ion-display-{modifier}すべての画面サイズで要素に修飾子を適用します。
.ion-display-sm-{modifier}min-width: 576pxのときに要素に修飾子を適用します。
.ion-display-md-{modifier}min-width: 768pxのときに要素に修飾子を適用します。
.ion-display-lg-{modifier}min-width: 992pxのときに要素に修飾子を適用します。
.ion-display-xl-{modifier}min-width: 1200pxのときに要素に修飾子を適用します。

非推奨クラス​

非推奨通知

以下のクラスは非推奨であり、次のメジャーリリースで削除されます。代わりに推奨される.ion-display-*クラスを使用してください。

Class説明
.ion-hideすべての画面サイズで要素にdisplay: noneを適用します。
非推奨 — 代わりにion-display-noneクラスを使用してください。
.ion-hide-sm-{dir}min-width: 576px（up）またはmax-width: 576px（down）のときに要素に修飾子を適用します。
非推奨 — 代わりにion-display-sm-{modifier}クラスを使用してください。
.ion-hide-md-{dir}min-width: 768px（up）またはmax-width: 768px（down）のときに要素に修飾子を適用します。
非推奨 — 代わりにion-display-md-{modifier}クラスを使用してください。
.ion-hide-lg-{dir}min-width: 992px（up）またはmax-width: 992px（down）のときに要素に修飾子を適用します。
非推奨 — 代わりにion-display-lg-{modifier}クラスを使用してください。
.ion-hide-xl-{dir}min-width: 1200px（up）またはmax-width: 1200px（down）のときに要素に修飾子を適用します。
非推奨 — 代わりにion-display-xl-{modifier}クラスを使用してください。

コンテンツのスペース​

Padding​

padding 属性は、要素の padding エリアを設定します。padding エリアは、要素のコンテンツとその境界線のスペースです。

padding で適用されるデフォルトの数値は 16px で、これは --ion-padding　変数で設定することができます。これらの値を変更する方法については CSS Variables をご覧ください。

<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>
ClassStyle Rule説明
.ion-paddingpadding: 16pxすべての側にパディングを適用します。
.ion-padding-toppadding-top: 16px上部にパディングを適用します。
.ion-padding-startpadding-start: 16px開始側にパディングを適用します。
.ion-padding-endpadding-end: 16px終了側にパディングを適用します。
.ion-padding-bottompadding-bottom: 16px下部にパディングを適用します。
.ion-padding-verticalpadding: 16px 0上下にパディングを適用します。
.ion-padding-horizontalpadding: 0 16px左右にパディングを適用します。
.ion-no-paddingpadding: 0すべての側にパディングを適用しません。

Margin​

Margin エリアは、隣り合う要素とのスペースを広げるために境界線の外に空のエリアをつくるためのものです。

margin　はデフォルトで 16px が設定されており、 --ion-margin 変数で設定されています。 これらの値を変更する方法については CSS Variables をご覧ください。

<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>
ClassStyle Rule説明
.ion-marginmargin: 16pxすべての側にマージンを適用します。
.ion-margin-topmargin-top: 16px上部にマージンを適用します。
.ion-margin-startmargin-start: 16px開始側にマージンを適用します。
.ion-margin-endmargin-end: 16px終了側にマージンを適用します。
.ion-margin-bottommargin-bottom: 16px下部にマージンを適用します。
.ion-margin-verticalmargin: 16px 0上下にマージンを適用します。
.ion-margin-horizontalmargin: 0 16px左右にマージンを適用します。
.ion-no-marginmargin: 0すべての側にマージンを適用しません。

Flex コンテナプロパティ​

Flexbox プロパティは、すべての flex アイテムのレイアウトを制御するコンテナプロパティと、個々の flex アイテムを制御するアイテムプロパティの 2 つのカテゴリに分けられます。アイテムレベルの配置については、Flex Item Propertiesを参照してください。

Align Items​

align-items CSS プロパティは、すべての直接の子要素をグループとしてalign-self値を設定します。flexbox では、交差軸上のアイテムの配置を制御します。グリッドレイアウトでは、グリッド領域内のブロック軸上のアイテムの配置を制御します。

Ionic はalign-items用に以下のユーティリティクラスを提供します：

ClassStyle Rule説明
.ion-align-items-startalign-items: flex-startアイテムは交差軸の開始側に詰められます。
.ion-align-items-endalign-items: flex-endアイテムは交差軸の終了側に詰められます。
.ion-align-items-centeralign-items: centerアイテムは交差軸に沿って中央揃えされます。
.ion-align-items-baselinealign-items: baselineアイテムはベースラインが揃うように配置されます。
.ion-align-items-stretchalign-items: stretchアイテムはコンテナを埋めるように伸ばされます。

Align Content​

align-content CSS プロパティは、flexbox の交差軸、またはグリッドまたはブロックレベル要素のブロック軸に沿って、コンテンツアイテム間および周囲のスペースの分布を設定します。

このプロパティは、単一行の flex コンテナ（つまり、flex-wrap: nowrapを持つもの）には影響しません。

Ionic はalign-content用に以下のユーティリティクラスを提供します：

ClassStyle Rule説明
.ion-align-content-startalign-content: flex-start行は交差軸の開始側に詰められます。
.ion-align-content-endalign-content: flex-end行は交差軸の終了側に詰められます。
.ion-align-content-centeralign-content: center行は交差軸に沿って中央揃えされます。
.ion-align-content-stretchalign-content: stretch行はコンテナを埋めるように伸ばされます。
.ion-align-content-betweenalign-content: space-between行は交差軸上で均等に配置されます。
.ion-align-content-aroundalign-content: space-around行は周囲に等しいスペースを持って均等に配置されます。

Justify Content​

justify-content CSS プロパティは、ブラウザが flex コンテナの主軸、およびグリッドとマルチカラムコンテナのインライン軸に沿って、コンテンツアイテム間および周囲のスペースをどのように分配するかを定義します。

Ionic はjustify-content用に以下のユーティリティクラスを提供します：

ClassStyle Rule説明
.ion-justify-content-startjustify-content: flex-startアイテムは主軸の開始側に詰められます。
.ion-justify-content-endjustify-content: flex-endアイテムは主軸の終了側に詰められます。
.ion-justify-content-centerjustify-content: centerアイテムは主軸に沿って中央揃えされます。
.ion-justify-content-aroundjustify-content: space-aroundアイテムは主軸上で周囲に等しいスペースを持って均等に配置されます。
.ion-justify-content-betweenjustify-content: space-betweenアイテムは主軸上で均等に配置されます。
.ion-justify-content-evenlyjustify-content: space-evenlyアイテムは、任意の 2 つのアイテム間のスペースが等しくなるように配置されます。

Flex Direction​

flex-direction CSS プロパティは、flex アイテムが flex コンテナ内にどのように配置されるかを設定し、主軸と方向（通常または逆）を定義します。

Ionic はflex-direction用に以下のユーティリティクラスを提供します：

ClassStyle Rule説明
.ion-flex-rowflex-direction: rowアイテムはテキストの方向と同じ方向に配置されます。
.ion-flex-row-reverseflex-direction: row-reverseアイテムはテキストの方向と逆の方向に配置されます。
.ion-flex-columnflex-direction: columnアイテムは垂直に配置されます。
.ion-flex-column-reverseflex-direction: column-reverseアイテムは逆順で垂直に配置されます。

Flex Wrap​

flex-wrap CSS プロパティは、flex アイテムが 1 行に強制されるか、複数行に折り返すことができるかを設定します。折り返しが許可されている場合、行が積み重ねられる方向を設定します。

Ionic はflex-wrap用に以下のユーティリティクラスを提供します：

ClassStyle Rule説明
.ion-flex-nowrapflex-wrap: nowrapすべてのアイテムが 1 行になります。
.ion-flex-wrapflex-wrap: wrapアイテムは複数行に折り返され、上から下へ配置されます。
.ion-flex-wrap-reverseflex-wrap: wrap-reverseアイテムは複数行に折り返され、下から上へ配置されます。

レスポンシブ Flex コンテナクラス​

上記のすべての flex コンテナクラスには、画面サイズに基づいてプロパティを変更する追加のクラスがあります。基本クラス名の代わりに、{property}-{breakpoint}-{modifier}を使用して、特定の画面サイズでのみクラスを使用します。{breakpoint}はIonic Breakpointsにリストされているブレークポイント名の 1 つです。

以下の表は、デフォルトの動作を示しています。{property}は次のいずれかです：justify-content、align-content、align-items、flex、またはflex-wrap。{modifier}は上記で説明されている対応する値です。

ClassDescription
.ion-{property}-{modifier}Applies the modifier to the element on all screen sizes.
.ion-{property}-sm-{modifier}Applies the modifier to the element when min-width: 576px.
.ion-{property}-md-{modifier}Applies the modifier to the element when min-width: 768px.
.ion-{property}-lg-{modifier}Applies the modifier to the element when min-width: 992px.
.ion-{property}-xl-{modifier}Applies the modifier to the element when min-width: 1200px.

非推奨クラス​

非推奨通知

以下のクラスは非推奨であり、次のメジャーリリースで削除されます。代わりに推奨される.ion-flex-*クラスを使用してください。

Class説明
.ion-nowrapすべてのアイテムが 1 行になります。
非推奨 — 代わりに.ion-flex-nowrapを使用してください。
.ion-wrapアイテムは複数行に折り返され、上から下へ配置されます。
非推奨 — 代わりに.ion-flex-wrapを使用してください。
.ion-wrap-reverseアイテムは複数行に折り返され、下から上へ配置されます。
非推奨 — 代わりに.ion-flex-wrap-reverseを使用してください。

Flex アイテムプロパティ​

Flex アイテムプロパティは、個々の flex アイテムが flex コンテナ内でどのように動作するかを制御します。コンテナレベルの配置については、Flex Container Propertiesも参照してください。

Align Self​

align-self CSS プロパティは、グリッドまたは flex アイテムの align-items 値をオーバーライドします。グリッドでは、グリッド領域内でアイテムを配置します。flexbox では、交差軸上でアイテムを配置します。

このプロパティは、ブロックレベルのボックスやテーブルセルには適用されません。flexbox アイテムの交差軸マージンがautoの場合、align-selfは無視されます。

Ionic はalign-self用に以下のユーティリティクラスを提供します：

ClassStyle Rule説明
.ion-align-self-startalign-self: flex-startアイテムは交差軸の開始側に詰められます。
.ion-align-self-endalign-self: flex-endアイテムは交差軸の終了側に詰められます。
.ion-align-self-centeralign-self: centerアイテムは交差軸に沿って中央揃えされます。
.ion-align-self-baselinealign-self: baselineアイテムは、そのベースラインが他のアイテムのベースラインと揃うように配置されます。
.ion-align-self-stretchalign-self: stretchアイテムはコンテナを埋めるように伸ばされます。
.ion-align-self-autoalign-self: autoアイテムは親のalign-items値に従って配置されます。

Flex​

flex CSS プロパティは、flex-grow、flex-shrink、flex-basisの短縮プロパティです。flex アイテムが flex コンテナ内で利用可能なスペースに合わせてどのように拡大または縮小するかを設定します。

Ionic はflex用に以下のユーティリティクラスを提供します：

ClassStyle Rule説明
.ion-flex-1flex: 1アイテムは他の flex アイテムと等しく拡大および縮小します。
.ion-flex-autoflex: autoアイテムはそのコンテンツサイズに基づいて拡大および縮小します。
.ion-flex-initialflex: initialアイテムは最小コンテンツサイズまで縮小しますが、拡大しません。
.ion-flex-noneflex: noneアイテムは拡大も縮小もしません。

Flex Grow​

flex-grow CSS プロパティは、flex 拡大係数を設定します。これは、flex コンテナの正の自由スペース（存在する場合）のうち、flex アイテムの主サイズに割り当てるべき量を指定します。

Ionic はflex-grow用に以下のユーティリティクラスを提供します：

ClassStyle Rule説明
.ion-flex-grow-0flex-grow: 0アイテムはコンテンツサイズを超えて拡大しません。
.ion-flex-grow-1flex-grow: 1アイテムは利用可能なスペースを比例して埋めるように拡大します。

Flex Shrink​

flex-shrink CSS プロパティは、flex アイテムの flex 縮小係数を設定します。すべての flex アイテムのサイズが flex コンテナより大きい場合、flex アイテムはflex-shrink値に従って縮小して収まります。各 flex 行の負の自由スペースは、flex-shrink値が0より大きい行の flex アイテム間で分配されます。

Ionic はflex-shrink用に以下のユーティリティクラスを提供します：

ClassStyle Rule説明
.ion-flex-shrink-0flex-shrink: 0アイテムはコンテンツサイズを下回って縮小しません。
.ion-flex-shrink-1flex-shrink: 1コンテナが小さすぎる場合、アイテムは比例して縮小します。

Order​

order CSS プロパティは、flex またはグリッドコンテナ内でアイテムをレイアウトする順序を設定します。コンテナ内のアイテムは、昇順のorder値で並べ替えられ、次にソースコードの順序で並べ替えられます。明示的なorder値が指定されていないアイテムには、デフォルト値0が割り当てられます。

Ionic はorder用に以下のユーティリティクラスを提供します：

ClassStyle Rule説明
.ion-order-firstorder: -1アイテムは flex コンテナの最初に表示されます。
.ion-order-0order: 0アイテムは自然な順序で表示されます。
.ion-order-1order: 1アイテムは order 0 のアイテムの後に表示されます。
.ion-order-2order: 2アイテムは order 1 のアイテムの後に表示されます。
.ion-order-3order: 3アイテムは order 2 のアイテムの後に表示されます。
.ion-order-4order: 4アイテムは order 3 のアイテムの後に表示されます。
.ion-order-5order: 5アイテムは order 4 のアイテムの後に表示されます。
.ion-order-6order: 6アイテムは order 5 のアイテムの後に表示されます。
.ion-order-7order: 7アイテムは order 6 のアイテムの後に表示されます。
.ion-order-8order: 8アイテムは order 7 のアイテムの後に表示されます。
.ion-order-9order: 9アイテムは order 8 のアイテムの後に表示されます。
.ion-order-10order: 10アイテムは order 9 のアイテムの後に表示されます。
.ion-order-11order: 11アイテムは order 10 のアイテムの後に表示されます。
.ion-order-12order: 12アイテムは order 11 のアイテムの後に表示されます。
.ion-order-lastorder: 13アイテムは flex コンテナの最後に表示されます。

レスポンシブ Flex アイテムクラス​

上記のすべての flex アイテムクラスには、画面サイズに基づいてプロパティを変更する追加のクラスがあります。基本クラス名の代わりに、{property}-{breakpoint}-{modifier}を使用して、特定の画面サイズでのみクラスを使用します。{breakpoint}はIonic Breakpointsにリストされているブレークポイント名の 1 つです。

以下の表は、デフォルトの動作を示しています。{property}は次のいずれかです：align-self、flex、flex-grow、flex-shrink、またはorder。{modifier}は上記で説明されている対応する値です。

Class説明
.ion-{property}-{modifier}すべての画面サイズで要素に修飾子を適用します。
.ion-{property}-sm-{modifier}min-width: 576pxのときに要素に修飾子を適用します。
.ion-{property}-md-{modifier}min-width: 768pxのときに要素に修飾子を適用します。
.ion-{property}-lg-{modifier}min-width: 992pxのときに要素に修飾子を適用します。
.ion-{property}-xl-{modifier}min-width: 1200pxのときに要素に修飾子を適用します。

ボーダー表示​

.ion-no-borderユーティリティクラスは、Ionic コンポーネントからボーダーを削除するために使用できます。このクラスは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>
Class説明
.ion-no-border要素にボーダーがありません。

Ionic のブレイクポイント​

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

Breakpoint NameWidth
xs0
sm576px
md768px
lg992px
xl1200px

Contents

Edit this page