DIV+CSS命名規則の詳細な説明はSEO最適化に役立ちます

1. CSSファイルの命名規則

提案: 文字、_、-、数字を使用します。文字で始まる必要があり、純粋な数字は使用できません。開発後のスタイル名の管理を容易にするために、スタイルが何に属しているかを同僚が一目で理解できるように、意味のある単語または略語を使用して名前を付けてください。これにより、スタイルの検索にかかる時間が節約されます。例:
ヘッダースタイルは header です。ヘッダーの左側には header_left または header_l を使用できます。列構造の場合は、box_1of3 (3 列のうちの最初の列)、box_2of3 (3 列のうちの 2 番目の列)、box_3of3 (3 列のうちの 3 番目の列) を使用できます。他の例を 1 つずつ示すことはしません。上記のルールに従って名前を付けるだけです。

便宜上、よく使われる命名語をいくつか紹介します。(今後は、作業中に蓄積した言葉をみんなで少しずつ共有することで、みんなの命名がより統一され、同じ意味の単語が複数存在する状況がなくなります。)

全体的なスタイル: global.css;
構造レイアウト: layout.css;
フォントスタイル: font.css;
リンクスタイル: link.css;
印刷スタイル: print.css;

容器: コンテナ/ボックス
ヘッダー: ヘッダー
メインナビゲーション: mainNav
サブナビゲーション: subNav
トップナビゲーション: topNav
ウェブサイトのロゴ: ロゴ
ビッグ広告: バナー
ページの中央: mainBody
下部: フッター
メニュー: メニュー
メニューコンテンツ: menuContent
サブメニュー: サブメニュー
サブメニューコンテンツ: subMenuContent
検索: 検索
検索キーワード: キーワード
検索範囲: 範囲
タグテキスト: tagTitle
タグコンテンツ: tagContent
現在のタグ: tagCurrent/currentTag
タイトル: タイトル
コンテンツ: コンテンツ
リスト: リスト
現在の場所: currentPath
サイドバー: サイドバー
アイコン: アイコン
注記：
ログイン: ログイン
登録: 登録
列定義: column_1of3 (3 つの列のうちの最初の列)
column_2of3 (3列のうちの2列目)
column_3of3 (3列のうちの3番目)

2. idとclassの使い方と違い

スタイルシートでスタイルを定義するときは、次のように ID またはクラスのいずれかを定義できることはわかっています。

