🔥 新しいプロジェクトのご紹介 t0ggles - 究極のプロジェクト管理ツール！ 🔥
セーフエリア
iPhone Xのリリース以降、Appleはいわゆるセーフエリアを導入し、その後Google ChromeもAndroidでサポートしました。
セーフエリアを持つデバイス（画面上部のノッチがある場合など）では、アプリのUIは、縦向きでは上部と下部の間隔（上部のノッチと下部のバーを考慮するため）、横向きでは左右の間隔（左右のノッチを考慮するため）を追加する必要があります。
ビューポート
アプリがフルスクリーンのモバイルデバイスをターゲットとする場合、<meta name="viewport">にviewport-fit=coverがあることを確認してください。例：
<!DOCTYPE html>
<html lang="en">
<head>
...
<!-- Make sure you have viewport-fit=cover in content -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"
/>
</head>
<body>
...
</body>
</html>
セーフエリア
アプリがフルスクリーンアプリであり、セーフエリアを考慮する必要があることをコンポーネントに伝えるには、Konsta UIコンポーネントの親要素、できればルートアプリ要素にsafe-areasクラスを追加する必要があります。
<!-- App.svelte -->
<!-- add "safe-areas" class to the app root element -->
<div id="my-app" class="safe-areas">...</div>
Konsta UIのAppコンポーネントを使用する場合は、safeAreasプロパティで有効にできます。
<!-- App.svelte -->
<script>
import { App } from 'konsta/svelte';
</script>
<!-- enable with safeAreas prop -->
<App safeAreas theme="ios">
<HomePage />
</App>
これがCSSで定義されたsafe-areasクラスです。
:root: {
--k-safe-area-left: 0px;
--k-safe-area-right: 0px;
--k-safe-area-top: 0px;
--k-safe-area-bottom: 0px;
}
@supports (left: env(safe-area-inset-left)): {
.safe-areas: {
--k-safe-area-left: env(safe-area-inset-left);
--k-safe-area-right: env(safe-area-inset-right);
--k-safe-area-top: env(safe-area-inset-top);
--k-safe-area-bottom: env(safe-area-inset-bottom);
}
}
セーフエリアの無効化
フルスクリーン要素ではないモーダルやサイドパネルでセーフエリアを無効にすると便利な場合があります。
以下のユーティリティクラスを使用して、特定の要素でセーフエリアを無効にできます。
| クラス | |
|---|---|
| 要素のすべてのセーフエリアを無効にします |
| 要素の上部のセーフエリアを無効にします |
| 要素の右側のセーフエリアを無効にします |
| 要素の下部のセーフエリアを無効にします |
| 要素の左側のセーフエリアを無効にします |
これがCSSで定義されたno-safe-areasクラスです。
@supports (left: env(safe-area-inset-left)): {
.no-safe-areas: {
--k-safe-area-left: 0px;
--k-safe-area-right: 0px;
--k-safe-area-top: 0px;
--k-safe-area-bottom: 0px;
}
.no-safe-areas-top: {
--k-safe-area-top: 0px;
}
.no-safe-areas-right: {
--k-safe-area-right: 0px;
}
.no-safe-areas-bottom: {
--k-safe-area-bottom: 0px;
}
.no-safe-areas-left: {
--k-safe-area-left: 0px;
}
}
セーフな間隔と配置
要素を配置するときにセーフエリアを考慮することもできます。
| クラス | CSS |
|---|---|
| |
| |
| |
| |
| |
| |
| |
| |
マージンとパディングも同様です
| クラス | CSS |
|---|---|
| |
| |
| |
| |
| |
| |
| |
| |
| クラス | CSS |
|---|---|
| |
| |
| |
| |
| |
| |
| |
| |
例
<!--
"left-safe" class will set:
left: var(--k-safe-area-top);
"bottom-4-safe" class will set:
bottom: calc(1rem + var(--k-safe-area-bottom));
-->
<div class="left-safe bottom-4-safe">...</div>;
コードは以下のライセンスで公開されています。 MIT.
2022 © Konsta UI by 
.
.