(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を書く際の基本について、わかりやすくまとめられています。
第４回 HTMLからXHTMLへの移行方法（1）：ITpro
同様に、XHTMLマークアップの基本です。
例を挙げながら、標準に沿った(X)HTMLの書き方を説明しています。構造(HTML)と表示(CSS)を分離するために、(X)HTMLには見栄えのための要素を書かないというのがポイントのようです。
And all that Malarkey // Naming conventions table
海外の著名なWebデザイナーが、Divブロックのid/class名をどのように命名しているかが、一覧にまとめられています。
idやclassの命名規則についてです。ネーミングルールを作成する際に、参考にさせていただきました。特に、camel記法を用いる、構造を示す単語を用いるという点を採用しました。
我的春秋: 論理構造を文脈に読み換えながら class 名を考える
こちらも命名について。論理的構造に沿ってid/class名を並べると、文章として成り立つように命名するというアイデアです。
こちらもそれぞれ神崎さんの記事です。個人的に疑問に思っていた部分でした。
CSS
スタイルシートを分けて管理する方法をまとめる - 2xup.org
スタイルシートを複数のファイルに分割して管理する方法がまとめられています。実践編はこちらです。確かに、うまく分割することが出来れば、必要なファイルを組み合わせるだけで、色々なデザインを実現できるようになるかもしれません。
CSSのガイドライン。pdfファイルでダウンロードできます。内容は書式のルールと、プロパティの記述順です。きれいにまとまっていて、参考にさせていただきました。
デフォルトスタイルの差異を無くすCSS - 3ping.org
デフォルトスタイルのリセットと、さらにリセットしたスタイルの再設定を行うCSSの紹介です。実際のコードも公開されています。
www.moxilla.orgで使われているCSSファイルです。冒頭のコメントで、"Suggested order:"として、推奨されるプロパティの記述順序が示されています。今回のガイドラインには、この順番を採用しました。
*{ margin : 0 }はもう古い！？ - Emotional Web
ブラウザ間の表示の差異をなくすために、ユニバーサルセレクタ("*")を用いてすべての要素のスタイルをリセットするのは、よくとられている手法です。しかし、ユニバーサルセレクタでの指定は、表示が遅くなるという弊害があったり、またすべてのスタイルをリセットするのではなく、一部のスタイル(ボタンなど)はデフォルトのものを使おうという理由から、スタイルのリセットは要素を個別に指定する方法が提案されています。
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker
こちらもデフォルトスタイルのリセットに関する記事です。コメント欄に有益な情報が集まっているので、そちらも読むことをお勧めします。
こちらもデフォルトスタイルのリセットに関する記事です。記事の最後に、よく使うスタイル指定(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も、(X)HTMLの構造を基にして整理したほうが良いのではないかということが述べられています。つまり、従来のCSSはセレクタを基にした分類が行われることが多かったのではないかと思うのですが、それにとらわれず、色や文字サイズなどのプロパティごとにCSSを整理するという方法です。
まとめ系
さすがのまとめです。
CSS関連の有名なサイトが一通りつかめると思います。
CSSの書き方に関する網羅的なエントリーです。主に記述の順番や、インデント･改行･コメントなどの書き方のフォーマットについてです。
そのほか
月別のブラウザシェアの統計がわかります。ただ、この統計は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から提供されている、デフォルトスタイルをリセットするためのCSSです。このファイルをガイドラインに取り入れました。
新規でサイトを作る際に僕がいつも使ってるCSSのセットを公開するよ:::STOPN’ LISTEN:::
お手本にしました。このようなファイルを公開していただけるのは、ありがたいです。