Playgrounds
インタラクティブなWeb技術のデモ集。最新のWeb API、CSS機能、React技術を実際に体験できます。
テキストのコピー・ペースト
クリップボードの読み取り: 読み込めませんでした
クリップボードの書き込み: 読み込めませんでした
画像のコピー・ペースト
ペーストされた画像
権限があれば、外部でコピーした画像も貼り付けられます
Selectionオブジェクトのプロパティ
サンプルテキスト
あさ、眼をさますときの気持は、面白い。かくれんぼのとき、押入れの真っ暗い中に、じっと、しゃがんで隠れていて、突然、でこちゃんに、がらっと襖をあけられ、日の光がどっと来て、でこちゃんに、「見つけた！」と大声で言われて、まぶしさ、それから、へんな間の悪さ、それから、胸がどきどきして、着物のまえを合せたりして、ちょっと、てれくさく、押入れから出て来て、急にむかむか腹立たしく、あの感じ、いや、ちがう、あの感じでもない、なんだか、もっとやりきれない。
選択中のテキスト（selection.toString()）
選択要素の開始位置の要素
（selection.anchorNode.textContent, selection.anchorOffset）
選択要素の終了位置の要素
（selection.focusNode.textContent, selection.focusOffset）
選択の種類（selection.type）
Selectionオブジェクトのメソッド
サンプルテキスト
あさ、眼をさますときの気持は、面白い。かくれんぼのとき、押入れの真っ暗い中に、じっと、しゃがんで隠れていて、突然、でこちゃんに、がらっと襖をあけられ、日の光がどっと来て、でこちゃんに、「見つけた！」と大声で言われて、まぶしさ、それから、へんな間の悪さ、それから、胸がどきどきして、着物のまえを合せたりして、ちょっと、てれくさく、押入れから出て来て、急にむかむか腹立たしく、あの感じ、いや、ちがう、あの感じでもない、なんだか、もっとやりきれない。
選択範囲の追加
（selection.addRange(Range)）
選択範囲の削除
（selection.removeAllRanges(), selection.empty()）
要素の子を全て選択する
（selection.selectAllChildren(Node)）
範囲の変更
（selection.extend(Node, ?offset)）
Baseline2025で追加されたgetComposedRangesメソッド
サンプルテキスト（テキスト全体が閉じたShadow Tree）
あさ、眼をさますときの気持は、面白い。かくれんぼのとき 、押入れの真っ暗い中に、じっと、しゃがんで隠れていて、突然、でこちゃんに、がらっと襖をあけられ、日の光がどっと来て、でこちゃんに、「見つけた！」と大声で言われて、まぶしさ、それから、へんな間の悪さ、それから、胸がどきどきして、着物のまえを合せたりして、ちょっと、てれくさく、押入れから出て来て、急にむかむか腹立たしく、あの感じ、いや、ちがう、あの感じでもない、なんだか、もっとやりきれない。
SafariやIOSのChrome等ではoptionsを含んだgetComposedRangesメソッドが正しく動作しない場合があります。
hiddenとautoの違い
content-visibility: hidden
content-visibility: auto
サンプルコンテンツ
このコンテンツはcontent-visibility: autoによって制御されています。ビューポート外の要素のレンダリング処理を必要なタイミングまでスキップできます。
スタイリング例
detailsの子要素全てにスタイルを割り当て
p要素1
p要素2
p要素3
::details-contentを用いてslot要素に割り当て
p要素1
p要素2
p要素3
アニメーション実装パターン
::details-contentによるアニメーション
想定した通りにアニメーションが適用されます
例として実装したアニメーションは@prefers-reduced-motionに対応していません。注意してご利用ください。
webkitRelativePathの例
選択されたファイル一覧:
ファイルが選択されていません。
基本的なポップオーバー
このポップオーバーはPopover APIによって表示されました。 ESCキーやこのコンテンツの外側のクリック、toggleまたはhideボタンで閉じられます。
ツールチップ・ドロップダウン
Tooltip
Dropdown Menu
このUIの実装はPopover APIを使っていません。
ダイアログの閉じる動作検知
印刷時の色調整デモ
色調整の設定（print-color-adjust）
ブラウザの印刷設定で色調整を正確にするか、ブラウザにお任せするかを選択できます。
現在の設定: ブラウザにお任せ（economy）
スクリーンスリープ防止
SuspenseListによる読み込み制御
React v19.2、Nextjs v16で利用ができなくなったため、現在こちらの機能は利用できません。
<SuspenseList revealOrder="together">
CSS数学関数デモ
座標: (-50, 30)
座標の絶対値の和: 80
象限: 第二象限
※absを用いて、座標の絶対値の和が大きいほど要素のサイズを大きくしています。透明度も同じようにしています。
要素のサイズ: transform: scale(calc(1 + (abs(x) + abs(y)) / 200))
透明度: opacity: calc(0.5 + (abs(x) + abs(y)) / 200)
※signを用いて、座標の点の色を変えています。座標の和が正であればhsl(280, 70%, 50%)、負であればhsl(120, 70%, 50%)、0であればhsl(200, 70%, 50%)にしています。
座標の点の色: background-color: 'hsl(calc(sign(var(--x) + var(--y)) * 80 + 200), 70%, 50%)'
基本的なハイライト
知らざるを知らずとなす、これ知るなり
優先度ベースハイライト
Imagination is more important than knowledge
スペリング・文法エラーハイライト
食べれる
スペル・文法エラースタイリング
Check a speling error and an grammar error.
View Transition基本デモ
- アイテム 1
- アイテム 2
- アイテム 3
- アイテム 4
- View TransitionのON/OFFの切り替えは
view-transition-nameをnoneに指定することで行なっています。 - View TransitionがONの時は、アイテム番号ごとの
view-transition-nameを持ちます（例:item-1）。 - 各アイテムは、まとまったスタイルを付与するために
view-transition-class: item;を持ちます。
::view-transition-group(.item) {
border-radius: var(--radius-md);
}
::view-transition-group(item-1) {
background-color: var(--red-800);
}
::view-transition-image-pair(item-2) {
background-color: var(--pink-800);
}
::view-transition-old(item-3) {
background-color: var(--purple-800);
}
::view-transition-new(item-4) {
background-color: var(--cyan-800);
}