(X)HTML+CSSのマークアップガイドライン

1年ほど前に作成した、(X)HTMLとCSSのマークアップガイドラインです。アルバイト先のガイドライン策定の際に、ファーストドラフトとしてつくったものです。1年アップデートしていないので情報も古いですし、直したいところもいくつかあるのですが、せっかくなのでここに出してみました。

また、以下はその際に參考にしたサイトです。くりかえしになるんですが、1年前の時點でのことなので、現在と狀況が変わっていたり、この1年でほかにも良いエントリが出ていることが考えられるので、気をつけてください。

全般

SimpleBoxes | CSSとHTMLのコーディングガイドライン

そのものずばり、ガイドラインを公開されている方のエントリーです。お手本として、かなり參考にさせていただきました。

CSS Nite Vol.7: Web製作現場の対立を解消する！ XHTML+CSSガイドライン作り [1]

益子貴寛さんが、CSS Niteで行った講演の資料です。今回の目的そのものである、XHTMLとCSSのガイドライン作りに関する內容であるため、參考になりました。

最低限これだけ守っていればコーディングがうまくなるポイント:::STOPN’ LISTEN:::

(X)HTMLとCSSでのマークアップ全般に関するtipsです。インデントを使用しないという部分を參考にしました。

(X)HTML

XHTMLの書き方と留意點

神崎さんの記事です。XHTMLを書く際の基本について、わかりやすくまとめられています。

第４回 HTMLからXHTMLへの移行方法（1）：ITpro

同様に、XHTMLマークアップの基本です。

Blogサイトで見かける変なHTML

例を挙げながら、標準に沿った(X)HTMLの書き方を説明しています。構造(HTML)と表示(CSS)を分離するために、(X)HTMLには見栄えのための要素を書かないというのがポイントのようです。

And all that Malarkey // Naming conventions table

海外の著名なWebデザイナーが、Divブロックのid/class名をどのように命名しているかが、一覧にまとめられています。

我的春秋: コード共有のためのネーミングルール

idやclassの命名規則についてです。ネーミングルールを作成する際に、參考にさせていただきました。特に、camel記法を用いる、構造を示す単語を用いるという點を採用しました。

我的春秋: 論理構造を文脈に読み換えながら class 名を考える

こちらも命名について。論理的構造に沿ってid/class名を並べると、文章として成り立つように命名するというアイデアです。

文書型宣言の意味

XML名前空間の簡単な説明

ごくごく簡単なDTDの説明

こちらもそれぞれ神崎さんの記事です。個人的に疑問に思っていた部分でした。

CSS

スタイルシートを分けて管理する方法をまとめる - 2xup.org

スタイルシートを複數のファイルに分割して管理する方法がまとめられています。実踐編はこちらです。確かに、うまく分割することが出來れば、必要なファイルを組み合わせるだけで、色々なデザインを実現できるようになるかもしれません。

スタイルシートを書く時のガイドライン - 2xup.org

CSSのガイドライン。pdfファイルでダウンロードできます。內容は書式のルールと、プロパティの記述順です。きれいにまとまっていて、參考にさせていただきました。

デフォルトスタイルの差異を無くすCSS - 3ping.org

デフォルトスタイルのリセットと、さらにリセットしたスタイルの再設定を行うCSSの紹介です。実際のコードも公開されています。

content.css

www.moxilla.orgで使われているCSSファイルです。冒頭のコメントで、"Suggested order:"として、推奨されるプロパティの記述順序が示されています。今回のガイドラインには、この順番を採用しました。

*{ margin : 0 }はもう古い！？ - Emotional Web

ブラウザ間の表示の差異をなくすために、ユニバーサルセレクタ("*")を用いてすべての要素のスタイルをリセットするのは、よくとられている手法です。しかし、ユニバーサルセレクタでの指定は、表示が遅くなるという弊害があったり、またすべてのスタイルをリセットするのではなく、一部のスタイル(ボタンなど)はデフォルトのものを使おうという理由から、スタイルのリセットは要素を個別に指定する方法が提案されています。

CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker

こちらもデフォルトスタイルのリセットに関する記事です。コメント欄に有益な情報が集まっているので、そちらも読むことをお勧めします。

最初に指定しておくと便利なCSS | Tech de Go

こちらもデフォルトスタイルのリセットに関する記事です。記事の最後に、よく使うスタイル指定(float: leftなど)をモジュールとしてclass指定しておき、(X)HTML側でそのクラス名をつけるだけで、見た目を変更できるというtipsが紹介されています。確かに便利ですが、(X)HTMLに見た目だけのための記述が入り込んでしまうので、賛否が分かれるところかもしれません。

CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ

font-familyでフォントを指定する際の、様々な制約や実際のコードが説明されています。様々なケースを想定すると、とても面倒くさく、煩雑なコードになってしまうようです。font-familyは指定しないという意見もあるかもしれませんが、このエントリー自體は勉強になります。

hail2u.net - Weblog - CSSコーディング・スタイル

スタイルシートを書く際のノウハウがまとめられています。セレクタは細かく指定するという項目を參考にさせていただきました。

Lucky bag::blog: 維持しやすい CSS を考える

こちらもスタイルシートを書く際のノウハウです。作成中にボツになったスタイルを消去するなどは、ガイドラインに明文化するまでではないかもしれませんが、個人的には取り入れたtipsです。

Lucky bag::blog: カラー関連の情報を CSS 內に記述

カラーネーム、Hex値、RGB値を、CSSファイルにコメントとして記述するというtipsです。確かにパーツとなる畫像を作る場合には、色情報がすぐわかって便利そうです。

我的春秋: 配色管理用の CSS をモジュール化する

色指定を別ファイルにまとめるというアイデアです。この提案もさることながら、記事後半の「デザインはセマンティクスに依存する？」という部分が興味深いです。色や、文字・ボックス・空白の大きさというデザイン要素と、コンテンツの重要性にはつながりがあるため、見栄えを擔當するCSSも、(X)HTMLの構造を基にして整理したほうが良いのではないかということが述べられています。つまり、従來のCSSはセレクタを基にした分類が行われることが多かったのではないかと思うのですが、それにとらわれず、色や文字サイズなどのプロパティごとにCSSを整理するという方法です。

まとめ系

CSSまとめ - 萌え理論Blog

さすがのまとめです。

CSSレイアウトの良いお手本になるホームページを教えてください。 ２カラムレイアウトや、３カラムレイアウト、position:absoluteを使ってのヘッダや サイドバー配置や、他.. - 人力検索はてな

CSS関連の有名なサイトが一通りつかめると思います。

hxxk.jp - CSS の記述ルール記事のまとめ

CSSの書き方に関する網羅的なエントリーです。主に記述の順番や、インデント･改行･コメントなどの書き方のフォーマットについてです。

そのほか

Browser Statistics

月別のブラウザシェアの統計がわかります。ただ、この統計はW3Schoolsのアクセスログから集計されたもののようです。W3Schoolsにアクセスする人は、一般よりもコンピュータやWebに精通している傾向が考えられる點や、W3Schoolsのページビューの統計を見たところ、ほとんどが歐米・インドからのアクセス(日本からのアクセスは全體の0.6%)である點から、サンプルは偏っていると思います。ですので、あくまで參考程度にとどめておいたほうが無難です。

W3C - HTML 5 differences from HTML 4 日本語訳 - HTML5.JP

W3Cの『HTML 5 differences from HTML 4』 Editor's draft 22 July 2007の日本語訳です。まだ策定中のHTML5ですが、削除予定の要素や屬性については、考慮しておくと良いかもしれません。

Yahoo! UI Library: Reset CSS

Yahoo! UI Libraryから提供されている、デフォルトスタイルをリセットするためのCSSです。このファイルをガイドラインに取り入れました。

新規でサイトを作る際に僕がいつも使ってるCSSのセットを公開するよ:::STOPN’ LISTEN:::

お手本にしました。このようなファイルを公開していただけるのは、ありがたいです。