オンラインコードエディタ マニュアル

ブラウザでプログラミング練習ができるオンラインコードエディタの完全ガイド

目次

概要

オンラインコードエディタは、ブラウザ上でHTML、CSS、JavaScriptを編集・実行できるプログラミング学習ツールです。以下の機能を提供します：

  • 3言語対応：HTML、CSS、JavaScriptを同時に編集
  • リアルタイムプレビュー：コードの変更が即座に反映
  • テンプレート機能：8種類のサンプルコードを提供
  • 保存・読み込み：ブラウザにコードを保存・管理
  • シンタックスハイライト：コードの見やすさを向上
オンラインコードエディタに戻る

マニュアルを確認したら、実際にツールを使ってみましょう！

オンラインコードエディタを開く

主な機能

3言語対応

HTML、CSS、JavaScriptを同時に編集できます。言語ごとに専用のエディタが用意されています。

リアルタイムプレビュー

コードの変更が即座にプレビューエリアに反映されます。リアルタイムで結果を確認できます。

テンプレート機能

8種類のサンプルコードを提供。お問い合わせフォーム、ログインフォーム、ボタンサンプルなど。

保存・読み込み

作成したコードをブラウザに保存し、後で読み込むことができます。複数のプロジェクトを管理可能。

コンソール出力

JavaScriptのconsole.log()の出力を確認できます。デバッグや学習に役立ちます。

シンタックスハイライト

CodeMirrorを使用したシンタックスハイライトで、コードの見やすさを向上させています。

基本的な使い方

1
言語を選択

上部の「HTML」「CSS」「JavaScript」から編集したい言語を選択します。

2
コードを編集

左側のエディタにコードを入力・編集します。シンタックスハイライトが適用されます。

3
プレビューを確認

右側のプレビューエリアで結果を確認します。変更は自動的に反映されます。

4
コードを保存

「保存」ボタンでコードをブラウザに保存し、後で読み込むことができます。

言語モード

3つの言語モードで、それぞれ異なる機能を提供します。

HTML モード

Webページの構造を作成します。見出し、段落、画像、リンクなどの要素を配置できます。

<h1>見出し</h1>
<p>段落のテキスト</p>
<img src="image.jpg" alt="画像">
CSS モード

Webページのデザインを整えます。色、サイズ、配置、アニメーションなどを指定できます。

h1 {
  color: blue;
  font-size: 24px;
}
JavaScript モード

Webページに動きや機能を追加します。イベント処理、DOM操作、計算などが可能です。

console.log('Hello World!');
document.getElementById('button').onclick = function() {
  alert('クリックされました！');
};

テンプレート機能

8種類のサンプルコードを提供しています。学習のスタート地点として活用できます。

お問い合わせフォーム

名前、メール、件名、メッセージの入力フィールドを持つフォームです。バリデーション機能も含まれています。

ログインフォーム

メールアドレスとパスワードの入力フィールドを持つログインフォームです。モダンなデザインが特徴です。

シンプルメニュー

基本的なナビゲーションメニューです。ホバー効果とレスポンシブ対応が含まれています。

等倍間隔メニュー

メニュー項目を等間隔に配置したナビゲーションです。均等なレイアウトが特徴です。

ボタンサンプル

8種類のボタンスタイルを紹介しています。プライマリ、セカンダリ、成功、危険など。

アウトラインボタン

枠線のみのボタンスタイルです。ホバー時に背景色が変わるアニメーション効果があります。

アラートサンプル

成功、警告、危険、情報の4種類のアラートメッセージです。色分けで視覚的に区別できます。

アニメーション付きアラート

フェードインアニメーションが付いたアラートです。CSSアニメーションの学習に適しています。

保存・読み込み機能

作成したコードをブラウザに保存し、後で読み込むことができます。複数のプロジェクトを管理できます。

保存機能

1
「保存」ボタンをクリック

現在のHTML、CSS、JavaScriptのコードがブラウザに保存されます。

2
保存完了

保存が完了すると、保存したコードのリストに追加されます。

