W3Schools Tryit Editor
[
フレーム
]
Run ❯
Get your
own
website
Go to Spaces
Ctrl+Alt+P
HTML
CSS
<!doctype html> <html> <body> <main> <figure> The city of Chania <figcaption>Sunset in Chania, Greece.</figcaption> </figure> </main> </div><div class="naked_ctrl"> <form action="/index.cgi/contrast" method="get" name="gate"> <p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://www.w3schools.com/htmlcss/tryit.asp?filename=tryhtmlcss_figcaption">(->オリジナル)</a> / <label>アドレス: <input type="text" name="naked_post_url" value="https://www.w3schools.com/htmlcss/tryit.asp?filename=tryhtmlcss_figcaption" size="22" /></label> <label>モード: <select name="naked_post_mode"> <option value="default">デフォルト</option> <option value="speech">音声ブラウザ</option> <option value="ruby">ルビ付き</option> <option value="contrast" selected="selected">配色反転</option> <option value="larger-text">文字拡大</option> <option value="mobile">モバイル</option> </select> <input type="submit" value="表示" /> </p> </form> </div> </body> </html>
body { font-family: "Segoe UI" , sans-serif; margin: 0; background: #f9fafb; } main { max-width: 900px; margin: 0 auto; padding: 40px 24px; } figure { margin: 0; background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 8px 20px rgba(15,23,42,0.08); } figure img { max-width: 100%; border-radius: 8px; } figcaption { margin-top: 12px; color: #475569; }