HTML、CSS、JS をオンラインで実行
HTML、CSS、JavaScript をすべて 1 つのエディターで使用して完全な Web ページを作成します。
導入
最新の Web ページは、構造のための HTML、スタイルのための CSS、対話性のための JavaScript という 3 つのコア テクノロジを使用して構築されています。当社のオンライン コード ランナーは、単一のエディターで 3 つすべてをサポートします。完全な Web ページを作成すると、即座にレンダリングされるのを確認できます。
HTML、CSS、JS を一緒に記述する方法
HTML コード ランナー では、CSS と JavaScript をインラインで含む完全な HTML ドキュメントを作成します。それらがどのように連携するかは次のとおりです。
- HTML — ページの構造とコンテンツを定義します。
- CSS —
の - JavaScript -
例: HTML、CSS、JavaScript の組み合わせ
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; text-align: center; padding: 2rem; }
button { padding: 0.8rem 2rem; font-size: 1.1rem; cursor: pointer; }
#counter { font-size: 3rem; margin: 1rem; color: #6C5CE7; }
</style>
</head>
<body>
<h1>Click Counter</h1>
<div id="counter">0</div>
<button onclick="count()">Click Me</button>
<script>
let n = 0;
function count() {
n++;
document.getElementById('counter').textContent = n;
}
</script>
</body>
</html>構築できるもの
- 検証機能を備えたインタラクティブなフォーム
- アニメーションランディングページ
- データ視覚化ダッシュボード
- ゲームのプロトタイプ
- CSS アートとアニメーション
- API接続アプリケーション（外部データの取得）
多言語コードに関するヒント
- FOUC (スタイルされていないコンテンツのフラッシュ) を避けるために、CSS を
に配置します。 - JavaScript を
の最後に置くか、deferを使用します。 - コンソール出力パネルを使用して JavaScript エラーをデバッグする
- ブラウザウィンドウのサイズを変更してレスポンシブデザインをテストする
よくある質問
はい。 CSS のリンク タグと src 属性を持つスクリプト タグを使用して、CDN から外部リソースを読み込みます。
はい。 HTML ヘッド セクションに Bootstrap CDN リンクを含めると、すべての Bootstrap クラスがプレビューで動作します。
はい。 jQuery CDN スクリプト タグを含めると、コード内で jQuery 構文を使用できるようになります。