HTMLやCSSファイルにおいて1文字のタイプミスも致命的な結果に繋がります。そのためにHTMLやCSSに対応した専用のエディターを利用することでミスを見付けやすくするのですが、今回はどの程度で画面が崩れるかの簡単なシミュレーションです。なお、ここではWindows環境のVisual Studio Codeを利用して居ますが対応しているエディターならどれも一緒です。ただし表示される色はエディターごとに異なります。以下がフリーで高性能なエディターの一部ですが、プログラムサイズが大きいので、サイズが小さくてフットワークの良いエディタはネット上で「フリーのテキストエディタ」で検索すると色々と紹介されています。
Brackets（2021/09/01にサポートが終了しています）
今回のデータ構成は上の様になっています。
上は、index.htmlを表示したノーマル状態です。
index.htmlの一部
※タイプミスがあります。
誤<html lang="jp"> 正<html lang="ja">
rule.cssの一部
main_box冒頭の「<」を全角文字にミスタイプすると・・・
※タイプミスがあります。
誤<html lang="jp"> 正<html lang="ja">
main_boxのサイズが狂ってしまいます。
main_boxの名称をタイプミスすると・・・
※タイプミスがあります。
誤<html lang="jp"> 正<html lang="ja">
main_boxのサイズが狂ってしまいます。
タイトル画像の位置を指定する際にフォルダー名を忘れてしまったら・・・
※タイプミスがあります。
誤<html lang="jp"> 正<html lang="ja">
タイトル画像は表示されません。
rule.cssでmain_boxのmarginスペルを間違えたら・・・
main_boxの位置は左上に固定されてしまいます。
このように1モドのミスで画面が壊れてしまうのでタイピングは可能な限りコピー&ペーストをかつようします。また、エディーでは正しく処理されているか否かで表示色が異なるのでミスを発見しやすくなります。
