ウェブフロントエンドコードを書く際の考慮事項のまとめ

1. HTMLタグの前に次のような文を追加するのが最適です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

このコードは、特定の W3C 標準セットに準拠していることを示します。使用される特定の標準セットは人によって異なります。

この標準を使用する利点は、異なるブラウザ環境での Web サイトのレイアウトの違いを心配する必要がなくなることです。この標準を使用した後、著者はIE8、FF、Safariブラウザ環境でテストしましたが、結果ページの表示は正常でした。さらに、この標準を使用した後、IE 自体のいくつかのバグは発生しなくなったことがわかりました。たとえば、IE の div ボックスの高さがデフォルトでフォントの高さよりも大きくなるというバグは、この標準に従った後では発生しなくなりました。

この標準に従うときに注意すべきことの 1 つは、一部の非標準コードが正しく動作しない可能性があることです。たとえば、JavaScript には roll1right.innerHTML = roll1left.innerHTML; というコードがあります。ここで、roll1right と roll1left は、Web ページ上の 2 つの異なる div の ID です。Web ページは標準を適用しなくても機能しますが、このステートメントには W3C 標準ではバグがあります。その理由は、W3C ではすべての変数に明確な割り当てが必要であるため、このステートメントの前に var roll1right = document.getElementById("roll1right"); というステートメントを追加する必要があります。そうすると、コードが適切に動作します。

2. Web ページで div と table を使用する場合、div と table の境界線、余白、パディングを CSS で 0 に設定できるにもかかわらず、div が正常に表示される一方で、table には一定量のスペースが残ることがわかりました。 W3CSchool を検索したところ、テーブルには cellpadding と cellspacing という 2 つの属性があることがわかりました。cellpadding 属性はセルの端とコンテンツの間のスペースを指定し、cellspacing 属性はセル間のスペースを指定します。そこで、Web ページ上の表の cellpadding プロパティと cellspacing プロパティを 0 に設定しました。確かに、Web ページ上の表の間に隙間はなくなり、問題は解決しました。

<<: CSS の 4 つのインポート方法と優先順位の簡単な分析

>>: HTML の div と span の違い (共通点と相違点)