前回よりCSSを単純にした版。html, js, css編集領域と、preview領域は各全画面表示(切り替えるたびに遷移履歴が積み上がる)。読み込み直後は何も表示されないので、html、css、js等clickして表示させる
<html><head><title>TinyCodePen</title><style>
*{box-sizing:border-box;font:1em FixedSys;margin:0}
body{overflow:hidden;height:100vh}
a:hover{background:#eef}
iframe,textarea{display:none;height:calc(100% - 1em);width:100%}
iframe:target,textarea:target{display:block}
</style>
<a href=#html>HTML</a> <a href=#js>JS</a> <a href=#css>CSS</a>
<a href=#v>View</a> <a href=#v onclick="run()">Run</a>
<input type=checkbox id=n>Tab
<textarea id=html></textarea>
<textarea id=js></textarea>
<textarea id=css></textarea>
<iframe id=v></iframe><script>
const t='<!doctype html><html><head><meta charset=utf8><meta name=viewport content="width=device-width,initial-scale=1.0"><title></title><style>';
function run(){
let h=html.value.trim(),c=css.value.trim(),j=js.value.trim();
h=j&&!h&&!c
?`<script>${j}<\/script>`
:/^(<html|<!doctype)/i.test(h)
?h:`${t+c}</style></head>${h}<script>${j}<\/script>`;
if(n.checked)with(open("").document)open(),close(write(h));
else v.srcdoc=h
}
</script>
上記とほぼ同様で、編集領域とprevew領域を切り替えた時の挙動が異なる。多分使い勝手はこちらの方が良い
<html><head><title>TinyCodePen</title><style>
*{box-sizing:border-box;font:1em FixedSys;margin:0}
body{height:100vh;overflow:hidden}
label{border:1px solid #888;background:#eee;color:#00c;padding:0 8px}
label:hover{background:#ecc;color:#c00}
iframe,textarea{display:none;height:calc(100% - 1em);resize:none;width:100%}
:checked~*{display:block}
input[type=radio]{display:none}
</style>
<label for=hc>HTML</label>
<label for=jc>JS</label>
<label for=cc>CSS</label>
<label for=vc>View</label>
<label for=vc onclick="run()">Run</label>
<label><input type=checkbox id=n>Tab</label>
<input type=radio name=r id=hc checked><textarea id=html></textarea>
<input type=radio name=r id=jc><textarea id=js></textarea>
<input type=radio name=r id=cc><textarea id=css></textarea>
<input type=radio name=r id=vc><iframe id=v></iframe><script>
const t='<!doctype html><html><head><meta charset=utf8><meta name=viewport content="width=device-width,initial-scale=1.0"><title></title><style>';
function run(){
let h=html.value.trim(),c=css.value.trim(),j=js.value.trim();
h=j&&!h&&!c
?`<script>${j}<\/script>`
:/^(<html|<!doctype)/i.test(h)
?h:`${t+c}</style></head>${h}<script>${j}<\/script>`;
if(n.checked)with(open("").document)open(),close(write(h));
else v.srcdoc=h
}
</script>
説明書
- HTML
htmlのbody要素を記述。
<!doctypeや<htmlで始まる文字列(空白類除外)の場合は後述のCSSとJSは無視されるので、ここに全て記述する事になる - CSS
style要素の中身を記述(
headの子要素) - JS
JavaScriptを記述(
body最後の子要素)。前述のHTMLとCSSを省略しても、JSだけの実行も可能 - preview
上述の内容を描画する領域
- Tab
有効にすると別Tabに描画