無視する違い
各行の先頭にある字下げ用のタブと半角スペースだけです。字下げの深さが違っても一致として扱います。
入力中のコードの違いを見つける
コード比較・デバッグツール
完成例と確認中のHTML・CSS・JavaScriptを貼り付けると、異なる行と文字を赤く表示します。構文チェックでは、括弧の閉じ忘れに加え、タグ・属性・プロパティ・値のスペル、区切り記号、全角記号を行番号と修正方法付きで確認できます。
2つのコードを入力して比較
左へ正しい完成例、右へ作成中または確認したいコードを入れます。ファイル選択のほか、各入力欄へファイルを直接ドロップできます。ここでは2つの文字列の違いだけを比較します。構文そのものを確認したい場合は、下の「構文のミスをチェック」を利用してください。
HTMLファイルまたは貼り付けたHTMLコードを比較します。
完成例のHTML
比較の基準確認中のHTML
違いを調べる側
HTMLを入力してください。
コードを入力して比較してください
字下げだけの違いは除外し、その他の違いを赤く表示します。
完成例
基準側確認中
確認側区別する違い
全角・半角、大文字・小文字、HTMLのタグと属性、CSSのプロパティと値、JavaScriptの変数名、括弧、引用符、等号などは別の文字として判定します。
結果の見方
赤い文字が異なる部分です。「前の違い」「次の違い」で該当行へ移動し、完成例と左右に見比べられます。
コード比較とは別に確認
構文のミスをチェック
HTML・CSS・JavaScriptのファイルを読み込むか、コードを入力欄へ貼り付けてください。初期設定では、貼り付けたコードと直接ドロップしたファイルの種類を自動判別します。コードを実行せず、閉じ忘れ、全角記号、タグ・属性・プロパティ・値の明らかなスペルミスを調べます。
入力内容またはファイルからHTML・CSS・JavaScriptを自動判別します。判別しにくい短いコードは、種類を手動で固定できます。
確認するコード
選択・直接ドロップ・貼り付け対応コードを入力すると種類を自動判別します。
構文チェックの結果
構文チェックを実行してください。
この機能は学習中の見落としを減らすための補助チェックです。辞典に収録したHTML・CSSの名前とブラウザーの構文解析を利用しますが、文脈により有効になる書き方、将来追加される仕様、JavaScriptの実行時エラーまでは完全に判定できません。コードは実行・自動修正しません。
ブラウザー内のコピーで確認
HTML・CSS・JavaScriptの表示をシミュレーション
フォルダーまたは複数ファイルを読み込み、上に仮想ブラウザー、下に行番号付きコードを表示します。編集内容は読み込んだ実ファイルへ保存されません。
入力したコードは端末内で処理します
このツールはHTML・CSS・JavaScriptを実行したり、自動修正したりせず、2つの文字列の違いと基本的な構文ミスを示します。HTMLのタグや属性はHTML辞典、CSSのプロパティや値はCSS辞典も合わせて確認できます。