IDメソッド: #test{color:#333333}、ページ内の<div>コンテンツ<div>を呼び出す
CLASSメソッド: .test{color:#333333}、ページ内の<div class="test">コンテンツ<div>を呼び出す
ID はページ上で 1 回しか使用できませんが、クラスは複数回参照できます。
ページに複数の同一 ID を使用しましたが、IE では正常に表示されました。ID とクラスに違いはないようです。複数の同一 ID を使用すると、何か影響がありますか?
ページ上に同一の ID が複数存在すると、W3 検証に失敗します。
ページの表示に関しては、現在のブラウザではこの間違いを犯すことが可能であり、複数の同一 ID を使用すると「一般的に」正常に表示されます。しかし、JavaScript を使用して id を通じてこの div を制御する必要がある場合、エラーが発生します。
ID は、名前と同じように、異なる構造やコンテンツを区別するために使用されるラベルです。部屋に同じ名前の人が 2 人いると、混乱が生じます。
クラスは、衣服と同じように、あらゆる構造やコンテンツに適用できるスタイルです。
概念的には、それらは異なります。
id メソッドは、まず構造/コンテンツを見つけて、そのスタイルを定義します。一方、class メソッドは、まずスタイルを定義し、それを複数の構造/コンテンツに適用します。
つまり、XHML+CSS を書くときは、構造的な配置の場合は id を使用し、そうでない場合は class を使用することをお勧めします (これにより、非構造的な配置の div ブロックの id をプログラマー自身が定義できるようになります)。
Web 標準では、誰もが厳格な習慣に従ってコードを記述することが期待されています。

3. CSSの省略形を使用する

略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。よく使用される CSS 略語の主なルールは次のとおりです。

色
16進数のカラー値の2桁ごとの値が同じ場合は、次のように半分に短縮できます。
#000000 は #000 と省略できます。#336699 は #369 と省略できます。
ボックスのサイズは通常、次の 4 つの方法で表記されます。
property:value1; は、すべてのエッジの値が value1 であることを意味します。
property:value1 value2; は、上と下の値がvalue1、右と左の値がvalue2であることを意味します。
property:value1 value2 value3; は、上の値がvalue1、右と左の値がvalue2、下の値がvalue3であることを意味します。
プロパティ:値1 値2 値3 値4; 4つの値はそれぞれ上、右、下、左を表します
覚えやすい方法は、時計回りに、上、右、下、左と覚えることです。マージンとパディングの具体的な適用例は次のとおりです。
マージン:1em 0 2em 0.5em;
国境
境界線のプロパティは次のとおりです。
境界線の幅:1px;
境界線スタイル:solid;
境界線の色:#000;
これは 1 つの文に省略できます: border:1px solid #000;
構文は border:width style color; です。
背景

背景のプロパティは次のとおりです。

背景画像:url(background.gif);
背景繰り返し:繰り返しなし;
背景添付ファイル:固定;
背景位置:0 0;
これは 1 つの文に省略できます: background:#f00 url(background.gif) no-repeat fixed 0 0;
構文は、background:color image repeat attachment position; です。
これらのプロパティ値の 1 つ以上を省略できます。省略した場合、プロパティ値には次のブラウザのデフォルト値が使用されます。
色: 透明
画像: なし
繰り返し: 繰り返し
添付ファイル: スクロール
位置: 0% 0%
フォント

フォントのプロパティは次のとおりです。

フォントスタイル:斜体;
フォントバリアント:small-caps;
フォントの太さ:太字;
フォントサイズ:1em;
行の高さ:140%;
フォントファミリー:"Lucida Grande"、サンセリフ;
これは文中に省略できます: font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

フォント定義を省略する場合は、少なくとも font-size と font-family の 2 つの値を定義する必要があることに注意してください。

リスト

デフォルトのドットとシリアル番号をキャンセルするには、list-style:none; と記述します。

リストのプロパティは次のとおりです。

リストスタイルタイプ:正方形;
リストスタイルの位置:内側;
リストスタイルの画像:url(image.gif);

これは 1 つの文に短縮できます: list-style:square inside url(image.gif);

4. 値が0でない限り、単位を明示的に定義します。

寸法の単位を定義し忘れることは、CSS 初心者がよく犯す間違いです。 HTML では width=100 と書くだけですが、CSS では width:100px width:100em のように正確な単位を指定する必要があります。単位を未定義のままにできる例外は、行の高さとゼロ値の 2 つだけです。これ以外、他のすべての値の後には単位を付ける必要があります。値と単位の間にスペースを入れないように注意してください。

5. 大文字と小文字の区別

XHTML で CSS を使用する場合、CSS で定義された要素名は大文字と小文字が区別されます。このエラーを回避するには、すべての定義名に小文字を使用することをお勧めします。
HTML と XHTML では、class と id の値も大文字と小文字が区別されます。大文字と小文字を混在させて使用する必要がある場合は、CSS 定義が XHTML のタグと一致していることを確認してください。

6. クラスとIDの前の要素制限を解除する

要素のクラスまたは ID を定義する場合、ID はページ内で一意であり、クラスはページ内で複数回使用できるため、先行する要素修飾子を省略できます。特定の要素に自分自身を制限しても意味がありません。例えば：
div#id1{} は #id1{} と書くことができます
これにより、バイトがいくらか節約されます。

7. デフォルト値

通常、padding と margin のデフォルト値は 0 で、background-color のデフォルト値は transparent です。ただし、デフォルト値はブラウザによって異なる場合があります。競合が心配な場合は、次のようにスタイルシートの先頭ですべての要素のマージンとパディングの値を 0 に定義できます。

* { 
パディング:0; 
マージン:0 
}

または、要素に対して定義します。

ul、li、div、span { 
パディング:0; 
マージン:0 
}

8. CSSの優先順位

インラインスタイル > ID セレクター > クラス、疑似クラス、属性セレクター > タイプ、疑似要素

説明する：

*インラインスタイル: <div style="color:red;"></div> などの要素のスタイル属性。ここで、color:red; はインラインスタイルです。
*IDセレクター: <div></div>などの要素のid属性はIDセレクター#contentを使用できます。
* 疑似クラス: 最も一般的なのは、a:link、a:visited などのアンカー (a) 疑似クラスです。
* 属性セレクター: たとえば、div[class=demo]にはクラスdemoのdiv要素が含まれます。
*タイプセレクター: HTMLタグの選択。例: div .demo、div要素にはクラスdemoの要素が含まれます
*疑似要素セレクター: たとえば、div:first-letter は、div 要素の下の最初の単語です。

9. 継承された値を再定義する必要がない

CSS では、子要素は色やフォントなどの親要素のプロパティ値を自動的に継承します。親要素で定義されたものは、親要素のプロパティ値を使用せずに現在の要素のスタイルを変更する目的でない限り、繰り返し定義することなく子要素に直接継承できます。ただし、ブラウザが定義をいくつかのデフォルト値で上書きする可能性があることに注意してください。

10. 複数の CSS スタイル定義、属性の追加、重複の最終優先原則

タグは複数のクラスを同時に定義することも、同じクラス内で属性を繰り返し定義することもできます。例えば：

まず 2 つのスタイルを定義しましょう。

.one{width:200px;background:url(1.jpg) no-repeat left top;} 
.two{border:10px solid #000; background:url(2.jpg) no-repeat left top;}

ページコードでは、次のように呼び出すことができます。

<div class="one" two></div>

では、この div スタイルの最終的な表示効果は何でしょうか? ?複製の基準としてどれを使用すべきでしょうか? ?

<div class="one" two></div>に適用されたスタイルは次のとおりです。

幅:200px; 
境界線:10px実線 #000; 
背景:url(2.jpg) 繰り返しなし 左上;

なぜなら、2つ以上のスタイルが適用されている場合、ブラウザによって適用されるスタイルは、属性の追加と繰り返しの最後の優先順位の原則に基づいています。つまり、2つ以上または繰り返しのスタイル名定義の場合、ブラウザによって適用されるスタイルは順序どおりです。繰り返しの属性値が定義されている場合は、最後に定義されたものが優先されます。2つ以上のスタイル名が適用されている場合、繰り返していない属性値が追加され、繰り返しの属性値は最後のものに基づきます。ここで注意すべき点は、スタイルの順序はページに適用された名前の順序ではなく、スタイルシート内のスタイルの順序に基づいているということです。

11. 子孫セレクターの使用

子セレクターの使用は、その効率に影響を与える要素の 1 つです。子セレクターを使用すると、多くのクラス定義を保存できます。次のコードを見てみましょう。

<div> 
<ul> 
<li class="subnavitem"> <a href=http://duote.com/# class="subnavitem">アイテム 1</a></li>> 
<li class="subnavitemselected"> <a href="http://duote.com/#" class="subnavitemselected"> アイテム 1</a> </li> 
<li class="subnavitem"> <a href="http://duote.com/#" class="subnavitem"> アイテム 1</a> </li> 
</ul> 
</div>

このコードの CSS 定義は次のとおりです。

div#サブナビゲーションul { } 
div#サブナビゲーション ul li.subnavitem { } 
div#subnav ul li.subnavitem a.subnavitem { } 
div#subnav ul li.subnavitemselected { } 
div#subnav ul li.subnavitemselected a.subnavitemselected { }

上記のコードを次のコードに置き換えることができます

<ul id=”サブナビ”> 
<li> <a href="http://duote.com/#>" 項目 1</a> </li> 
<li class="sel"> <a href="http:/duote.com/#>" 項目 1</a> </li> 
<li> <a href="http://duote.com/#>" 項目 1</a> </li> 
</ul>

スタイルの定義は次のとおりです。

#サブナビゲーション { } 
#サブナビゲーション li { } 
#サブナビゲーション { } 
#サブナビゲーション.sel{} 
#サブナビゲーション.sel a { }

子セレクターを使用すると、コードと CSS がより簡潔になり、読みやすくなります。

コンテナー内に同一の要素が複数あり、それらの要素のスタイルが異なる場合は、このメソッドの使用を避け、次のような異なるクラスを使用してください。

<ul class="one"><li></li></ul> 
<ul class="tow"><li></li></ul>

12. 背景画像のパスを引用符で囲む必要はありません

バイトを節約するために、背景画像のパスを引用符で囲まないことをお勧めします。引用符は必須ではありません。例えば：

背景画像:url("画像 
マージン:0 自動; 
}

ただし、IE5/Win ではこの定義を正しく表示できません。これを解決するために、text-align 属性を使用するという非常に便利なトリックを使用します。このような：

体 { 
テキスト配置:中央; 
} 
＃包む { 
幅:760ピクセル; 
マージン:0 自動; 
テキスト配置:左; 
}

最初の body text-align:center; ルールは、IE5/Win で body のすべての要素が中央揃えになることを定義します (他のブラウザではテキストのみが中央揃えになります)。2 番目の text-align:left; は、#warp 内のテキストを左揃えにします。

13. CSSをインポートして非表示にする

古いブラウザは CSS をサポートしていないため、@import テクニックを使用して CSS を非表示にするのが一般的な方法です。例えば：

@import url(main.css);

しかし、この方法は IE4 では機能しないため、しばらく頭を悩ませていました。後で私はこう書きました:

@import main.css;

この方法では、IE4 でも CSS を非表示にでき、5 バイトを節約できます。 @import 構文の詳細な説明については、Centricle の CSS フィルターチャートを参照してください。

14. CSSハック

場合によっては、IE ブラウザのバグに対して特別なルールを定義する必要があります。ここでは CSS テクニック (ハック) が多すぎます。私はそのうちの 2 つだけを使用します。Microsoft が今後の IE7 ベータバージョンで CSS をより適切にサポートするかどうかに関係なく、これら 2 つの方法が最も安全です。

1. 注釈方法

(a) IE で CSS 定義を非表示にするには、子セレクターを使用します。

html>本文p { 
}

(b) 次の構文は IE でのみ理解されます (他のブラウザでは非表示になります)

* html p { 
}

* html p { 
宣言 
}

(d) 次の構文は IE7 でのみ認識されます (他のブラウザでは非表示になります)

*+ html p { 
}

2. 条件付きコメントの方法

CSS Hacks よりも実績があると思われるもう 1 つのアプローチは、Microsoft 独自の条件付きコメントを使用することです。この方法を使用すると、メインスタイルシートの定義に影響を与えずに、IE のいくつかのスタイルを個別に定義できます。このような：

<!--[IEの場合]> 
<link rel=stylesheet/css href="http://www.duote.com/style/ie.css" /> 
<![endif]-->

オンラインで見つけられる CSS ハックは他にもたくさんありますが、その多くは w3c 標準を満たしていません。上記のハックに基づいて、IE6、IE7、FF を区別でき、w3c 標準を満たすスタイルを作成しました。コードは次のとおりです。

.classname {幅:90px!重要;幅:100px;} 
*+html .classname {幅:95px!重要;}

このように記述すると、IE6 では幅が 100px、IE7 では 95px、Firefox では 90px になります。

15. デバッグのヒント: レイヤーの大きさはどれくらいですか?

CSS エラーをデバッグするときは、タイプセッターのように CSS コードを 1 行ずつ分析する必要があります。通常、問題のあるレイヤーに背景色を定義して、そのレイヤーが占めるスペースが明確になるようにします。一般的に受け入れられる border の使用を提案する人もいますが、問題は border によって要素のサイズが大きくなる場合があり、border-top と border-bottom によって垂直マージンの値が破壊されるため、background を使用する方が安全であるということです。
問題を引き起こすことが多い別のプロパティはアウトラインです。アウトラインは境界線のように見えますが、要素のサイズや位置には影響しません。アウトラインプロパティをサポートしているブラウザはごくわずかで、私が知っているのは Safari、OmniWeb、Opera だけです。

16. CSSコードの書き方

CSS コードを書くとき、インデント、改行、スペースについては人それぞれ独自の書き方があります。継続的に練習した結果、私は次のような書き方を採用することにしました。

.クラス名 { 
幅:100ピクセル; 
}

共同定義を使用する場合、通常、各セレクターを独自の行に配置して、CSS ファイル内で見つけやすくします。最後のセレクターと中括弧 { の間にスペースを入れ、各定義を別々の行に記述します。セミコロンは、スペースを入れずにプロパティ値の直後に記述します。
通常、各属性値の後にセミコロンを付けます。ルールでは最後の属性値の後にセミコロンを付けなくてもかまいませんが、新しいスタイルを追加するときにセミコロンを付け忘れてエラーが発生する可能性があるため、すべて追加することをお勧めします。
最後に、閉じ中括弧 } を独自の行に配置します。スペースと改行は読みやすさを向上させます。

要約する

上記はエディターが紹介したDIV+CSSの命名規則であり、SEO最適化の実装方法に役立ちます。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: Vue 条件付きレンダリング v-if と v-show

>>: MySQL が「operate_time」エラーのデフォルト値が無効であると報告する問題を解決する