k8o

LLMS

Playgrounds

インタラクティブなWeb技術のデモ集。最新のWeb API、CSS機能、React技術を実際に体験できます。

Clipboard API

ブラウザのクリップボードに任意のデータをコピー・ペーストできるAPIです。

ブログを読む

テキストのコピー・ペースト

クリップボードの読み取り: 読み込めませんでした

クリップボードの書き込み: 読み込めませんでした

画像のコピー・ペースト

コピーする画像1

ペーストされた画像

権限があれば、外部でコピーした画像も貼り付けられます

ペーストされた画像

Selectionオブジェクト

ユーザーが選択したテキストの範囲やキャレットの位置を扱うSelectionオブジェクトの紹介です。

ブログを読む

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メソッドが正しく動作しない場合があります。

Popover API

JavaScriptなしでツールチップやドロップダウンメニューを実装できるAPIです。

ブログを読む

基本的なポップオーバー

このポップオーバーはPopover APIによって表示されました。 ESCキーやこのコンテンツの外側のクリック、toggleまたはhideボタンで閉じられます。

ツールチップ・ドロップダウン

Tooltip

Dropdown Menu

このUIの実装はPopover APIを使っていません。

Dialog requestClose

ダイアログのrequestCloseイベントでESCキーやクリック以外の閉じる動作を検知できます。

ブログを読む

ダイアログの閉じる動作検知

CSS print-color-adjust

印刷時の色の調整を制御するCSSプロパティです。

ブログを読む

印刷時の色調整デモ

色調整の設定(print-color-adjust)

ブラウザの印刷設定で色調整を正確にするか、ブラウザにお任せするかを選択できます。

現在の設定: ブラウザにお任せ(economy)

Screen Wake Lock API

デバイスのスクリーンが自動的にスリープ状態になることを防ぐAPIです。

ブログを読む

スクリーンスリープ防止

React SuspenseList

複数のSuspenseコンポーネントの表示順序や読み込みタイミングを制御します。

ブログを読む

SuspenseListによる読み込み制御

<SuspenseList revealOrder="together">

Cache Key: key1

Time: 1500ms

Cache Key: key2

Time: 2000ms

Cache Key: key3

Time: 500ms

Cache Key: key4

Time: 1000ms

CSS abs()とsign()関数

数値の絶対値と符号を取得するCSS関数です。

ブログを読む

CSS数学関数デモ

-50px

横方向の位置を調整します

30px

縦方向の位置を調整します

座標: (-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%)'

CSS Custom Highlight API

DOMを変更せずに任意のテキスト範囲をハイライトできるAPIです。

ブログを読む

基本的なハイライト

知らざるを知らずとなす、これ知るなり

優先度ベースハイライト

Imagination is more important than knowledge

スペリング・文法エラーハイライト

食べれる

CSS spelling-error & grammar-error

ブラウザが検出したスペルミスや文法エラーのスタイリングを制御します。

ブログを読む

スペル・文法エラースタイリング

Check a speling error and an grammar error.