私は自分の経験で間違いやヒントを書きました。 「悪いアドバイス」などのエラーがある場合、建設的な批判を聞いてうれしいです。 この記事は、初心者がHTMLとCSSを学習することを目的としていますが、専門家がこの資料に慣れるのは興味深いかもしれません。
1. W3Cバリデーター
validator.w3.orgサービスを通じてサイトのHTMLとCSSを確認することをお勧めします。 このサービスはコードをスキャンし、エラーを表示します。例：
- タグは閉じられていません。
- リンク内の推奨文字ではありません。
- 推奨タグは使用されていません。
- 必須属性が指定されていません
- そしてもう一つ。
2. UTF-8形式のレイアウト
ページレイアウトの場合、ファイルエンコーディングが
UTF-8（BOMなし）に設定されていることを確認する必要があります。 各テキストエディタは独自のエンコーディングを設定します。
UTF-8形式のファイルでは、非標準文字（たとえば、さまざまな言語の文字、通貨記号など）を使用できます。
また、ページがUTF-8エンコーディングで開くことをブラウザに通知する必要があります。 これは、以下のタグを介して行われます。
<meta charset="utf-8">
3.複数の要素の同一のID
HTMLコードのid属性値は繰り返さないでください。
<div id="block"></div> <div id="block"></div> <div id="block-1"></div> <div id="block-2"></div>
4.スプライト
複数の小さな画像を1つのファイルに結合することをお勧めします（このようなファイルはスプライトと呼ばれます）。 これにより、サイトへのリクエストの数が減り、ページの読み込み速度が向上します。
スプライトの例
JSFiddleの例現在では、スプライトの代わりにアイコンフォントを使用することも一般的です。 つまり 文字の代わりに、歯車のアイコン、絵文字、その他のアイコンが表示されます。 例としては、Twitter Bootstrapで使用されるグリフィコンアイコンがあります。
スプライトに対するフォントの利点は、アイコンのサイズを変更してもサイズを小さくしても品質が維持されることです。 しかし、欠点は、アイコンで複数の色を使用できないことです。
5.多くのセレクター
3つ以上のセレクターを使用することはお勧めできません。 これはサイトのパフォーマンスに影響します。
.page .item .title a {} .page .item a {}
ブラウザは右から左にCSSを読み取ります。 つまり 上記のコードでは、最初にページ上のすべてのリンクが選択され、次に.item要素内にあるリンクが選択されます。
可能であれば、選択を1つのセレクターに減らすことをお勧めします。
.form-submit a {} .form-submit-link {}
6. HTMLのスタイル
HTMLは、情報（テキスト、画像）を表示するように設計されています。 コンテンツデザイン（サイズ変更、色、フォント）はCSSで行われます。
<p style="color: red"> </p> <p class="error"> </p>
7.無効なクラス名
多くのタイプセットコーダーは、テキストを緑にする必要がある場合、.greenクラスをアタッチします。
<p class="message green"> </p>
これは間違っている デザインを変更すると、多くの色が変更される可能性があります。たとえば、メッセージテキストは緑ではなく青で表示されます。 次に、.greenクラスを持つすべてのタグを探し、それを.blueに置き換える必要があります。
このような状況を避けるために、色の変更、テキストの整列、大文字小文字の変更にクラスを使用することはお勧めしません。 要素自体（ヘッダー、地下室、メッセージ）に名前を付け、独自のスタイルを適用する必要があります。
<p class="message green"> </p> <p class="message message-success"> </p>
8.小数値のピクセル
一部のブラウザでは、「1.5px」などの小数値でピクセルを指定できます。 しかし、これは間違っています、なぜなら ピクセルは分割できない単位です。 「1.5px」の代わりに「1.5em」を使用することをお勧めします。
p { letter-spacing: 1.5px; letter-spacing: .005em; }
9. idの代わりにクラスを使用する
idではなくクラスで選択することをお勧めします。 idを持つセレクターはクラスよりも重みがあり、それらを再定義することは困難です。
#modal a { color: blue; } .modal-header a { color: #333; } #modal .modal-header a { color: #333; }
使用！重要も推奨されていません。 その重みはid属性の重みよりも大きく、再定義することも困難です。
10.メニュー
メニューはリストとして設計する必要があります。
<p><a href="#"></a> <a href="#"></a> <a href="#"> </a></p> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"> </a></li> </ul>
11.写真にALTがありません
タグでは、alt属性を指定する必要があります（空にすることもできます）。
<img src="pic.jpg"> <img src="pic.jpg" alt=""> <img src="pic.jpg" alt="">
12.タグ<h1>
ページの<h1>タグには1つの見出しのみを含める必要があります。 基本的に、このタグはページの名前です。
13.転写
すべての要素の名前は英語の翻訳で書かれている必要があります。 単語の英語の綴りがわからなくても、翻訳できる無料サービスがたくさんあります。 転写によって要素の名前が見つかると、それは専門家ではないように見えます。
.tovar {} .stranica {} .zapros {} .product {} .page {} .query {}
14. Clearfix
clearfixを一言で言うのは難しいですが、多くのレイアウトデザイナーが間違いを犯している点を指摘します。
.clearfixクラスは親タグで指定する必要があり、その隣には配置しないでください。
<div> <div class="float-left"></div> <div class="float-right"></div> <div class="clearfix"></div> </div> <div class="clearfix"> <div class="float-left"></div> <div class="float-right"></div> </div>
15. HTML-プログラミング言語
HTMLの初心者の一部は、HTMLはプログラミング言語だと考えています。 実際、HTMLはプログラミング言語ではなく、Microsoft Wordと比較できます。 たとえば、テキストを太字にするには、Wordではボタンをクリックする必要があり、HTMLではコードを登録する必要があります。 つまり HTMLは、テキスト、画像、表、その他の要素を追加するツールにすぎません。