要旨

この文章は、XHTMLとCSSを用いてWebサイト作成の際のガイドラインを示すものです。
このファイル自体が、ガイドラインに則った、サンプルファイルとして作成されています。

ページの先頭に戻る

制作･運用ガイドライン

目次

仕様

  • 原則としてXHTML1.0 Strictに準拠する。

    要件に応じて、適宜XTHML1.0 Transitionalを用いる。

  • CSS2.1に対応する。
  • 文字コードはUTF-8を採用する。

ブラウザ対応

推奨ブラウザ

  • Internet Explorer 6以降
  • Firefox 2以降
  • Opera 9以降
  • Safari 2以降

これらのブラウザに関して、標準準拠モードを使用する(XHTMLガイドラインDOCTYPE宣言の項を参照)。

過去バージョンのブラウザへの対応

IE4、NN4、MacIE5以前のバージョンには、以下のようにCSSを適用させない措置をとる。

  1. XHTMLファイルにおいて、CSSファイルを読み込むlink要素のmedia属性に複数の値を指定する(NN4対策)。
    <link rel="stylesheet" type="text/css" media="screen, tv" href="import.css" />
  2. 読み込み専用の"import.css"を準備し、本CSSファイルを読み込む@import命令を次のように記述する(IE4対策)。
    @import "style.css";
  3. 上記の@import命令にCSSハックを施す(MacIE5対策)。 
    /* \*/
@import "style.css";
/* */

制作時の注意点

  • Firefoxの最新版で作成する。

    Firefoxでの挙動を基礎として制作する。

  • クロスブラウザで確認する。

    適宜、IE6, 7やOpera、Safariの最新版などで表示をチェックする。
    古いバージョンのブラウザでチェックする必要がある場合は、次のようなWebサービスを利用する。
    Test your web design in different browsers - Browsershots

  • XHTML、CSSの文法をチェックする。

    The W3C Markup Validation Service またはFirefoxの機能拡張HTML Validator を用いる。
    HTML Validatorを用いる場合、アルゴリズムは"併用"を選択する。
    CSSの文法チェックにはW3C CSS 検証サービスを用いると良い。

ページの先頭に戻る

XHTMLガイドライン

目次

基本ルール

XHTML1.0 Strictへの準拠

  • 要素名、属性名には小文字を用いる。
  • 属性値を引用符「"」で囲む。
  • 開始タグ、終了タグをセットにする。終了タグを省略しない。
  • 空要素を" /"で閉じる。
  • 特殊文字を正しく使用する。"&"など。
  • XML名前空間を宣言する。

    通常は、html要素に属性"xmlns="http://www.w3.org/1999/xhtml" "を加えておけばよい。

  • "xml:lang"属性の指定。

    通常は、html要素に"xml:lang="ja" "属性を加えておけばよい。

XHTMLとCSSの住み分け

  • XHTMLには構造を表す要素のみを用いる。
  • 表示の指定はCSSで行う。

    行間を空けるためのbr要素、字間を空けるためのスペース、表示を調整するための内容の無いdiv要素などは不適切である。

xml宣言は取り除く。

一部ブラウザが後方互換モードになってしまうため、xml宣言は行わない。
同様の理由のため、DOCTYPE宣言の前には、コメントを含めいかなる文字も記述しない。

DOCTYPE宣言

DOCTYPE宣言は、ファイルの先頭に記述する。

  • Strictの場合

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

  • Transitionalの場合

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

書式(改行、インデント、コメント)

  • 内容が一行に収まる場合は開始タグの後で改行しない。

    内容が一行(80文字程度)に収まる場合は開始タグの後で改行しない(h、p、liタグなど)。 これ以外の全ての要素の開始、終了タグの後に改行を入れる。

  • 複数行のブロック要素の上下には1行スペースを空ける。
  • インデントは使わない。

    CMSを用いる場合、インデント規則を統一する手間が掛かるため、インデントは使わない。
    CMSを使わない場合はインデントを使ってもよい。

  • divブロックごとにコメントを挿入する

    body直下のdivブロック(containerなどの包含ブロックがある場合は、その一つしたのdivブロック)には、開始タグの1行上にid名を付けたコメント(など)、終了タグの1行下にコメント(など)を入れる。 その他大きなブロックには、適宜同様のコメントを付ける。

    <body>

<!-- header -->
<div id="header">
<h1>sample website</h1>

<p>
welcome.<br />
this is sample website.
</p>

</div>
<!-- /header -->

<!-- nav -->
<div id="nav">

<ul>
<li>about</li>
<li>product</li>
<li>blog</li>
</ul>

</div>
<!-- /nav -->

head要素内のルール

次の順で要素を記述する。

  1. meta要素
  2. title要素
  3. base要素
  4. link要素
  5. script要素
  6. style要素
  7. object要素
  8. その他

属性

属性は以下の順序で記述する。

  1. 各要素の優先属性
  2. コア属性(DTDで指定)
  3. その他

各要素の優先属性

それぞれ以下の順で記述する

  • meta 要素
    1. http-equiv
    2. name
    3. content
  • link 要素
    1. rel
    2. rev
    3. href
    4. type
  • script 要素
    1. src
    2. type
  • style 要素
    1. type
  • object 要素
    1. data
    2. type
    3. classid
    4. height
    5. width
    6. name
  • param 要素
    1. id
    2. name
    3. value
    4. valuetype
    5. type
  • ins / del 要素
    1. cite
    2. datetime
  • blockquote 要素
    1. cite
  • table 要素
    1. summary
  • col / colgroup 要素
    1. span
  • td / th 要素
    1. abbr
    2. rowspan
    3. colspan
    4. scope
  • a 要素
    1. href
    2. name
  • img 要素
    1. src
    2. alt
    3. width
    4. height
    5. longdesc
  • map 要素
    1. name
  • area 要素
    1. href
    2. shape
    3. coords
    4. alt
  • q 要素
    1. cite
  • form 要素
    1. action
    2. method
    3. enctype
    4. name
  • label 要素
    1. for
  • input 要素
    1. type
    2. name
    3. value
    4. size
    5. src
    6. alt
    7. checked
    8. disabled
    9. readonly
  • select 要素
    1. name
    2. size
    3. multiple
    4. disabled
  • optgroup 要素
    1. label
    2. disabled
  • option 要素
    1. value
    2. label
    3. selected
    4. disabled
  • textarea 要素
    1. name
    2. cols
    3. rows
    4. disabled
    5. readonly
  • button 要素
    1. type
    2. name
    3. value
    4. disabled
  • frameset 要素
    1. cols
    2. rows
  • frame / iframe 要素
    1. name
    2. src
    3. longdesc

コア属性

以下の順で記述する。

  1. class
  2. id
  3. title
  4. style

その他

上記以外の属性の順序は、順不同とする。

<form method="post" name="sample">
<input type="text" name="name" class="form" />

ネーミングルール

  • 英語を用いる。

複合語の場合

複合語の場合、スペースは空けず、一語目の先頭を小文字、2語目以降の先頭を大文字にする。(camel記法)

"globalNavigation", "oldNews"

idとclass

  • ファイル内で個別の名前にはidを、ファイル内で別の要素と共有する名前にはclassを用いる。
  • div、class名は構造を表すものにする。 
    "leftColumn"、"topMenu"、"red"などは位置を表しており、避けることが好ましい。

divブロックのid名

代表的なdivブロックは次の名前を用いる。

  • container
  • header
  • logo
  • nav
  • main
  • sub
  • footer
divブロック例

その他

不必要なdivブロックを作らない。

不必要なdivブロックを作らない。子孫セレクタ、隣接セレクタなどを活用する。

<!-- header -->
<div id="header>

<div id="title>
<h1>site name</h1>
</div>

</div>
<!-- /header -->

id="title"のdivブロックは、headerブロックから子セレクタで指定するか、h1要素にクラス名を付ける方が適している。

<!-- header -->
<div id="header">
<h1 class="title">site name</h1>
</div>
<!-- /header -->

非推奨要素・属性

HTML4.0及び4.01での非推奨(Deprecated)要素・属性

次の要素は、HTML4.0及び4.01で非推奨とされている。StrictなDTDでは認められておらず、使用しないことが望ましい。

要素
  • applet
  • basefont
  • center
  • font
  • s
  • strike
  • u
属性
  • align
  • alink
  • border
  • bgcolor
  • background
  • clear
  • code
  • color
  • face
  • height
  • hspace
  • language
  • link
  • nowrap
  • text
  • size
  • type
  • value
  • vlink
  • vspace
  • width

HTML5での削除要素・属性

次の要素は策定中のHTML5において、削除予定である。今後変更される可能性があるが、使用を控えたほうが無難である。
詳しくはW3Cのワーキングドラフトを参照。

要素
  • basefont
  • big
  • center
  • font
  • s
  • strike
  • tt
  • u
  • frame
  • frameset
  • noframes
  • acronym
  • applet
  • isindex
  • dir
属性(括弧内は対象要素)
  • accesskey
  • rev, charset
  • shape, coords
  • longdesc
  • target
  • nohref
  • profile
  • version
  • name
  • scheme
  • archive, classid, codebase, codetype, declare, standby
  • valuetype, type
  • charset, language
  • summary
  • headers, axis, abbr
  • scope
  • align
  • alink, link, text, vlink
  • background
  • bgcolor
  • border
  • cellpadding, cellspacing
  • char, charoff
  • clear
  • compact
  • frame
  • frameborder
  • height
  • hspace, vspace
  • marginheight, marginwidth
  • noshade
  • nowrap
  • rules
  • scrolling
  • size
  • style
  • type
  • valign
  • width

ページの先頭に戻る

CSSガイドライン

目次

基本ルール

CSSファイルの適用方法

  • XHTMLファイルへのCSSの適用は、外部ファイルを読み込む方法のみとし、head要素内での記述やstyle属性は使用しない。
  • デバッグのときのみstyle属性を使用する。

その他特記事項

  • ファイルの先頭で文字コード宣言("@charset")を行う。
  • line-heightは単位を付けないで指定する。
  • 文字サイズは相対単位(%)で指定する。
  • 文字コード宣言のあと1行改行を置き、コメントで"サイト名"、"更新日"、"製作者"を記述する。
/*------------------------------
サイト名:
更新日:
製作者:
------------------------------*/

書式(改行、インデント、コメント)

  • セレクタはインデントなしで記述する。
  • セレクタは原則1行に記述する。文字数が多い場合は、,区切りで改行する。
  • 最後のセレクタの後にスペース、その後ろに"{"を記述する。
  • "{"、"}"の後で改行する。
  • プロパティの前にはタブでインデントを挿入する。
  • プロパティと値の間にスペースを挿入する。
  • 値の後ろには必ず";"と改行を挿入する。
書式例 
body {
	propaty: value;
}
div#header div#nav ul li a,
div#header div#nav ul li a:link,
div#header div#nav ul li a:visited {
	propaty: value;
	propaty: value;
}

スタイルレイヤーの設計

CSSファイルを以下のようにグループ分けする。この順番で記述する。

  1. 標準スタイルのリセット
  2. 共通設定・デフォルト値の再定義
  3. リンク
  4. レイアウト
  5. 各divブロック

標準スタイルのリセット

ブラウザ間の差異を無くすため、標準スタイルをリセットする。
Yahoo UI Library(YUI)のReset CSSをimportするか、以下の規則を記述する。 @import url("http://yui.yahooapis.com/2.4.1/build/reset/reset.css") または 

html {
	color: #000;
	background: #FFF;
}
body, div,
dl, dt, dd,
ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, code,
form, fieldset, legend, input, textarea,
p, blockquote, th, td {
	margin: 0;
	padding: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset, img {
	border: 0;
}
address, caption, cite, code,
dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
li {
	list-style: none;
}
caption, th {
	text-align: left;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
q:before, q:after {
	content: '';
}
abbr, acronym {
	border: 0;
	font-variant: normal;
}
sup {
	vertical-align: text-top;
}
sub {
	vertical-align: text-bottom;
}
input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}
legend {
	color: #000;
}

共通設定・デフォルト値の再定義

全体に共通する設定や、hnやp、ul、table要素などのデフォルト値を再設定する。

リンク

リンク規則をまとめてこのグループに記述する。

レイアウト

headerやsub、main、footerなど、大まかなdivブロックのレイアウトを記述する。

各divブロック

各ブロックごとに記述する。XHTMLファイルに出現する順番で記述する。

コメント

各グループの先頭に次のようなコメントを挿入する。

/* 標準スタイルのリセット
------------------------------*/

セレクタ

  • id、class属性を指定する際、必ず要素名も付ける。
  • セレクタはできるだけ詳しく記述する。

    body直下(container包含ブロックがある場合はその直下)のdivブロック(headerやfooterなど)から、 それ以下の全ての要素を記述する。 

div#header, li.current,
div#header div#nav ul li a {

プロパティ

プロパティは以下の順番で記述する。

  1. display
  2. list-style
  3. position
  4. float
  5. clear
  6. width
  7. height
  8. margin
  9. padding
  10. border
  11. background
  12. color
  13. font
  14. text-decoration
  15. text-align
  16. vertical-align
  17. white-space
  18. other text
  19. content

ハック

  • CSSハックは極力使用しない。
  • 使用する場合は、"何に対するハックか"をコメントに記述する。
/*star html hack for IE 6 */
* html selector {
	propaty: value;
}

clearfix

clearfixハックには次のコードを用いる。使用する際はclass名を"clearfix"から適宜変更する。

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}
/* End hide from IE-mac */

ページの先頭に戻る