contenteditable属性で入力したCSSがページにリアルタイムで反映されるフォームをつくる

HTML5で追加された属性にcontenteditableというものがあります。これを付けることで、あらゆる要素のテキストノードの編集が可能になります。ブラウザ版Twitterのツイート入力フォームもこの属性が使われています。

これを<style>タグに追加して、さらにdisplay: blockで可視化すると、入力したCSSがページにリアルタイムで反映されるフォームを簡単につくることができます。

<style>タグは、<head>間または<body>直下の子要素へ配置しないと、W3Cのバリデーションでエラーになるのでご注意ください。

デモ

body{background: #000} など適当なCSSを入力して遊んでみてください。

styleタグ内にdivなどの余計なタグが生成されるのを防ぐため、改行する際はShiftキーを押しながらEnterキーを押してください。

デモで使用しているソース

1
2
<style class="stylebox" contenteditable="true" type="text/css">
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.stylebox{
display: block;
height: 400px;
padding: 12px;
overflow: auto;
resize: both;
border: 1px solid #ddd;
white-space: pre;
font-family: Monaco, monospace;
}

.stylebox:focus{
box-shadow: 0 0 5px #ccc inset;
}