メインコンテンツまでスキップ
バージョン: v8 (beta)

CSSユーティリティ

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

注記

使用可能な 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>
ClassStyle RuleDescription
.ion-text-lefttext-align: leftThe inline contents are aligned to the left edge of the line box.
.ion-text-righttext-align: rightThe inline contents are aligned to the right edge of the line box.
.ion-text-starttext-align: startThe same as text-left if direction is left-to-right and text-right if direction is right-to-left.
.ion-text-endtext-align: endThe same as text-right if direction is left-to-right and text-left if direction is right-to-left.
.ion-text-centertext-align: centerThe inline contents are centered within the line box.
.ion-text-justifytext-align: justifyThe inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.
.ion-text-wrapwhite-space: normalSequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.
.ion-text-nowrapwhite-space: nowrapCollapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

テキストの変換​

<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 RuleDescription
.ion-text-uppercasetext-transform: uppercaseForces all characters to be converted to uppercase.
.ion-text-lowercasetext-transform: lowercaseForces all characters to be converted to lowercase.
.ion-text-capitalizetext-transform: capitalizeForces the first letter of each word to be converted to uppercase.

Responsive Text Classes​

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

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

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

要素の配置​

Float 要素​

CSS プロパティの float は、テキストとインライン要素を囲んだ要素がそのコンテナの左側または右側に沿って配置することを指定します。 以下のように要素はウェブページのコードと異なった順に表示されます。

<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 RuleDescription
.ion-float-leftfloat: leftThe element will float on the left side of its containing block.
.ion-float-rightfloat: rightThe element will float on the right side of its containing block.
.ion-float-startfloat: left / float: rightThe same as float-left if direction is left-to-right and float-right if direction is right-to-left.
.ion-float-endfloat: left / float: rightThe same as float-right if direction is left-to-right and float-left if direction is right-to-left.

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

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

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

ClassDescription
.ion-float-{modifier}Applies the modifier to the element on all screen sizes.
.ion-float-sm-{modifier}Applies the modifier to the element when min-width: 576px.
.ion-float-md-{modifier}Applies the modifier to the element when min-width: 768px.
.ion-float-lg-{modifier}Applies the modifier to the element when min-width: 992px.
.ion-float-xl-{modifier}Applies the modifier to the element when 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>
ClassStyle RuleDescription
.ion-hidedisplay: noneThe element will be hidden.

Responsive な Display 属性​

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

ClassDescription
.ion-hide-sm-{dir}Applies the modifier to the element when min-width: 576px (up) or max-width: 576px (down).
.ion-hide-md-{dir}Applies the modifier to the element when min-width: 768px (up) or max-width: 768px (down).
.ion-hide-lg-{dir}Applies the modifier to the element when min-width: 992px (up) or max-width: 992px (down).
.ion-hide-xl-{dir}Applies the modifier to the element when min-width: 1200px (up) or max-width: 1200px (down).

コンテンツのスペース​

要素の 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 RuleDescription
.ion-paddingpadding: 16pxApplies padding to all sides.
.ion-padding-toppadding-top: 16pxApplies padding to the top.
.ion-padding-startpadding-start: 16pxApplies padding to the start.
.ion-padding-endpadding-end: 16pxApplies padding to the end.
.ion-padding-bottompadding-bottom: 16pxApplies padding to the bottom.
.ion-padding-verticalpadding: 16px 0Applies padding to the top and bottom.
.ion-padding-horizontalpadding: 0 16pxApplies padding to the left and right.
.ion-no-paddingpadding: 0Applies no padding to all sides.

要素の 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 RuleDescription
.ion-marginmargin: 16pxApplies margin to all sides.
.ion-margin-topmargin-top: 16pxApplies margin to the top.
.ion-margin-startmargin-start: 16pxApplies margin to the left.
.ion-margin-endmargin-end: 16pxApplies margin to the right.
.ion-margin-bottommargin-bottom: 16pxApplies margin to the bottom.
.ion-margin-verticalmargin: 16px 0Applies margin to the top and bottom.
.ion-margin-horizontalmargin: 0 16pxApplies margin to the left and right.
.ion-no-marginmargin: 0Applies no margin to all sides.

Flex プロパティ​

Flex コンテナのプロパティ​

<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>
ClassStyle RuleDescription
.ion-justify-content-startjustify-content: flex-startItems are packed toward the start on the main axis.
.ion-justify-content-endjustify-content: flex-endItems are packed toward the end on the main axis.
.ion-justify-content-centerjustify-content: centerItems are centered along the main axis.
.ion-justify-content-aroundjustify-content: space-aroundItems are evenly distributed on the main axis with equal space around them.
.ion-justify-content-betweenjustify-content: space-betweenItems are evenly distributed on the main axis.
.ion-justify-content-evenlyjustify-content: space-evenlyItems are distributed so that the spacing between any two items is equal.
.ion-align-items-startalign-items: flex-startItems are packed toward the start on the cross axis.
.ion-align-items-endalign-items: flex-endItems are packed toward the end on the cross axis.
.ion-align-items-centeralign-items: centerItems are centered along the cross axis.
.ion-align-items-baselinealign-items: baselineItems are aligned so that their baselines align.
.ion-align-items-stretchalign-items: stretchItems are stretched to fill the container.
.ion-nowrapflex-wrap: nowrapItems will all be on one line.
.ion-wrapflex-wrap: wrapItems will wrap onto multiple lines, from top to bottom.
.ion-wrap-reverseflex-wrap: wrap-reverseItems will wrap onto multiple lines, from bottom to top.

Flex Item Properties​

<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>
ClassStyle RuleDescription
.ion-align-self-startalign-self: flex-startItem is packed toward the start on the cross axis.
.ion-align-self-endalign-self: flex-endItem is packed toward the end on the cross axis.
.ion-align-self-centeralign-self: centerItem is centered along the cross axis.
.ion-align-self-baselinealign-self: baselineItem is aligned so that its baseline aligns with other item baselines.
.ion-align-self-stretchalign-self: stretchItem is stretched to fill the container.
.ion-align-self-autoalign-self: autoItem is positioned according to the parent's align-items value.

Border の表示​

border display CSS プロパティは、border を表示するかどうかを指定します。このプロパティは、 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>
ClassDescription
.ion-no-borderThe element will have no border.

Ionic のブレイクポイント​

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

Breakpoint NameWidth
xs0
sm576px
md768px
lg992px
xl1200px

Contents

このページを編集