読み込み機能

1
「保存したコード」ボタンをクリック

保存したコードのリストが表示されます。

2
読み込みたいコードを選択

リストから読み込みたいコードを選択すると、エディタに読み込まれます。

注意：保存されたコードはブラウザのローカルストレージに保存されます。ブラウザのデータを削除すると、保存されたコードも削除されます。

ベストプラクティス

コーディングの基本
  • 適切なインデントを心がける
  • 意味のある変数名・関数名を使用
  • コメントを適切に記述
  • コードの可読性を重視
  • エラーハンドリングを考慮
学習のコツ
  • 小さなステップで学習を進める
  • 実際にコードを書いて試す
  • エラーを恐れずに挑戦する
  • 他の人のコードを参考にする
  • 定期的に復習する

推奨学習順序

1. HTML

Webページの構造を学ぶ

2. CSS

Webページのデザインを学ぶ

3. JavaScript

Webページの動きを学ぶ

使用例

例1：シンプルなWebページ

HTML、CSS、JavaScriptを組み合わせた基本的なWebページ：

HTML:
<h1 id="title">Hello World!</h1>
<button onclick="changeColor()">色を変更</button>

CSS:
#title {
  color: blue;
  font-size: 24px;
}

JavaScript:
function changeColor() {
  document.getElementById('title').style.color = 'red';
}

例2：インタラクティブなフォーム

ユーザーの入力に応じて動的に変化するフォーム：

HTML:
<input type="text" id="name" placeholder="名前を入力">
<div id="greeting"></div>

CSS:
#greeting {
  margin-top: 10px;
  font-weight: bold;
}

JavaScript:
document.getElementById('name').addEventListener('input', function() {
  const name = this.value;
  document.getElementById('greeting').textContent = 
    name ? `こんにちは、${name}さん！` : '';
});

例3：アニメーション効果

CSSアニメーションとJavaScriptを組み合わせた動的な効果：

HTML:
<div id="box">クリックしてください</div>

CSS:
#box {
  width: 100px;
  height: 100px;
  background: blue;
  transition: all 0.3s ease;
}

#box.animated {
  transform: rotate(360deg);
  background: red;
}

JavaScript:
document.getElementById('box').addEventListener('click', function() {
  this.classList.toggle('animated');
});

便利な使い方

テンプレートを活用

8種類のテンプレートから始めることで、学習のスタート地点を明確にできます。

定期的に保存

作業中は定期的に保存して、進捗を失わないようにしましょう。

コンソールを活用

JavaScriptのconsole.log()でデバッグ情報を確認し、学習を進めましょう。

リセット機能

「リセット」ボタンで初期状態に戻り、新しい学習を始めることができます。

トラブルシューティング

プレビューが表示されない場合：

  • HTMLの構文エラーがないか確認してください
  • 「実行」ボタンをクリックして手動で更新してください
  • ブラウザのJavaScriptが有効になっているか確認してください
  • ページを再読み込みしてみてください

保存したコードが読み込めない場合：

  • ブラウザのローカルストレージが有効になっているか確認してください
  • プライベートブラウジングモードでは保存・読み込みができません
  • ブラウザのデータを削除した場合は、保存されたコードも削除されます
  • 別のブラウザでは保存されたコードは共有されません

JavaScriptが動作しない場合：

  • JavaScriptの構文エラーがないか確認してください
  • コンソール出力でエラーメッセージを確認してください
  • HTMLの要素が正しく配置されているか確認してください
  • イベントリスナーが正しく設定されているか確認してください

CSSが適用されない場合：

  • CSSの構文エラーがないか確認してください
  • セレクタが正しく記述されているか確認してください
  • プロパティ名と値が正しいか確認してください
  • CSSの優先順位（詳細度）を確認してください
オンラインコードエディタに戻る

マニュアルを確認したら、実際にツールを使ってみましょう！

オンラインコードエディタを開く

関連ツール

配色確認
Diffツール
JSON整形
URL短縮
タイムゾーン変換
URLエンコード
パスワード生成
すべてのツール