CSSユーティリティ
Ionic Framework は、テキストの順番を入れ替えたり、要素の配置や padding や margin を修正する一連のユーティリティ属性を提供します。これは要素で使うことができます。
If your app was not started using an available Ionic Framework starter, the stylesheets listed in the optional section of the global stylesheets will need to be included in order for these styles to work.
テキストの修正
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>
Class | Style Rule | Description |
---|---|---|
.ion-text-left | text-align: left | The inline contents are aligned to the left edge of the line box. |
.ion-text-right | text-align: right | The inline contents are aligned to the right edge of the line box. |
.ion-text-start | text-align: start | The same as text-left if direction is left-to-right and text-right if direction is right-to-left. |
.ion-text-end | text-align: end | The same as text-right if direction is left-to-right and text-left if direction is right-to-left. |
.ion-text-center | text-align: center | The inline contents are centered within the line box. |
.ion-text-justify | text-align: justify | The 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-wrap | white-space: normal | Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes. |
.ion-text-nowrap | white-space: nowrap | Collapses whitespace as for normal , but suppresses line breaks (text wrapping) within text. |
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>
Class | Style Rule | Description |
---|---|---|
.ion-text-uppercase | text-transform: uppercase | Forces all characters to be converted to uppercase. |
.ion-text-lowercase | text-transform: lowercase | Forces all characters to be converted to lowercase. |
.ion-text-capitalize | text-transform: capitalize | Forces 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
は上記の通りです。
Class | Description |
---|---|
.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
The float CSS property specifies that an element should be placed along the left or right side of its container, where text and inline elements will wrap around it. This way, the element is taken from the normal flow of the web page, though still remaining a part of the flow, contrary to absolute positioning.
<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>
Class | Style Rule | Description |
---|---|---|
.ion-float-left | float: left | The element will float on the left side of its containing block. |
.ion-float-right | float: right | The element will float on the right side of its containing block. |
.ion-float-start | float: left / float: right | The same as float-left if direction is left-to-right and float-right if direction is right-to-left. |
.ion-float-end | float: left / float: right | The 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
のいずれかです。
Class | Description |
---|---|
.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
The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex. It can also be used to completely hide an element from the layout.
Ionic provides the following utility classes for display
:
Class | Style Rule | Description |
---|---|---|
.ion-display-none | display: none | Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). |
.ion-display-inline | display: inline | The element behaves as an inline element that does not create line breaks before or after itself. |
.ion-display-inline-block | display: inline-block | The element behaves as a block element that flows with surrounding content as if it were a single inline box. |
.ion-display-block | display: block | The element behaves as a block element, creating line breaks both before and after itself when in the normal flow. |
.ion-display-flex | display: flex | The element behaves like a block element and lays out its content according to the flexbox model. |
.ion-display-inline-flex | display: inline-flex | The element behaves like an inline element and lays out its content according to the flexbox model. |
.ion-display-grid | display: grid | The element behaves like a block element and lays out its content according to the grid model. |
.ion-display-inline-grid | display: inline-grid | The element behaves like an inline element and lays out its content according to the grid model. |
.ion-display-table | display: table | The element behaves like an HTML <table> element. It defines a block-level box. |
.ion-display-table-cell | display: table-cell | The element behaves like an HTML <td> element. |
.ion-display-table-row | display: table-row | The element behaves like an HTML <tr> element. |
Responsive Display Classes
All of the display classes listed above have additional classes to modify the display based on the screen size. Instead of display-
in each class, use display-{breakpoint}-
to only use the class on specific screen sizes, where {breakpoint}
is one of the breakpoint names listed in Ionic Breakpoints.
The table below shows the default behavior, where {modifier}
is any of the following: none
, inline
, inline-block
, block
, flex
, inline-flex
, grid
, inline-grid
, table
, table-cell
, table-row
, as they are described above.
Class | Description |
---|---|
.ion-display-{modifier} | Applies the modifier to the element on all screen sizes. |
.ion-display-sm-{modifier} | Applies the modifier to the element when min-width: 576px . |
.ion-display-md-{modifier} | Applies the modifier to the element when min-width: 768px . |
.ion-display-lg-{modifier} | Applies the modifier to the element when min-width: 992px . |
.ion-display-xl-{modifier} | Applies the modifier to the element when min-width: 1200px . |
Deprecated Classes
The following classes are deprecated and will be removed in the next major release. Use the recommended .ion-display-*
classes instead.
Class | Description |
---|---|
.ion-hide | Applies display: none to the element on all screen sizes. Deprecated — Use the ion-display-none class instead. |
.ion-hide-sm-{dir} | Applies the modifier to the element when min-width: 576px (up ) or max-width: 576px (down ). Deprecated — Use the ion-display-sm-{modifier} classes instead. |
.ion-hide-md-{dir} | Applies the modifier to the element when min-width: 768px (up ) or max-width: 768px (down ). Deprecated — Use the ion-display-md-{modifier} classes instead. |
.ion-hide-lg-{dir} | Applies the modifier to the element when min-width: 992px (up ) or max-width: 992px (down ). Deprecated — Use the ion-display-lg-{modifier} classes instead. |
.ion-hide-xl-{dir} | Applies the modifier to the element when min-width: 1200px (up ) or max-width: 1200px (down ). Deprecated — Use the ion-display-xl-{modifier} classes instead. |