HTML+CSS 命名規則の概要

HTML+CSS の命名規則

多くのコンテンツを含む HTML ページでは、多くの異なるフレームをデザインし、これらの異なるフレームとコンテンツを分類し、対応する名前を付ける必要があります。 Web ページがよりわかりやすくなり、仕事にも便利になります。 HTML ファイルをデザインする初心者の多くは、自分の考えに基づいて簡単な名前を付けるだけかもしれませんが、やみくもにランダムな名前を付けると、チーム メンバーが理解しにくくなるだけでなく、ラベルがわかりにくくなります。コードのメンテナンスが非常に困難になり、管理上非常に不利になります。したがって、Web サイト全体または個別の HTML ページをデザインするときは、適切な命名規則を設ける必要があります。この記事では主にCSSの命名ルールについて説明しますが、これにはHTMLタグの命名も含まれます。

ファイル名は英語の文字で始まる必要があります。通常の命名規則では、コンテンツの分類とフレームの種類に応じて名前を付けます。例: div id="nav" (この div がナビゲーション バーであることを意味します)、すべての単語は小文字を使用する必要があり、名前には数字または下線を使用できます。例: div="main_piclist" (メイン コンテンツの下の画像リストを示します)、div= "nav_bg.jpg" (ナビゲーション バーの背景画像を示します) を使用することもできます。たとえば、div="main-left" (左側のコンテンツのレイアウトを示します) のように、ダッシュで名前を接続することもできます。名前は、漢字の使用を避け、読んで理解できる場合を除き、最も理解しやすい意味を実現するために最小限の文字を使用する必要があります。そうでない場合は、省略しないようにしてください。

HTMLタグの命名/CSS標準化された命名リスト

ページ構造の命名

1. page: ページ全体を表し、最外層に使用されます。

2. wrap: コート、すべての要素をまとめてラップする周辺パッケージ、最外層に使用

3. wrapper: ページ周辺機器コントロール全体のレイアウト幅、最外層に使用

4. container: コンテナ全体、最外層に使用されます

5. head、header: ヘッダー領域、ヘッダーに使用されます

6. nav: ナビゲーション バー

7. content: content、Web ページで使用される、Web サイトで最も重要なコンテンツ領域 Central body

8. main: 中央の本文コンテンツに使用される、Web サイトのメイン領域 (最も重要な位置を表す)

9. column: 列

10. sidebar: サイドバー

11. footer: フッター、フッター。 Web サイト上の一部の追加情報配置領域 (または名前付き著作権) は下部で使用されます

ナビゲーションの名前付け

1. nav、navbar、navigation、nav-wrapper: 水平ナビゲーションを表すナビゲーション バーまたはナビゲーション パッケージ

2. topnav: トップナビゲーション

3. mainbav: メインナビゲーション

4. subnav: サブナビゲーション

5. sidebar: サイドナビゲーション

6. leftsidebar またはsidebar_a: 左側のナビゲーション

7. 右バーまたはSidebar_b: 右ナビゲーション

8. title: タイトル

9. summary: 概要/li>

10. menu: メニュー。このエリアには一般的なリンクとメニューが含まれています

11. submenu: サブメニュー

12. drop: ドロップダウン

13. dorpmenu: ドロップダウン メニュー

14. links: リンク メニュー

関数の名前

1. ロゴ:ウェブサイトのロゴをマークします

2. banner: スローガン、広告バナー、トップ広告バナー

3. login: ログイン、(例: ログインフォーム: form-login)

4. loginbar: ログインバー

5. regsiter :Register

6. ツール、ツールバー: ツールバー

7. search: 検索

8. searchbar: 検索バー

9. searchlnput: 検索入力ボックス

10. shop: 現在の

を示すリボン

11. icon: 小さなアイコン

12. label: 商標

13. homepage: ホームページ

14. subpage: セカンダリ ページ サブページ

15. hot: 注目のホット スポット

16. list: 記事リスト (例: ニュース リスト: list-news)

17. scroll: スクロール

18. tab: タグ

19. sitemap: サイトマップ

20. msg or message: プロンプトメッセージ

21. current: 現在の

22. joinus: 参加する

23. status: ステータス

24. btn: ボタン (たとえば、検索ボタンは btn-search のように記述できます)

25. tips: ヒント

26. note: メモ

27. ギルド: ガイド

28. arr、矢印: 矢印をマーク

29. サービス: サービス

30. ブレッドクラム: (ページの場所を示すナビゲーション プロンプト)

31. ダウンロード: ダウンロード

32. 投票: 投票

OSiteinfo: ウェブサイト情報
Partner: パートナー
Link、Friendlink: Friendship Links
Copyright: 著作権情報
Siteinfocredits: Reputation
Siteinfolegal: 法的情報

CSS スタイルの名前付け

1. 配置スタイルの名前付け: left (左側のコンテンツ)、center (中央のコンテンツ)、right (右側のコンテンツ) など

2. 色の英語の名前付け: red (赤)、 green (緑)、 yellow (黄)、または border_red (赤の境界線) など

3. カラーコードの名前: f00 (赤)、ff0 (黄)、f90 (オレンジ) など。テキストサイズの名前: font12px (フォント 12 ピクセル)、font16px (フォント 16 ピクセル) など

4. ページ行の名前: line_x (水平線)、line_y (垂直線) または line_red (赤い線)、line_black (黒) line)

5. 写真アイコンの名前: pic_1.jpg、pic_2.jpg または ico_1.gif、ico_2.gif

6. ページ広告の名前: ad_01、ad_02

7. 背景フレームの名前: nav_bg (背景画像を表します)ナビゲーション バーの位置)、tool_bg (ツールバーの背景画像の位置を表します)

8. CSS スタイル シートの名前付け

index.css: ホームページ用に別のスタイルを作成します

1. head.css: ヘッド スタイル、複数のページ ヘッド デザイン スタイルを同時に一貫して使用できます。

2. base.css: 共有スタイル。

3. style.css: 独立したページで使用されるスタイル ファイル。

4. global.css: ページスタイルの基礎、グローバルパブリックスタイル。ページに含める必要があります。

5. layout.css: レイアウト、レイアウトスタイル、多くの一般的なタイプがある場合に使用され、一般的にホームページページと製品ページで使用されます

6. module.css: モジュール、製品ページに使用され、他のページでも使用できますスタイルと組み合わせて使用​​します。

7. master.css: メインスタイルシート

8. columns.css: 列スタイル

9. 主題.css: メインスタイル

10. forms.css: フォームスタイル

11. mend.c : Patch、上記のスタイルをベースにしたプライベート パッチ。

以上がHTML+CSS 命名規則の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。