Vertical form controls
縦書きフォームコントロールは writing-mode: vertical-rl や vertical-lr が設定された環境で、フォーム要素が適切に縦書きレイアウトに対応する機能です。日本語の縦書きフォームやUIで、スライダー、プログレスバー、セレクトメニューなどが正しく表示されます。direction プロパティで入力方向も制御できます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
vertical slider direction | 124 | 124 | 120 | 16.5 | 124 | 16.5 |
vertical oriented form controls 垂直方向のフォームコントロール | 124 | 124 | 120 | 17.4 | 124 | 17.4 |
注釈 2件
制限事項
- このブラウザでは部分的にしか実装されていません
実装メモ
- 垂直範囲スライダーでのみサポートされます。
注釈 2件
制限事項
- このブラウザでは部分的にしか実装されていません
実装メモ
- 垂直範囲スライダーでのみサポートされます。
注釈 2件
制限事項
- このブラウザでは部分的にしか実装されていません
実装メモ
- 垂直範囲スライダーでのみサポートされます。
注釈 6件
実装メモ
- 選択、ボタン、テキストエリア、テキスト入力、範囲スライダー、メーター、および進行状況要素でサポートされています。
- 選択、ボタン、テキストエリア、およびテキスト入力要素でサポートされています。
- select 要素と button 要素でのみサポートされます。
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (124)
- このバージョンで機能が削除されました (121)
注釈 6件
実装メモ
- 選択、ボタン、テキストエリア、テキスト入力、範囲スライダー、メーター、および進行状況要素でサポートされています。
- 選択、ボタン、テキストエリア、およびテキスト入力要素でサポートされています。
- select 要素と button 要素でのみサポートされます。
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (124)
- このバージョンで機能が削除されました (121)
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (17.4)
実装メモ
- 範囲スライダー、テキスト入力、テキストエリアのみのサポート
注釈 6件
実装メモ
- 選択、ボタン、テキストエリア、テキスト入力、範囲スライダー、メーター、および進行状況要素でサポートされています。
- 選択、ボタン、テキストエリア、およびテキスト入力要素でサポートされています。
- select 要素と button 要素でのみサポートされます。
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (124)
- このバージョンで機能が削除されました (121)
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (17.4)
実装メモ
- 範囲スライダー、テキスト入力、テキストエリアのみのサポート
基本構文
CSS
.vertical-form {
writing-mode: vertical-rl;
}
.vertical-form input[type="range"] {
/* Automatically displays vertically */
}ライブデモ
実務での使いどころ
-
日本語縦書きフォーム
日本語の縦書きページ内で、フォーム要素が自然に縦方向に配置されるレイアウトを実現します。
注意点
- すべてのフォーム要素が完全に縦書きに対応しているわけではなく、特にカスタム要素では追加の調整が必要な場合があります。
アクセシビリティ
- 縦書きフォームでも、ラベルとフォーム要素の関連付けを label 要素の for 属性で適切に行ってください。