CSSプレイグラウンド

The CSS Playground is an interactive online tool for web developers, designers, and students to experiment with HTML and CSS in a live environment. Write your HTML markup and CSS rules, then see the changes applied instantly in the real-time preview panel. This allows for quick prototyping, learning, and debugging of CSS styles.

Key Features:

Real-time rendering of HTML and CSS.
Separate, dedicated editors for HTML and CSS for improved clarity.
Clear individual editors or reset both to default example code.
Secure live preview using an isolated `` environment.</li> <li>Copy the complete, combined HTML with embedded CSS for easy portability.</li> <li>User-friendly interface with intuitive controls.</li> </ul> <h3 class="text-xl font-semibold text-gray-900 mb-3">How to use:</h3> <ol class="list-decimal list-inside text-gray-600 space-y-2"> <li><strong>Write HTML:</strong> Type or paste your HTML structure into the "HTML" editor on the left.</li> <li><strong>Write CSS:</strong> Type or paste your CSS rules into the "CSS" editor, also on the left.</li> <li><strong>Preview:</strong> Click the "Apply CSS & Preview" button to render your code in the "Live Preview" panel on the right.</li> <li><strong>Experiment:</strong> Modify your HTML or CSS and click "Apply CSS & Preview" again to see instant updates.</li> <li><strong>Reset:</strong> Use the "Reset Editors" button to revert both editors to their default example content.</li> <li><strong>Clear:</strong> Use the "Clear HTML" or "Clear CSS" buttons to empty specific editors.</li> <li><strong>Copy:</strong> Click "Copy Combined Code" to get a full HTML document (including your CSS inside a `<style>` tag) to your clipboard.</li> </ol> </div> </div> </div>  <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "CSSプレイグラウンド", "applicationCategory": "DeveloperApplication", "description": "HTMLとCSSをリアルタイムで試せるインタラクティブなオンラインツール。コードを記述すると、ライブプレビューで視覚的な結果を即座に確認できます。", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }, "operatingSystem": "Any" } </script> </main>  <footer class="bg-gray-900 text-gray-300 mt-20"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div class="col-span-1 md:col-span-2"> <div class="flex items-center space-x-2 mb-4"> <span class="text-2xl">🛠️</span> <span class="text-xl font-bold text-white">Camposha<span class="text-primary-400">DevTools</span></span> </div> <p class="text-gray-400 mb-4">無料のオンライン開発者ツールとユーティリティ。開発者のために❤️を込めて作りました。</p> <div class="flex space-x-4"> <a href="#" class="text-gray-400 hover:text-primary-400 transition"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg> </a> <a href="#" class="text-gray-400 hover:text-primary-400 transition"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg> </a> </div> </div> <div> <h3 class="text-white font-semibold mb-4">ツール</h3> <ul class="space-y-2"> </ul> </div> <div> <h3 class="text-white font-semibold mb-4">Links</h3> <ul class="space-y-2"> <li><a href="/ja/" class="text-gray-400 hover:text-primary-400 transition">ホーム</a></li> <li><a href="/ja/blog" class="text-gray-400 hover:text-primary-400 transition">ブログ</a></li>   </ul> </div> </div> <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> <p>© 2025 Camposha DevTools. All rights reserved.</p> </div> </div> </footer>  <script> // Mobile menu toggle document.getElementById('mobile-menu-button').addEventListener('click', function() { document.getElementById('mobile-menu').classList.toggle('hidden'); }); // Smooth scroll document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth' }); } }); }); </script> <script> document.addEventListener('DOMContentLoaded', () => { const htmlInput = document.getElementById('html-input'); const cssInput = document.getElementById('css-input'); const previewIframe = document.getElementById('preview-iframe'); const applyBtn = document.getElementById('apply-btn'); const resetBtn = document.getElementById('reset-btn'); const clearHtmlBtn = document.getElementById('clear-html-input'); const clearCssBtn = document.getElementById('clear-css-input'); const copyCombinedBtn = document.getElementById('copy-combined-code'); const errorMessage = document.getElementById('error-message'); const errorText = document.getElementById('error-text'); const successMessage = document.getElementById('success-message'); const successText = document.getElementById('success-text'); // Default content for a good starting point and reset functionality const defaultHtml = `<div class="container"> <h1>Hello from CSS Playground!</h1> <p>Modify the HTML and CSS to see live changes.</p> <button class="my-button">Explore Styles</button> </div>`; const defaultCss = `body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background-color: #eef2f6; /* Light gray-blue */ color: #333; } .container { background-color: #ffffff; border: 1px solid #dcdfe4; padding: 30px; border-radius: 12px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); text-align: center; max-width: 600px; margin: 0 auto; } h1 { color: #1a202c; /* Darker blue-gray */ margin-bottom: 15px; font-size: 2.2em; font-weight: 700; } p { color: #4a5568; /* Medium blue-gray */ line-height: 1.8; margin-bottom: 25px; font-size: 1.1em; } .my-button { background-color: #4299e1; /* Tailwind blue-500 */ color: white; border: none; padding: 12px 28px; border-radius: 6px; cursor: pointer; font-size: 1.1em; font-weight: 600; transition: background-color 0.3s ease, transform 0.2s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .my-button:hover { background-color: #3182ce; /* Tailwind blue-600 */ transform: translateY(-2px); }`; // Utility function to hide messages const hideMessages = () => { errorMessage.classList.add('hidden'); successMessage.classList.add('hidden'); }; // Utility function to show an error message const showError = (message) => { hideMessages(); errorText.textContent = message; errorMessage.classList.remove('hidden'); }; // Utility function to show a success message, fades out after 3 seconds const showSuccess = (message) => { hideMessages(); successText.textContent = message; successMessage.classList.remove('hidden'); setTimeout(() => successMessage.classList.add('hidden'), 3000); }; /** * Renders the current HTML and CSS into the iframe for live preview. */ const updatePreview = () => { hideMessages(); // Clear any previous messages const htmlContent = htmlInput.value; const cssContent = cssInput.value; // Construct the full HTML document for the iframe. // Embedding CSS directly in a <style> tag within the <head> is standard practice for this scenario. const iframeContent = `<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Preview</title> <style> ${cssContent} </style> </head> <body> ${htmlContent} </body> </html>`; try { // Get the iframe's document and write the new content const doc = previewIframe.contentDocument || previewIframe.contentWindow.document; doc.open(); doc.write(iframeContent); doc.close(); } catch (e) { // Catch any errors during iframe content manipulation showError("Error rendering preview: " + e.message); } }; /** * Resets both HTML and CSS editors to their default content and updates the preview. */ const resetEditors = () => { hideMessages(); htmlInput.value = defaultHtml; cssInput.value = defaultCss; updatePreview(); // Ensure preview reflects default content }; /** * Clears the HTML editor and updates the preview. */ const clearHtmlEditor = () => { hideMessages(); htmlInput.value = ''; updatePreview(); }; /** * Clears the CSS editor and updates the preview. */ const clearCssEditor = () => { hideMessages(); cssInput.value = ''; updatePreview(); }; /** * Copies the combined HTML and CSS (as a full HTML document) to the clipboard. */ const copyCombinedCode = async () => { const htmlContent = htmlInput.value; const cssContent = cssInput.value; const combinedCode = `<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My CSS Experiment</title> <style> ${cssContent} </style> </head> <body> ${htmlContent} </body> </html>`; try { await navigator.clipboard.writeText(combinedCode); showSuccess("Combined HTML & CSS copied to clipboard!"); } catch (err) { showError("Failed to copy code to clipboard: " + err); } }; // --- Event Listeners --- applyBtn.addEventListener('click', updatePreview); resetBtn.addEventListener('click', resetEditors); clearHtmlBtn.addEventListener('click', clearHtmlEditor); clearCssBtn.addEventListener('click', clearCssEditor); copyCombinedBtn.addEventListener('click', copyCombinedCode); // Initial setup: Load default content and render the first preview on page load. resetEditors(); }); </script>  </body> </html>

Code Editors

Live Preview

About CSS Playground

Key Features: