1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】CSSのクラスとidの共通命名規則

2022-01-21 07:34:36

ウェブページの公開ネーミング

  • #wrapper - - ページ周辺はレイアウト全体の幅を制御します。
  • #コンテナまたは#content - - 最外層のコンテナ。
  • #layout - - レイアウト
  • #head, #header - - ヘッダーセクション
  • #foot, #footer - - フッターセクション
  • #nav - - メインナビゲーション
  • #subnav - - セカンダリーナビゲーション
  • #menu - - メニュー
  • #submenu - - サブメニュー
  • #sidebar - - サイドバー
  • #sidebar_a,#sidebar_b - - 左サイドバーまたは右サイドバー
  • #main - - ページの本文です。
  • #tag - - タグ
  • #msg, #message - - プロンプトメッセージ
  • #tips - - ヒントとコツ
  • #vote - - 投票
  • #friendlink - - リンク
  • #title - - タイトル
  • #summary - - 概要
  • #loginbar - - ログインバー
  • #searchInput - - 検索入力ボックス
  • #hot - - ホットスポット
  • #search - - 検索
  • #search_output - - 検索出力と検索結果の類似性
  • #searchBar - - 検索バー
  • #search_results - - 検索結果
  • #copyright - - 著作権情報
  • #ブランディング - - 商標
  • #logo - - ウェブサイトのロゴマーク
  • #siteinfo - - ウェブサイト情報
  • #siteinfoLegal - - 法的な主張
  • #siteinfoCredits - - 信頼性
  • #joinus - - 参加してください
  • #partner - - パートナー
  • #service - - サービス
  • #regsiter - - 登録
  • arr/arrow - - 矢印
  • #guild - - ガイド
  • #sitemap - - サイトマップ
  • #list - - リスト
  • #homeepage - - ホームページ
  • #subpage - - セカンダリページのサブページです。
  • #tool, #toolbar - - ツールバー
  • #drop - - ドロップダウン
  • #dorpmenu - - ドロップダウンメニュー
  • #status - - ステータス
  • #scroll - - スクロール
  • .tab - - タブ
  • .left、.right、.center - - 中央、左、右
  • .news - - ニュース
  • .ダウンロード - - ダウンロード
  • .banner - - バナー(トップバナー)
  • 電子商取引関連。
  • .products - - 製品
  • .products_prices - - 製品価格
  • .products_description - - 製品の説明
  • .products_review - - 製品のレビュー
  • .editor_review - - エディトリアルレビュー
  • .news_release - - 最新の製品
  • .パブリッシャー - - プロデューサー
  • .screenshot - - サムネイル
  • .faqs - - よくある質問です。
  • .keyword - - キーワード
  • .blog - - ブログ
  • .forum - - フォーラム

ベースのネーミング

  • ジャケットラップ - - 一番外側用
  • header ヘッダー - ヘッダー用
  • main - - メインコンテンツ用(中央)。
  • 左サイド main-left - - 左サイドのレイアウトに使用します。
  • 右側メイン-右 - - 右側レイアウト
  • navigation bar nav - - ウェブメニューのナビゲーションバー
  • content - - ページ中段用
  • ボトムフッター - - 最下部で使用されます。

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のclassとidの命名規則については、この記事がすべてです。CSSのclassとidの命名規則については、過去の記事を検索していただくか、引き続き下記の関連記事をご覧ください。