DIV+CSS Web ページでよく使用される記述仕様layout_html/css_WEB-ITnose

転載元: http://blog.onlygrape.com/divcss-4/257

CSS 命名規則

1.ファイル命名規則

グローバル スタイル: global.css;

フォント スタイル: font.css;
印刷スタイル: print.css;共通クラス/ID命名規則

Header: header
Content: content
Container:container

Footer: footer

Copyright: copyright

Navigation: menu

Main Navigation: mainMenu
Sub-navigation: subMenu
Logo: logo
Slogan: Banner
title:タイトル
sidebar:サイドバー
icon:アイコン
note:メモ
search:検索
ボタン:btn
login:ログイン
link:リンク
情報ボックス:管理
...

よく使われるクラスの名前付けをしてみる一般的な英単語を標準として使用し、理解しやすくし、適切な場所に注釈を付けます。二次クラス/ID の命名には、複合書き込みモードが採用され、最後の単語の最初の文字は大文字にする必要があります。たとえば、「検索ボックス」は「searchInput」、「検索アイコン」は「searchIcon」、 「検索ボタン」「名前付き」searchBtn

名前の付け方について詳しくは、
http://blog.onlygrape.com/css-div-layout-seo/8

CSSの書き方と仕様

一. 一般的な記述仕様とメソッド

1. DOCTYPE を選択します:

XHTML 1.0 では、次の 3 つの DTD 宣言から選択できます:

Transitional (移行): HTML4 を引き続き使用できるようにする、非常に緩和された要件を持つ DTD .01 ロゴ (ただし、xhtml の記述方法に準拠する必要があります)。完全なコードは次のとおりです:

厳密: 厳密な DTD の場合、
などのプレゼンテーション層の識別子と属性は使用できません。完全なコードは次のとおりです。次のように:

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> ;

Frameset ): フレーム ページ用に特別に設計された DTD。ページにフレームが含まれている場合は、この DTD を使用する必要があります。

理想的な状況はもちろん厳密な DTD ですが、ほとんどの場合、 Web 標準に慣れていないデザイナー たとえば、現在、移行 DTD (XHTML 1.0 Transitional) が理想的な選択肢です (移行 DTD を使用しているこのサイトも含みます)。この DTD を使用すると、

2. 言語と文字セットを指定します:

ブラウザーで正しく解釈され、W3C コード検証に合格するには、すべての XHTML ドキュメントで次のようなエンコード言語を宣言する必要があります。

一般的に使用される言語定義:

標準 XML ドキュメント言語定義:

古いブラウザの言語定義の場合:

文字セットを改善するには、次の使用をお勧めします。 「utf-8」。

3. スタイルシートを呼び出す:

外部スタイルシートを呼び出す:

ページ内メソッド: ページコードの先頭領域にスタイルシートを直接記述します。 例: