---
title: "【当サイト初公開】静的HTMLツールサイトをオンラインで実行 - 憂いを忘れる一枚"
description: フロントエンドを学んでいると、テストコードを実行する必要がよくあります。当時、私は主にChinazのウェブマスターツールのようなオンラインツールを使っていました。現在はフロントエンド技術をほぼ習得したので、より多くの人が手軽にフロントエンドプログラミングを学べるよう、オンライン実行ツールを自分で作ることにしました。以下
canonical_url: "https://www.ikxin.com/ja/article/online-html-tools"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ja
meta:
"og:description": フロントエンドを学んでいると、テストコードを実行する必要がよくあります。当時、私は主にChinazのウェブマスターツールのようなオンラインツールを使っていました。現在はフロントエンド技術をほぼ習得したので、より多くの人が手軽にフロントエンドプログラミングを学べるよう、オンライン実行ツールを自分で作ることにしました。以下
"og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~44CQ5b2T44K144Kk44OI5Yid5YWs6ZaL44CR6Z2Z55qESFRNTOODhOODvOODq-OCteOCpOODiOOCkuOCquODs-ODqeOCpOODs-OBp-Wun-ihjCAtIOaGguOBhOOCkuW~mOOCjOOCi-S4gOaemg%2Cc_Article%2Ctitle_~44CQ5b2T44K144Kk44OI5Yid5YWs6ZaL44CR6Z2Z55qESFRNTOODhOODvOODq-OCteOCpOODiOOCkuOCquODs-ODqeOCpOODs-OBp-Wun-ihjA%2Cdescription_~44OV44Ot44Oz44OI44Ko44Oz44OJ44KS5a2m44KT44Gn44GE44KL44Go44CB44OG44K544OI44Kz44O844OJ44KS5a6f6KGM44GZ44KL5b-F6KaB44GM44KI44GP44GC44KK44G-44GZ44CC5b2T5pmC44CB56eB44Gv5Li744GrQ2hpbmF644Gu44Km44Kn44OW44Oe44K544K~44O844OE44O844Or44Gu44KI44GG44Gq44Kq44Oz44Op44Kk44Oz44OE44O844Or44KS5L2~44Gj44Gm44GE44G-44GX44Gf44CC54--5Zyo44Gv44OV44Ot44Oz44OI44Ko44Oz44OJ5oqA6KGT44KS44G744G857-S5b6X44GX44Gf44Gu44Gn44CB44KI44KK5aSa44GP44Gu5Lq644GM5omL6Lu944Gr44OV44Ot44Oz44OI44Ko44Oz44OJ44OX44Ot44Kw44Op44Of44Oz44Kw44KS5a2m44G544KL44KI44GG44CB44Kq44Oz44Op44Kk44Oz5a6f6KGM44OE44O844Or44KS6Ieq5YiG44Gn5L2c44KL44GT44Go44Gr44GX44G-44GX44Gf44CC5Lul5LiL%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL29ubGluZS1odG1sLXRvb2xzIg%2Cs_I6RIQ5zs9NCLQHJd.png"
"og:image:alt": "【当サイト初公開】静的HTMLツールサイトをオンラインで実行 - 憂いを忘れる一枚"
"og:image:height": "630"
"og:image:type": image/png
"og:image:width": "1200"
"og:title": 【当サイト初公開】静的HTMLツールサイトをオンラインで実行
"twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~44CQ5b2T44K144Kk44OI5Yid5YWs6ZaL44CR6Z2Z55qESFRNTOODhOODvOODq-OCteOCpOODiOOCkuOCquODs-ODqeOCpOODs-OBp-Wun-ihjCAtIOaGguOBhOOCkuW~mOOCjOOCi-S4gOaemg%2Cc_Article%2Ctitle_~44CQ5b2T44K144Kk44OI5Yid5YWs6ZaL44CR6Z2Z55qESFRNTOODhOODvOODq-OCteOCpOODiOOCkuOCquODs-ODqeOCpOODs-OBp-Wun-ihjA%2Cdescription_~44OV44Ot44Oz44OI44Ko44Oz44OJ44KS5a2m44KT44Gn44GE44KL44Go44CB44OG44K544OI44Kz44O844OJ44KS5a6f6KGM44GZ44KL5b-F6KaB44GM44KI44GP44GC44KK44G-44GZ44CC5b2T5pmC44CB56eB44Gv5Li744GrQ2hpbmF644Gu44Km44Kn44OW44Oe44K544K~44O844OE44O844Or44Gu44KI44GG44Gq44Kq44Oz44Op44Kk44Oz44OE44O844Or44KS5L2~44Gj44Gm44GE44G-44GX44Gf44CC54--5Zyo44Gv44OV44Ot44Oz44OI44Ko44Oz44OJ5oqA6KGT44KS44G744G857-S5b6X44GX44Gf44Gu44Gn44CB44KI44KK5aSa44GP44Gu5Lq644GM5omL6Lu944Gr44OV44Ot44Oz44OI44Ko44Oz44OJ44OX44Ot44Kw44Op44Of44Oz44Kw44KS5a2m44G544KL44KI44GG44CB44Kq44Oz44Op44Kk44Oz5a6f6KGM44OE44O844Or44KS6Ieq5YiG44Gn5L2c44KL44GT44Go44Gr44GX44G-44GX44Gf44CC5Lul5LiL%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL29ubGluZS1odG1sLXRvb2xzIg%2Cs_I6RIQ5zs9NCLQHJd.png"
"twitter:image:alt": "【当サイト初公開】静的HTMLツールサイトをオンラインで実行 - 憂いを忘れる一枚"
---
> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)
# **【当サイト初公開】静的HTMLツールサイトをオンラインで実行**
2017.07.18 4,523 0
フロントエンドを学んでいると、テストコードを実行する必要がよくあります。当時、私は主にChinazのウェブマスターツールのようなオンラインツールを使っていました。現在はフロントエンド技術をほぼ習得したので、より多くの人が手軽にフロントエンドプログラミングを学べるよう、オンライン実行ツールを自分で作ることにしました。以下はツールのデモ画像です：
**LOGOについて**：現在のLOGOはその場でデザインしたもので、確かに少しひどいです（笑）。どうか気にしないでください。今後改善していく予定です。
## オンラインツールの特徴
1. **レスポンシブデザイン**
フロントエンドにはBootstrapフレームワークを使用しており、スマートフォン、タブレット、パソコンで快適に表示できます。
2. **コードのリアルタイム実行**
最新のフレームワークを使用してコードを実行するため、従来のツールのようにページを更新して移動する必要がありません。
3. **コードのハイライト表示**
コードハイライト機能を統合することで、学習やデバッグがより便利になります。
4. **エラー通知**
コードエラーをリアルタイムで通知し、問題の迅速な特定と修正をサポートします。
## スタイルと技術スタック
- ページのスタイルには主にBootstrapフレームワークを使用しており、シンプルで拡張しやすくなっています。
- 複数の言語のコードハイライト（HTML、CSS、JavaScript）に対応しています。
- エラー検出機能には、シンプルで効果的なエラーレポートモジュールを統合しています。
今後も機能やインターフェースを継続的に改善していきますので、ぜひご提案やご意見をお寄せください～
## **コメント**
(0)
まだコメントはありません
## **コメントを投稿**
```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ja#website","@type":"WebSite","description":"「憂いを忘れる一枚」は、技術探究と日々の暮らしをテーマにした個人サイトです。Web 開発、バックエンド、DevOps の実践を記録し、ソフトウェアツールやデジタル体験、コードの外で得た見聞と思索を共有します。","inLanguage":"ja-JP","name":"憂いを忘れる一枚","url":"https://www.ikxin.com/ja","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ja/article/online-html-tools#webpage","@type":"WebPage","description":"フロントエンドを学んでいると、テストコードを実行する必要がよくあります。当時、私は主にChinazのウェブマスターツールのようなオンラインツールを使っていました。現在はフロントエンド技術をほぼ習得したので、より多くの人が手軽にフロントエンドプログラミングを学べるよう、オンライン実行ツールを自分で作ることにしました。以下","name":"【当サイト初公開】静的HTMLツールサイトをオンラインで実行","url":"https://www.ikxin.com/ja/article/online-html-tools","isPartOf":{"@id":"https://www.ikxin.com/ja#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ja/article/online-html-tools"]}]}]}
```
## Sitemap
See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.