レスポンシブHTMLのテスト
プレビュー幅を変えて列とメディアクエリーを確認します。
手順
- スターターテンプレートから始めるか、サンプルプロジェクトを読み込みます。
- HTML構造、CSSスタイル、JavaScriptの動作を編集します。
- 実行（Ctrl/Cmd + Enter）でsandboxプレビューを更新します。
- Consoleパネルでlog、warn、errorを確認します。
- レスポンシブコントロールで一般的な幅のレイアウトを確認します。
- 整形、コピー、またはindex.htmlとしてダウンロードします。
例
HTML
<main class="cards"><article>A</article><article>B</article><article>C</article></main>CSS
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards article { padding: 24px; background: #dbeafe; }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }JavaScript
console.log("Preview width:", window.innerWidth);600pxより広い場合は3列、600px以下では1列になります。幅のシミュレーションは実機テストの代わりにはなりません。
ヒント
プレビュー用のHTML、CSS、JavaScriptの基本実行はブラウザ内でローカルに行われます。