CSS クラスと ID の一般的な命名規則

ページの公開名:

#wrapper - ページの外側の端が全体のレイアウト幅を制御します
#container または #content - コンテナ、最外層に使用される
#レイアウト - - レイアウト
#head、#header - ヘッダーセクション
#foot、#footer - フッターセクション
#nav - - メインナビゲーション
#subnav - - セカンダリナビゲーション
#メニュー - - メニュー
#サブメニュー - - サブメニュー
#サイドバー - - サイドバー
#sidebar_a、#sidebar_b - 左または右のサイドバー
#main - ページの本体
#タグ - - タグ
#msg、#message - - プロンプトメッセージ
#ヒント - - ヒント
#投票 - - 投票
#friendlink - - 友情リンク
#title - - タイトル
#要約 - - 要約
#loginbar - - ログインバー
#searchInput - - 検索入力ボックス
#hot - - ホットなホットスポット
#検索 - - 検索
#search_output - - 検索出力は検索結果に似ています
#searchBar - - 検索バー
#search_results - - 検索結果
#copyright - - 著作権情報
#ブランディング - - ブランディング
#logo - - ウェブサイトのロゴ
#siteinfo - - サイト情報
#siteinfo法務 - - 法的通知
#siteinfoクレジット - - クレジット
#joinus - 参加しましょう
#パートナー - - パートナー
#サービス - - サービス
#regsiter - - 登録
arr/矢印 - - 矢印
#ギルド - - ガイド
#サイトマップ - - サイトマップ
#リスト - - リスト
#homeepage - - ホーム
#subpage - - 第 2 レベルのサブページ
#tool，#toolbar - - ツールバー
#drop - - ドロップダウン
#dorpmenu - - ドロップダウンメニュー
#ステータス - - ステータス
#スクロール - - スクロール
.tab - - タブ
.left,.right,.center - 中央、左、右
.news - - ニュース
.download - - ダウンロード
.banner - 広告バナー（トップバナー）
電子商取引関連:
.products - - 製品
.products_prices - 製品価格
.products_description - 製品の説明
.products_review - - 製品レビュー
.editor_review - - 編集者のレビュー
.news_release - - 最新リリース
.publisher - - プロデューサー
.スクリーンショット - - サムネイル
.faqs - よくある質問
.keyword - - キーワード
.blog - - ブログ
.forum - - フォーラム

基本的な命名:

ラップ - 最外層用
ヘッダー - - ヘッダー用
メインコンテンツ - メインコンテンツに使用（中央）
main-left - - 左レイアウト
メイン右 - - 右レイアウト
ナビゲーションバー nav - - Webページメニューナビゲーションバー
コンテンツ - ウェブページの本文に使用されます
フッター - 下部に使用される

CSS ファイルの命名:

master.css、style.css - - メイン
module.css - - モジュール
base.css - - 基本的な共通
layout.css - - レイアウト、レイアウト
themes.css - - テーマ
columns.css - - 列
font.css - - テキスト、フォント
forms.css - - フォーム
mend.css - - パッチ
print.css - - 印刷

命名の提案:

名前が「.」（小文字のピリオド）セレクターにちなんで付けられるか、または「#」（ポンド記号）セレクターにちなんで付けられるかにかかわらず、最終的には、名前付き CSS セレクターが HTML で再利用されることを考慮すると、メイン、重要、特殊、および最も外側のボックスは「#」（ポンド記号）セレクターにちなんで付けられ、その他のボックスは「.」（小文字のピリオド）にちなんで付けられることになります。

CSS クラスと ID のよく使われる命名規則についての記事はこれで終わりです。CSS クラスと ID の命名規則の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML ユーザー登録ページ設定ソースコード

>>: div が contentEditable=true に設定されている場合、コンテンツをリセットした後にカーソルを配置することはできません。