HTML CSS JS オンラインエディタ・CSS生成（影・グラデーション）ベータ

HTML CSS JS オンラインエディタ・CSS生成（影・グラデーション）について

HTML・CSS・JSの3つの欄に書いたコードは、入力が600msほど止まると1つのHTML文書にまとめられ、プレビュー用iframeのsrcdocに読み込まれます。CSSはheadのstyleタグ、HTMLはbody、JSはbodyの末尾のscriptタグに入るので、スクリプトが動く時点で要素はすべてできています。DOMContentLoadedを待たなくてもgetElementByIdが使えるのはこのためです。

このページには、以前は別ツールだったCSSジェネレーター4つ(box-shadow、border-radius、グラデーション、cubic-bezierイージング)がタブとして入っています。作った値をCSS欄に貼れば、その場で実際の要素に当てて確認できます。以下では、プレビューの隔離の仕組みと、各ジェネレーターが出力するプロパティが仕様上どう計算されるかを説明します。

プレビューはどう隔離されているか

プレビューのiframeにはsandbox=「allow-scripts allow-modals allow-forms allow-popups」が指定され、allow-same-originは付いていません。これがないと文書はどのサイトとも一致しない不透明なオリジンになり、このサイトのCookieやストレージには触れません。MDNは、同一オリジンの内容にallow-scriptsとallow-same-originを両方付けると、埋め込まれた側がsandbox属性自体を消せるため、サンドボックスがないのと同じになると注意しています。

そのため練習コードでlocalStorageやdocument.cookieを使うと、エラーになるか何も保存されません。保存処理を試すときは「HTMLファイルとして保存」でダウンロードし、直接開いてください。alert・confirmはallow-modals、window.openやtarget=「_blank」のリンクはallow-popupsで動きます。

コンソール欄は、ユーザーのコードより先に差し込んだ小さなスクリプトがconsole.log・warn・errorや捕捉されなかったエラーをpostMessageで親ページへ送ることで表示されます。親は送信元が現在のiframeか、実行番号が最新かを確認するので、前回の実行から遅れて届いたログは捨てられます。エラーの行番号はJS欄基準に直して表示します。

JS欄に</script>と書くと

HTMLパーサーはJavaScriptの文法を知らず、scriptタグの中身を読みながら</scriptが出た時点でタグを閉じます。文字列の中でも同じです。このツールは文書を組み立てるとき、JS欄の</scriptを<\/scriptに、CSS欄の</styleを<\/styleに書き換えています。手書きのHTMLにスクリプトを埋め込むときも同じ対策が必要です。

box-shadow:重ね順とレイヤーの考え方

box-shadowはカンマで複数の影をつなげられ、先に書いた影が上に描かれます。1層はoffset-x、offset-y、ぼかし、広がり(spread)、色、任意のinsetからなります。ぼかしは負にできず、spreadが負なら影が縮みます。影はレイアウトのサイズに影響しません。

自然な影は2層で作るのが定番です。短く濃い影が接地部分を、長く薄い影が周囲に広がる光を表します。ニューモーフィズムのプリセットは片側にグレー、反対側に白の影を置くので、背景色がその中間にあるときだけ立体的に見えます。ジェネレーターは0でも4つの長さをすべて書き、色は常にrgba()で出力します。

border-radius:半径が大きすぎるとき

1辺に接する2つの半径の合計がその辺の長さを超えると、CSS Backgrounds 3は全半径に同じ係数f = min(辺の長さ ÷ その辺の半径の合計)を掛けて縮めます。200×100pxの箱にborder-radius: 100pxを指定すると縦の辺で合計200pxになりf = 0.5、全角が50pxになってピル形になります。50%だと横半径が幅の半分、縦半径が高さの半分なので楕円になります。ピル形のボタンに大きなpx値を使うのはこのためです。

スラッシュの前が横方向、後ろが縦方向の半径です。ブロブ(ランダム)プリセットはこの8つの値をすべて変えて有機的な形を作ります。

グラデーションの色はどこで混ざるか

#ff0000から#00ff00への線形グラデーションの中央は、sRGBの値をそのまま平均して#808000(くすんだオリーブ色)になります。ジェネレーターで途中に停止点を追加するときの色も同じ計算です。CSS Color 4では、hexやrgb()など従来の書き方だけならsRGBで補間し、CSS Images 4からはlinear-gradient(in oklch, …)のように補間色空間を指定できます。色相が離れた2色の中央がくすむなら、oklabやoklchを試してください。

透明度が絡むとブラウザーは色にアルファを掛けた状態(プリマルチプライド)で補間します。赤からrgba(0,0,0,0)へのグラデーションが黒ずまず、半透明の赤になるのはこのためです。グラデーション生成でも中間をクリックして色の位置を追加するときは同じ方法で混ぜるので、赤と透明の50%地点にはrgba(255, 0, 0, 0.5)が入ります。

cubic-bezierの4つの数字

cubic-bezier(x1, y1, x2, y2)は(0,0)から(1,1)へ向かう曲線の2つの制御点で、xが時間、yが進行度です。CSS Easing仕様ではx1・x2が0〜1を外れると無効になり、yには制限がありません。yが1を超えると行き過ぎて戻る動きになります。エディターではハンドルをドラッグするとグラフに見える範囲(yが-0.8〜1.9)の中だけで動き、それより大きな値は数値欄や貼り付けで入れれば切り詰めずにそのまま使います。

• ease = (0.25, 0.1, 0.25, 1):transitionの既定値
• ease-in = (0.42, 0, 1, 1)、ease-out = (0, 0, 0.58, 1)
• ease-in-out = (0.42, 0, 0.58, 1)、linear = (0, 0, 1, 1)

例

使い方

1. 上部のタブでエディターかCSSジェネレーターを選びます。
2. コードを編集すると少し後にプレビューとコンソールが更新されます。ジェネレーターの値はCSS欄に貼ります。
3. 共有リンクを作るか、HTMLファイルとして保存します。

よくある質問