Build a real Photo Gallery app with Ionic Angular and native device features.
+Ionic Angularとネイティブデバイス機能を使用して実際のPhoto Galleryアプリを構築します。
Learn more about Angular's core concepts, tools, and best practices from the official Angular documentation.
+公式Angularドキュメントから、Angularのコアコンセプト、ツール、ベストプラクティスについて詳しく学びます。
Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.
+Angular Routerを使用してIonic Angularアプリでルーティングとナビゲーションを処理する方法を発見します。
Explore Ionic's rich library of UI components for building beautiful apps.
+美しいアプリを構築するためのIonicの豊富なUIコンポーネントライブラリを探索します。
Learn how to customize the look and feel of your app with Ionic's powerful theming system.
+Ionicの強力なテーマ設定システムを使用してアプリの外観と操作性をカスタマイズする方法を学びます。
Explore how to access native device features and deploy your app to iOS, Android, and the web with Capacitor.
++ Capacitorを使用してネイティブデバイス機能にアクセスし、アプリをiOS、Android、Webにデプロイする方法を探索します。 +
Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information.
+アコーディオンは、情報を整理・グループ化する方法を提供しながら、垂直方向のスペースを減らすために、コンテンツに折りたたみ可能なセクションを提供します。
Action Sheets display a set of options with the ability to confirm or cancel an action.
+アクションシートは、アクションを確認またはキャンセルする機能とともに、一連のオプションを表示します。
Breadcrumbs are navigation items that are used to indicate where a user is on an app.
+Breadcrumbsは、ユーザーがアプリ内のどこにいるかを示すために使用されるナビゲーションアイテムです。
- Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more. -
+カードは重要なコンテンツを表示する優れた方法であり、画像、ボタン、テキストなどを含めることができます。
チップはデータやアクションを表示するためのコンパクトな方法です。
+Chipはデータやアクションを表示するためのコンパクトな方法です。
コンテンツは、アプリと対話してアプリをナビゲートするための典型的な方法です。
+Contentは、アプリと対話してアプリをナビゲートするための典型的な方法です。
Date & time pickers are used to present an interface that makes it easy for users to select dates and times.
+Date & Timeピッカーは、ユーザーが日付と時刻を簡単に選択できるインターフェースを提供するために使用されます。
Beautifully designed icons for use in web, iOS, and Android apps.
+Web、iOS、Androidアプリで使用するために美しくデザインされたアイコン。
Inputs provides a way for users to enter data in your app.
+Inputは、ユーザーがアプリにデータを入力する方法を提供します。
- Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. - Items can be swiped, deleted, reordered, edited, and more. + Itemは、テキスト、アイコン、アバター、画像、入力、およびその他のネイティブまたはカスタム要素を含むことができる要素です。 + Itemは、スワイプ、削除、並び替え、編集などが可能です。
- A collection of media components, including avatars, icons, images, and thumbnails, designed to enhance visual - content. + アバター、アイコン、画像、サムネイルを含むメディアコンポーネントのコレクションで、視覚的なコンテンツを強化するように設計されています。
Navigation is how users move between different pages in your app.
+Navigationは、ユーザーがアプリ内の異なるページ間を移動する方法です。
Range sliders let users select a value by dragging a knob along a track.
+Rangeスライダーは、ユーザーがトラックに沿ってノブをドラッグして値を選択できるようにします。
Refresher provides pull-to-refresh functionality on a content component.
+Refresherは、コンテンツコンポーネントにプルツーリフレッシュ機能を提供します。
Searchbar is used to search or filter items, usually from a toolbar.
+検索バーは、通常ツールバーから、アイテムを検索またはフィルタリングするために使用されます。
Toasts are subtle notifications that appear over your app's content without interrupting user interaction.
+Toastは、ユーザーの操作を中断することなく、アプリのコンテンツの上に表示される控えめな通知です。
Toolbars are used to house information and actions relating to your app.
+Toolbarは、アプリに関連する情報とアクションを配置するために使用されます。
Text is used to style or change the color of text within an application.
+Typographyは、アプリケーション内のテキストのスタイルを設定したり、色を変更したりするために使用されます。
.default})
-To improve this experience, we can wrap the items in a [Grid](../api/grid.md) component. The view can be easily rewritten into something more usable on larger screens:
+このエクスペリエンスを改善するために、アイテムを[Grid](../api/grid.md)コンポーネントで囲むことができます。ビューは、大きな画面でより使いやすくなるように簡単に書き直すことができます：
```html
Learn the fundamentals you need to know to start building Android apps with Ionic Framework and Capacitor.
+Ionic FrameworkとCapacitorを使用してAndroidアプリの構築を開始するために知っておく必要がある基本を学びます。
Learn the fundamentals you need to know to start building Android apps with Ionic Framework and Cordova.
+Ionic FrameworkとCordovaを使用してAndroidアプリの構築を開始するために知っておく必要がある基本を学びます。
Learn the fundamentals you need to know to start building iOS apps with Ionic Framework and Capacitor.
+Ionic FrameworkとCapacitorを使用してiOSアプリの構築を開始するために知っておく必要がある基本を学びます。
Learn the fundamentals you need to know to start building iOS apps with Ionic Framework and Cordova.
+Ionic FrameworkとCordovaを使用してiOSアプリの構築を開始するために知っておく必要がある基本を学びます。
あなたのシステムの設定方法とフレームワークのインストールガイド。
Ionic CLIを使用して新しいIonic Angularアプリを作成します。
+既存のAngularプロジェクトにIonic Angularを追加します。
+Ionic CLIを使用して新しいIonic Reactアプリを作成します。
+既存のReactプロジェクトにIonic Reactを追加します。
+Ionic CLIを使用して新しいIonic Vueアプリを作成します。
+既存のVueプロジェクトにIonic Vueを追加します。
+Viteを使用して新しいIonic JavaScriptアプリを作成します。
+Quickly set up your first Ionic JavaScript app and learn the basics of the framework and CLI.
++ Learn more about JavaScript's core concepts, tools, and best practices from the official JavaScript documentation. +
+Discover how to handle routing and navigation in Ionic JavaScript apps using the Ionic Router.
+Explore Ionic's rich library of UI components for building beautiful apps.
+Learn how to customize the look and feel of your app with Ionic's powerful theming system.
+Explore how to access native device features and deploy your app to iOS, Android, and the web with Capacitor.
+` with Ionic's routing and layout components. The router outlet is where your pages will be displayed.
+
+## View Routes
+
+Routes are defined in the `index.html` using `ion-route` components inside the `ion-router`:
+
+```html title="index.html"
+
+
+```
+
+When you visit the root URL (`/`), the `home-page` component will be loaded. When you visit the `/new` URL, the `new-page` component will be loaded. We will define these components next.
+
+## Add the Home Page
+
+Create a new directory called `pages` inside the `src` folder, then add a file called `HomePage.js` in that directory with the following content:
+
+```js title="src/pages/HomePage.js"
+class HomePage extends HTMLElement {
+ connectedCallback() {
+ this.innerHTML = `
+
+
+ Blank
+
+
+
+
+ `;
+ }
+}
+
+customElements.define('home-page', HomePage);
+```
+
+This creates a custom element called `home-page` that contains the layout for your Home page. The page uses Ionic's layout components to create a header with a toolbar and scrollable content area.
+
+:::tip Learn More
+For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation.
+:::
+
+Next, add a `
+
+
+```
+
+At this point your browser should be displaying the Home page.
+
+
+
+## Add an Ionic Component
+
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) to navigate to another page. Update the `HomePage` component in `HomePage.js`:
+
+```js title="src/pages/HomePage.js"
+class HomePage extends HTMLElement {
+ connectedCallback() {
+ this.innerHTML = `
+
+
+ Blank
+
+
+
+ Navigate
+
+ `;
+ }
+}
+
+customElements.define('home-page', HomePage);
+```
+
+## Add a New Page
+
+Add a new file named `NewPage.js` to `src/pages` with the following content:
+
+```js title="src/pages/NewPage.js"
+class NewPage extends HTMLElement {
+ connectedCallback() {
+ this.innerHTML = `
+
+
+
+
+ New
+
+
+
+
+ `;
+ }
+}
+
+customElements.define('new-page', NewPage);
+```
+
+This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+
+Next, update the `
+```
+
+## Navigate to the New Page
+
+To navigate to the new page, update the button in `HomePage.js` to be inside of an `ion-router-link`:
+
+```html title="src/pages/HomePage.js"
+
+ Navigate
+
+```
+
+When the button is clicked, Ionic's router will automatically navigate to the `/new` route and display the `new-page` component.
+
+:::info
+Navigating can also be performed programmatically using `document.querySelector('ion-router').push('/new')`. See the [Ionic Router documentation](/docs/api/router.md) for more information.
+:::
+
+## Add Icons to the New Page
+
+Ionic JavaScript comes with [Ionicons](https://ionic.io/ionicons/) support. To use icons, you need to import them, register them with `addIcons`, and then use them with the `ion-icon` component.
+
+Add the necessary imports and register the icons in `main.js`:
+
+```js title="src/main.js"
+// ...Ionic initialization
+
+// Icon imports
+import { addIcons } from 'ionicons';
+import { heart, logoIonic } from 'ionicons/icons';
+
+addIcons({ heart, logoIonic });
+
+// ...CSS imports
+```
+
+Next, update `NewPage.js` to include the icons:
+
+```js title="src/pages/NewPage.js"
+class NewPage extends HTMLElement {
+ connectedCallback() {
+ this.innerHTML = `
+
+
+
+
+ New
+
+
+
+
+ `;
+ }
+}
+
+customElements.define('new-page', NewPage);
+```
+
+For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/).
+
+## Call Component Methods
+
+Let's add a button that can scroll the content area to the bottom. Update `NewPage.js` to include scrollable content and a scroll button:
+
+```js title="src/pages/NewPage.js"
+class NewPage extends HTMLElement {
+ connectedCallback() {
+ this.innerHTML = `
+
+
+
+
+ New
+
+
+
+ Scroll to Bottom
+
+
+
+
+ `;
+
+ // Generate items and add scroll functionality after the element is connected
+ this.setupScrolling();
+ }
+
+ setupScrolling() {
+ // Wait for ion-content to be ready
+ customElements.whenDefined('ion-content').then(() => {
+ // Generate items
+ const itemList = this.querySelector('#item-list');
+ for (let i = 1; i <= 50; i++) {
+ const item = document.createElement('ion-item');
+ const label = document.createElement('ion-label');
+ label.textContent = `Item ${i}`;
+ item.appendChild(label);
+ itemList.appendChild(item);
+ }
+
+ // Add scroll functionality
+ const scrollBtn = this.querySelector('#scroll-btn');
+ const content = this.querySelector('ion-content');
+
+ if (scrollBtn && content) {
+ scrollBtn.addEventListener('click', () => {
+ content.scrollToBottom(300);
+ });
+ }
+ });
+ }
+}
+
+customElements.define('new-page', NewPage);
+```
+
+To call methods on Ionic components:
+
+1. Get a reference to the component element using `querySelector`
+2. Call the method directly on the element
+
+You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation.
+
+## Run on a Device
+
+Ionic's components work everywhere: on iOS, Android, and PWAs. To deploy to mobile, use [Capacitor](https://capacitorjs.com):
+
+```shell
+npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android
+npx cap init
+
+npm run build
+
+npx cap add ios
+npx cap add android
+```
+
+Open the native projects in their IDEs:
+
+```shell
+npx cap open ios
+npx cap open android
+```
+
+See [Capacitor's Getting Started guide](https://capacitorjs.com/docs/getting-started/with-ionic) for more.
+
+## Framework Integrations
+
+Ionic Core also works with other frameworks and libraries that support custom elements, such as [Alpine.js](https://alpinejs.dev/), [Lit](https://lit.dev/), and [Svelte](https://svelte.dev/). However, when using Ionic Core with these libraries, you won't have the built-in form and routing capabilities that are tightly coupled with Ionic's official Angular, React, and Vue framework integrations, and will need to use their respective routing and form solutions instead.
+
+## Explore More
+
+This guide covered the basics of creating an Ionic JavaScript app with Vite, adding navigation, and introducing Capacitor for native builds. To dive deeper, check out:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/layout/css-utilities.md b/docs/layout/css-utilities.md
index df0d71d3097..6a6948a08aa 100644
--- a/docs/layout/css-utilities.md
+++ b/docs/layout/css-utilities.md
@@ -6,14 +6,14 @@ title: CSSユーティリティ
CSSユーティリティ: Classes for Text/Element Alignment or Modification
Ionic Framework は、テキストの順番を入れ替えたり、要素の配置や padding や margin を修正する一連のユーティリティ属性を提供します。これは要素で使うことができます。
:::important
-If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.md#optional) will need to be included in order for these styles to work.
+利用可能な Ionic Framework スターターを使用してアプリを開始しなかった場合、これらのスタイルを機能させるには、[グローバルスタイルシートのオプションセクション](global-stylesheets.md#optional)にリストされているスタイルシートを含める必要があります。
:::
## テキストの修正
@@ -65,16 +65,16 @@ If your app was not started using an available Ionic Framework starter, the styl
```
-| 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. |
+| Class | Style Rule | 説明 |
+| ------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.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`と同様に空白を折りたたみますが、テキスト内の改行（テキストの折り返し）を抑制します。 |
### Text Transform
@@ -103,11 +103,11 @@ If your app was not started using an available Ionic Framework starter, the styl
```
-| 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. |
+| Class | Style Rule | 説明 |
+| ---------------------- | ---------------------------- | ---------------------------------------- |
+| `.ion-text-uppercase` | `text-transform: uppercase` | すべての文字を大文字に変換します。 |
+| `.ion-text-lowercase` | `text-transform: lowercase` | すべての文字を小文字に変換します。 |
+| `.ion-text-capitalize` | `text-transform: capitalize` | 各単語の最初の文字を大文字に変換します。 |
### Responsive Text Classes
@@ -115,19 +115,19 @@ If your app was not started using an available Ionic Framework starter, the styl
以下の表は、 `{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`. |
+| 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
-The [float](https://developer.mozilla.org/en-US/docs/Web/CSS/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.
+[float](https://developer.mozilla.org/en-US/docs/Web/CSS/float) CSS プロパティは、要素をコンテナの左側または右側に配置する必要があることを指定します。テキストとインライン要素はその周りに折り返されます。この方法により、要素は Web ページの通常のフローから取り出されますが、絶対配置とは異なり、フローの一部として残ります。
```html
@@ -165,12 +165,12 @@ The [float](https://developer.mozilla.org/en-US/docs/Web/CSS/float) CSS property
```
-| 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. |
+| Class | Style Rule | 説明 |
+| ------------------ | ------------------------------ | ------------------------------------------------------------------------------------------- |
+| `.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 クラス
@@ -178,65 +178,65 @@ The [float](https://developer.mozilla.org/en-US/docs/Web/CSS/float) CSS property
次の表に、デフォルトの動作を示します。 `{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`. |
+| 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
-The [display](https://developer.mozilla.org/en-US/docs/Web/CSS/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.
+[display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) CSS プロパティは、要素をブロックまたはインラインボックスとして扱うかどうか、およびその子に使用されるレイアウト（フローレイアウト、グリッド、flex など）を設定します。レイアウトから要素を完全に非表示にするためにも使用できます。
-Ionic provides the following utility classes for `display`:
+Ionic は`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 `` element. It defines a block-level box. |
-| `.ion-display-table-cell` | `display: table-cell` | The element behaves like an HTML `
+ Ready to create an app?
+
+ + Start with Ionic + UI Components +
+
+ Ready to create an app?
+
+
+ + Start with Ionic + UI Components +
+Welcome to the new page!
+Welcome to the new page!
+ +Welcome to the new page!
+ +Learn advanced Vite configuration and optimization techniques for Ionic JavaScript apps.
+Learn more about JavaScript's core concepts, tools, and best practices from MDN Web Docs.
+Discover how to handle routing and navigation in Ionic JavaScript apps using the Ionic Router.
+Explore Ionic's rich library of UI components for building beautiful apps.
+Learn how to customize the look and feel of your app with Ionic's powerful theming system.
+Explore how to access native device features and deploy your app to iOS, Android, and the web with Capacitor.
+| ` element. | -| `.ion-display-table-row` | `display: table-row` | The element behaves like an HTML ` |
| `要素のように動作します。 | +| `.ion-display-table-row` | `display: table-row` | 要素は HTML の` |
.default})
### Align Items
-The [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) CSS property sets the [align-self](#align-self) value on all direct children as a group. In flexbox, it controls the alignment of items on the cross axis. In grid layout, it controls the alignment of items on the block axis within their grid areas.
+[align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) CSS プロパティは、すべての直接の子要素をグループとして[align-self](#align-self)値を設定します。flexbox では、交差軸上のアイテムの配置を制御します。グリッドレイアウトでは、グリッド領域内のブロック軸上のアイテムの配置を制御します。
.default})
-Ionic provides the following utility classes for `align-items`:
+Ionic は`align-items`用に以下のユーティリティクラスを提供します：
-| Class | Style Rule | Description |
-| --------------------------- | ------------------------- | ---------------------------------------------------- |
-| `.ion-align-items-start` | `align-items: flex-start` | Items are packed toward the start on the cross axis. |
-| `.ion-align-items-end` | `align-items: flex-end` | Items are packed toward the end on the cross axis. |
-| `.ion-align-items-center` | `align-items: center` | Items are centered along the cross axis. |
-| `.ion-align-items-baseline` | `align-items: baseline` | Items are aligned so that their baselines align. |
-| `.ion-align-items-stretch` | `align-items: stretch` | Items are stretched to fill the container. |
+| Class | Style Rule | 説明 |
+| --------------------------- | ------------------------- | ------------------------------------------------ |
+| `.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` | アイテムはコンテナを埋めるように伸ばされます。 |
### Align Content
-The [align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) CSS property sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.
+[align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) CSS プロパティは、flexbox の交差軸、またはグリッドまたはブロックレベル要素のブロック軸に沿って、コンテンツアイテム間および周囲のスペースの分布を設定します。
-This property has no effect on single line flex containers (i.e., ones with `flex-wrap: nowrap`).
+このプロパティは、単一行の flex コンテナ（つまり、`flex-wrap: nowrap`を持つもの）には影響しません。
.default})
-Ionic provides the following utility classes for `align-content`:
+Ionic は`align-content`用に以下のユーティリティクラスを提供します：
-| Class | Style Rule | Description |
-| ---------------------------- | ------------------------------ | ---------------------------------------------------------- |
-| `.ion-align-content-start` | `align-content: flex-start` | Lines are packed toward the start of the cross axis. |
-| `.ion-align-content-end` | `align-content: flex-end` | Lines are packed toward the end of the cross axis. |
-| `.ion-align-content-center` | `align-content: center` | Lines are centered along the cross axis. |
-| `.ion-align-content-stretch` | `align-content: stretch` | Lines are stretched to fill the container. |
-| `.ion-align-content-between` | `align-content: space-between` | Lines are evenly distributed on the cross axis. |
-| `.ion-align-content-around` | `align-content: space-around` | Lines are evenly distributed with equal space around them. |
+| Class | Style Rule | 説明 |
+| ---------------------------- | ------------------------------ | ---------------------------------------------------- |
+| `.ion-align-content-start` | `align-content: flex-start` | 行は交差軸の開始側に詰められます。 |
+| `.ion-align-content-end` | `align-content: flex-end` | 行は交差軸の終了側に詰められます。 |
+| `.ion-align-content-center` | `align-content: center` | 行は交差軸に沿って中央揃えされます。 |
+| `.ion-align-content-stretch` | `align-content: stretch` | 行はコンテナを埋めるように伸ばされます。 |
+| `.ion-align-content-between` | `align-content: space-between` | 行は交差軸上で均等に配置されます。 |
+| `.ion-align-content-around` | `align-content: space-around` | 行は周囲に等しいスペースを持って均等に配置されます。 |
### Justify Content
-The [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) CSS property defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of grid and multi-column containers.
+[justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) CSS プロパティは、ブラウザが flex コンテナの主軸、およびグリッドとマルチカラムコンテナのインライン軸に沿って、コンテンツアイテム間および周囲のスペースをどのように分配するかを定義します。
.default})
-Ionic provides the following utility classes for `justify-content`:
+Ionic は`justify-content`用に以下のユーティリティクラスを提供します：
-| Class | Style Rule | Description |
-| ------------------------------ | -------------------------------- | --------------------------------------------------------------------------- |
-| `.ion-justify-content-start` | `justify-content: flex-start` | Items are packed toward the start on the main axis. |
-| `.ion-justify-content-end` | `justify-content: flex-end` | Items are packed toward the end on the main axis. |
-| `.ion-justify-content-center` | `justify-content: center` | Items are centered along the main axis. |
-| `.ion-justify-content-around` | `justify-content: space-around` | Items are evenly distributed on the main axis with equal space around them. |
-| `.ion-justify-content-between` | `justify-content: space-between` | Items are evenly distributed on the main axis. |
-| `.ion-justify-content-evenly` | `justify-content: space-evenly` | Items are distributed so that the spacing between any two items is equal. |
+| Class | Style Rule | 説明 |
+| ------------------------------ | -------------------------------- | ----------------------------------------------------------------------------- |
+| `.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 つのアイテム間のスペースが等しくなるように配置されます。 |
### Flex Direction
-The [flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
+[flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) CSS プロパティは、flex アイテムが flex コンテナ内にどのように配置されるかを設定し、主軸と方向（通常または逆）を定義します。
.default})
-Ionic provides the following utility classes for `flex-direction`:
+Ionic は`flex-direction`用に以下のユーティリティクラスを提供します：
-| Class | Style Rule | Description |
-| -------------------------- | -------------------------------- | ----------------------------------------------------------------- |
-| `.ion-flex-row` | `flex-direction: row` | Items are placed in the same direction as the text direction. |
-| `.ion-flex-row-reverse` | `flex-direction: row-reverse` | Items are placed in the opposite direction as the text direction. |
-| `.ion-flex-column` | `flex-direction: column` | Items are placed vertically. |
-| `.ion-flex-column-reverse` | `flex-direction: column-reverse` | Items are placed vertically in reverse order. |
+| Class | Style Rule | 説明 |
+| -------------------------- | -------------------------------- | -------------------------------------------------- |
+| `.ion-flex-row` | `flex-direction: row` | アイテムはテキストの方向と同じ方向に配置されます。 |
+| `.ion-flex-row-reverse` | `flex-direction: row-reverse` | アイテムはテキストの方向と逆の方向に配置されます。 |
+| `.ion-flex-column` | `flex-direction: column` | アイテムは垂直に配置されます。 |
+| `.ion-flex-column-reverse` | `flex-direction: column-reverse` | アイテムは逆順で垂直に配置されます。 |
### Flex Wrap
-The [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
+[flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) CSS プロパティは、flex アイテムが 1 行に強制されるか、複数行に折り返すことができるかを設定します。折り返しが許可されている場合、行が積み重ねられる方向を設定します。
.default})
-Ionic provides the following utility classes for `flex-wrap`:
+Ionic は`flex-wrap`用に以下のユーティリティクラスを提供します：
-| Class | Style Rule | Description |
-| ------------------------ | ------------------------- | -------------------------------------------------------- |
-| `.ion-flex-nowrap` | `flex-wrap: nowrap` | Items will all be on one line. |
-| `.ion-flex-wrap` | `flex-wrap: wrap` | Items will wrap onto multiple lines, from top to bottom. |
-| `.ion-flex-wrap-reverse` | `flex-wrap: wrap-reverse` | Items will wrap onto multiple lines, from bottom to top. |
+| Class | Style Rule | 説明 |
+| ------------------------ | ------------------------- | ------------------------------------------------------ |
+| `.ion-flex-nowrap` | `flex-wrap: nowrap` | すべてのアイテムが 1 行になります。 |
+| `.ion-flex-wrap` | `flex-wrap: wrap` | アイテムは複数行に折り返され、上から下へ配置されます。 |
+| `.ion-flex-wrap-reverse` | `flex-wrap: wrap-reverse` | アイテムは複数行に折り返され、下から上へ配置されます。 |
-### Responsive Flex Container Classes
+### レスポンシブ Flex コンテナクラス
-All of the flex container classes listed above have additional classes to modify the properties based on the screen size. Instead of the base class name, use `{property}-{breakpoint}-{modifier}` to only use the class on specific screen sizes, where `{breakpoint}` is one of the breakpoint names listed in [Ionic Breakpoints](#ionic-breakpoints).
+上記のすべての flex コンテナクラスには、画面サイズに基づいてプロパティを変更する追加のクラスがあります。基本クラス名の代わりに、`{property}-{breakpoint}-{modifier}`を使用して、特定の画面サイズでのみクラスを使用します。`{breakpoint}`は[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の 1 つです。
-The table below shows the default behavior, where `{property}` is one of the following: `justify-content`, `align-content`, `align-items`, `flex`, or `flex-wrap`, and `{modifier}` is the corresponding value as described above.
+以下の表は、デフォルトの動作を示しています。`{property}`は次のいずれかです：`justify-content`、`align-content`、`align-items`、`flex`、または`flex-wrap`。`{modifier}`は上記で説明されている対応する値です。
| Class | Description |
| ------------------------------- | ------------------------------------------------------------- |
@@ -441,127 +441,127 @@ The table below shows the default behavior, where `{property}` is one of the fol
| `.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`. |
-### Deprecated Classes
+### 非推奨クラス
-:::warning Deprecation Notice
+:::warning 非推奨通知
-The following classes are deprecated and will be removed in the next major release. Use the recommended `.ion-flex-*` classes instead.
+以下のクラスは非推奨であり、次のメジャーリリースで削除されます。代わりに推奨される`.ion-flex-*`クラスを使用してください。
:::
-| Class | Description |
-| ------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| `.ion-nowrap` | Items will all be on one line..default})
-Ionic provides the following utility classes for `align-self`:
+Ionic は`align-self`用に以下のユーティリティクラスを提供します：
-| Class | Style Rule | Description |
-| -------------------------- | ------------------------ | ---------------------------------------------------------------------- |
-| `.ion-align-self-start` | `align-self: flex-start` | Item is packed toward the start on the cross axis. |
-| `.ion-align-self-end` | `align-self: flex-end` | Item is packed toward the end on the cross axis. |
-| `.ion-align-self-center` | `align-self: center` | Item is centered along the cross axis. |
-| `.ion-align-self-baseline` | `align-self: baseline` | Item is aligned so that its baseline aligns with other item baselines. |
-| `.ion-align-self-stretch` | `align-self: stretch` | Item is stretched to fill the container. |
-| `.ion-align-self-auto` | `align-self: auto` | Item is positioned according to the parent's `align-items` value. |
+| Class | Style Rule | 説明 |
+| -------------------------- | ------------------------ | ---------------------------------------------------------------------------------- |
+| `.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`値に従って配置されます。 |
### Flex
-The [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) CSS property is a shorthand property for `flex-grow`, `flex-shrink` and `flex-basis`. It sets how a flex item will grow or shrink to fit the space available in its flex container.
+[flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) CSS プロパティは、`flex-grow`、`flex-shrink`、`flex-basis`の短縮プロパティです。flex アイテムが flex コンテナ内で利用可能なスペースに合わせてどのように拡大または縮小するかを設定します。
.default})
-Ionic provides the following utility classes for `flex`:
+Ionic は`flex`用に以下のユーティリティクラスを提供します：
-| Class | Style Rule | Description |
-| ------------------- | --------------- | ----------------------------------------------------------- |
-| `.ion-flex-1` | `flex: 1` | Item grows and shrinks equally with other flex items. |
-| `.ion-flex-auto` | `flex: auto` | Item grows and shrinks based on its content size. |
-| `.ion-flex-initial` | `flex: initial` | Item shrinks to its minimum content size but does not grow. |
-| `.ion-flex-none` | `flex: none` | Item does not grow or shrink. |
+| Class | Style Rule | 説明 |
+| ------------------- | --------------- | -------------------------------------------------------------- |
+| `.ion-flex-1` | `flex: 1` | アイテムは他の flex アイテムと等しく拡大および縮小します。 |
+| `.ion-flex-auto` | `flex: auto` | アイテムはそのコンテンツサイズに基づいて拡大および縮小します。 |
+| `.ion-flex-initial` | `flex: initial` | アイテムは最小コンテンツサイズまで縮小しますが、拡大しません。 |
+| `.ion-flex-none` | `flex: none` | アイテムは拡大も縮小もしません。 |
### Flex Grow
-The [flex-grow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) CSS property sets the flex grow factor, which specifies how much of the flex container's positive free space, if any, should be assigned to the flex item's main size.
+[flex-grow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) CSS プロパティは、flex 拡大係数を設定します。これは、flex コンテナの正の自由スペース（存在する場合）のうち、flex アイテムの主サイズに割り当てるべき量を指定します。
.default})
-Ionic provides the following utility classes for `flex-grow`:
+Ionic は`flex-grow`用に以下のユーティリティクラスを提供します：
-| Class | Style Rule | Description |
-| ------------------ | -------------- | -------------------------------------------------- |
-| `.ion-flex-grow-0` | `flex-grow: 0` | Item does not grow beyond its content size. |
-| `.ion-flex-grow-1` | `flex-grow: 1` | Item grows to fill available space proportionally. |
+| Class | Style Rule | 説明 |
+| ------------------ | -------------- | -------------------------------------------------------------- |
+| `.ion-flex-grow-0` | `flex-grow: 0` | アイテムはコンテンツサイズを超えて拡大しません。 |
+| `.ion-flex-grow-1` | `flex-grow: 1` | アイテムは利用可能なスペースを比例して埋めるように拡大します。 |
### Flex Shrink
-The [flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, the flex items can shrink to fit according to their `flex-shrink` value. Each flex line's negative free space is distributed between the line's flex items that have a `flex-shrink` value greater than `0`.
+[flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) CSS プロパティは、flex アイテムの flex 縮小係数を設定します。すべての flex アイテムのサイズが flex コンテナより大きい場合、flex アイテムは`flex-shrink`値に従って縮小して収まります。各 flex 行の負の自由スペースは、`flex-shrink`値が`0`より大きい行の flex アイテム間で分配されます。
.default})
-Ionic provides the following utility classes for `flex-shrink`:
+Ionic は`flex-shrink`用に以下のユーティリティクラスを提供します：
-| Class | Style Rule | Description |
+| Class | Style Rule | 説明 |
| -------------------- | ---------------- | -------------------------------------------------------- |
-| `.ion-flex-shrink-0` | `flex-shrink: 0` | Item does not shrink below its content size. |
-| `.ion-flex-shrink-1` | `flex-shrink: 1` | Item shrinks proportionally when container is too small. |
+| `.ion-flex-shrink-0` | `flex-shrink: 0` | アイテムはコンテンツサイズを下回って縮小しません。 |
+| `.ion-flex-shrink-1` | `flex-shrink: 1` | コンテナが小さすぎる場合、アイテムは比例して縮小します。 |
### Order
-The [order](https://developer.mozilla.org/en-US/docs/Web/CSS/order) CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending `order` value and then by their source code order. Items not given an explicit `order` value are assigned the default value of `0`.
+[order](https://developer.mozilla.org/en-US/docs/Web/CSS/order) CSS プロパティは、flex またはグリッドコンテナ内でアイテムをレイアウトする順序を設定します。コンテナ内のアイテムは、昇順の`order`値で並べ替えられ、次にソースコードの順序で並べ替えられます。明示的な`order`値が指定されていないアイテムには、デフォルト値`0`が割り当てられます。
.default})
-Ionic provides the following utility classes for `order`:
+Ionic は`order`用に以下のユーティリティクラスを提供します：
-| Class | Style Rule | Description |
-| ------------------ | ----------- | ----------------------------------------- |
-| `.ion-order-first` | `order: -1` | Item appears first in the flex container. |
-| `.ion-order-0` | `order: 0` | Item appears in its natural order. |
-| `.ion-order-1` | `order: 1` | Item appears after items with order 0. |
-| `.ion-order-2` | `order: 2` | Item appears after items with order 1. |
-| `.ion-order-3` | `order: 3` | Item appears after items with order 2. |
-| `.ion-order-4` | `order: 4` | Item appears after items with order 3. |
-| `.ion-order-5` | `order: 5` | Item appears after items with order 4. |
-| `.ion-order-6` | `order: 6` | Item appears after items with order 5. |
-| `.ion-order-7` | `order: 7` | Item appears after items with order 6. |
-| `.ion-order-8` | `order: 8` | Item appears after items with order 7. |
-| `.ion-order-9` | `order: 9` | Item appears after items with order 8. |
-| `.ion-order-10` | `order: 10` | Item appears after items with order 9. |
-| `.ion-order-11` | `order: 11` | Item appears after items with order 10. |
-| `.ion-order-12` | `order: 12` | Item appears after items with order 11. |
-| `.ion-order-last` | `order: 13` | Item appears last in the flex container. |
+| Class | Style Rule | 説明 |
+| ------------------ | ----------- | -------------------------------------------------- |
+| `.ion-order-first` | `order: -1` | アイテムは flex コンテナの最初に表示されます。 |
+| `.ion-order-0` | `order: 0` | アイテムは自然な順序で表示されます。 |
+| `.ion-order-1` | `order: 1` | アイテムは order 0 のアイテムの後に表示されます。 |
+| `.ion-order-2` | `order: 2` | アイテムは order 1 のアイテムの後に表示されます。 |
+| `.ion-order-3` | `order: 3` | アイテムは order 2 のアイテムの後に表示されます。 |
+| `.ion-order-4` | `order: 4` | アイテムは order 3 のアイテムの後に表示されます。 |
+| `.ion-order-5` | `order: 5` | アイテムは order 4 のアイテムの後に表示されます。 |
+| `.ion-order-6` | `order: 6` | アイテムは order 5 のアイテムの後に表示されます。 |
+| `.ion-order-7` | `order: 7` | アイテムは order 6 のアイテムの後に表示されます。 |
+| `.ion-order-8` | `order: 8` | アイテムは order 7 のアイテムの後に表示されます。 |
+| `.ion-order-9` | `order: 9` | アイテムは order 8 のアイテムの後に表示されます。 |
+| `.ion-order-10` | `order: 10` | アイテムは order 9 のアイテムの後に表示されます。 |
+| `.ion-order-11` | `order: 11` | アイテムは order 10 のアイテムの後に表示されます。 |
+| `.ion-order-12` | `order: 12` | アイテムは order 11 のアイテムの後に表示されます。 |
+| `.ion-order-last` | `order: 13` | アイテムは flex コンテナの最後に表示されます。 |
-### Responsive Flex Item Classes
+### レスポンシブ Flex アイテムクラス
-All of the flex item classes listed above have additional classes to modify the properties based on the screen size. Instead of the base class name, use `{property}-{breakpoint}-{modifier}` to only use the class on specific screen sizes, where `{breakpoint}` is one of the breakpoint names listed in [Ionic Breakpoints](#ionic-breakpoints).
+上記のすべての flex アイテムクラスには、画面サイズに基づいてプロパティを変更する追加のクラスがあります。基本クラス名の代わりに、`{property}-{breakpoint}-{modifier}`を使用して、特定の画面サイズでのみクラスを使用します。`{breakpoint}`は[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の 1 つです。
-The table below shows the default behavior, where `{property}` is one of the following: `align-self`, `flex`, `flex-grow`, `flex-shrink`, or `order`, and `{modifier}` is the corresponding value as described above.
+以下の表は、デフォルトの動作を示しています。`{property}`は次のいずれかです：`align-self`、`flex`、`flex-grow`、`flex-shrink`、または`order`。`{modifier}`は上記で説明されている対応する値です。
-| Class | Description |
-| ------------------------------- | ------------------------------------------------------------- |
-| `.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`. |
+| 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`のときに要素に修飾子を適用します。 |
-## Border Display
+## ボーダー表示
-The `.ion-no-border` utility class can be used to remove borders from Ionic components. This class can be applied to the `ion-header` and `ion-footer` components.
+`.ion-no-border`ユーティリティクラスは、Ionic コンポーネントからボーダーを削除するために使用できます。このクラスは`ion-header`と`ion-footer`コンポーネントに適用できます。
```html
.default})
| .default})
|
-To accommodate this, Ionic automatically adds padding to certain components. For example, the first `ion-toolbar` component placed in an `ion-modal` will receive padding according to the top edge of the device's safe area. This avoids the device's notch covering up the header text.
+これに対応するため、Ionic は特定のコンポーネントに自動的にパディングを追加します。たとえば、`ion-modal`内に配置された最初の`ion-toolbar`コンポーネントは、デバイスのセーフエリアの上端に応じてパディングを受け取ります。これにより、デバイスのノッチがヘッダーテキストを覆うことを防ぎます。
.default})
-This padding can be manually adjusted through CSS using the `--ion-safe-area-(dir)` variables described in [Application Variables](#application-variables). Values can be set for the whole application, or on a per component basis. For example:
+このパディングは、[アプリケーション変数](#application-variables)で説明されている`--ion-safe-area-(dir)`変数を使用して CSS で手動で調整できます。値はアプリケーション全体、またはコンポーネントごとに設定できます。例：
```css
html {
diff --git a/docs/theming/basics.md b/docs/theming/basics.md
index cac6f1a4b55..cfdcb522ea9 100644
--- a/docs/theming/basics.md
+++ b/docs/theming/basics.md
@@ -9,7 +9,7 @@ import ColorAccordion from '@components/page/theming/ColorAccordion';