月曜日, 11月 16, 2020

HTML_CSS_13 
1文字ミスも致命的なのでエディターは重要

HTMLやCSSファイルにおいて1文字のタイプミスも致命的な結果に繋がります。そのためにHTMLやCSSに対応した専用のエディターを利用することでミスを見付けやすくするのですが、今回はどの程度で画面が崩れるかの簡単なシミュレーションです。なお、ここではWindows環境のVisual Studio Codeを利用して居ますが対応しているエディターならどれも一緒です。ただし表示される色はエディターごとに異なります。以下がフリーで高性能なエディターの一部ですが、プログラムサイズが大きいので、サイズが小さくてフットワークの良いエディタはネット上で「フリーのテキストエディタ」で検索すると色々と紹介されています。

Visual Studio Code

Atom

Brackets


今回のデータ構成は上の様になっています。

上は、index.htmlを表示したノーマル状態です。

index.htmlの一部

rule.cssの一部

main_box冒頭の「<」を全角文字にミスタイプすると・・・

main_boxのサイズが狂ってしまいます。

main_boxの名称をタイプミスすると・・・

main_boxのサイズが狂ってしまいます。

タイトル画像の位置を指定する際にフォルダー名を忘れてしまったら・・・

タイトル画像は表示されません。

rule.cssでmain_boxのmarginスペルを間違えたら・・・

main_boxの位置は左上に固定されてしまいます。
このように1モドのミスで画面が壊れてしまうのでタイピングは可能な限りコピー&ペーストをかつようします。また、エディーでは正しく処理されているか否かで表示色が異なるのでミスを発見しやすくなります。