プロフィール 1/2

• purprin -「プルプリン」と読みます-
  • コトノハ をきっかけにこの業界に
  • 「purprin」は「パープリン」としか発音できなくね？とこっそり思ってる
• paperboy&co.所属
• I love penguin(o e o)/

プロフィール 2/2

• (X)HTML, CSS に魅せられた経緯
  • もともと Web は大好きで、趣味でひどいテーブルレイアウトのページをつくっていた
  • ２年ほど前に友達に依頼されてつくったサイトでMovable Type を導入して改造をしながら勉強
  • ある時 HINAGATA で Kaminogoya 君の書く beautiful な(X)HTML+CSS に心奪われる - HINAGATA
  • Web 標準が普及することで考えられるメリットを妄想して一人で興奮
  • ついにこの業界に飛び込みたくなり、上京してしまいました

Web デザインをされる皆様はどうしてますか？ - 命名規則

wrapper? container?

(X)HTML の設計において、同じ組織内で作成しているウェブ・サイトでは id/class の命名規則を統一したほうが、CSS の相互利用にとても有効になりそうと考え、現実どの程度統一され、意識されているのかを調査します。

仮説

例えば microformats のごとく、ある程度の統一規格があればもっとグローバルな「着せ替え」が可能になるのではないでしょうか？

文書の内容によって設計が変わるので一概に統一するのが良いとも言い切れませんが、よりよい命名の仕方を考えることが効率の良いサイト設計に繋げるきっかけになるのではないでしょうか。

海外のデザインサイトの命名にみられる特徴

Naming conventions table より

• Naming conventions table

特徴を軽く分析

• header と footer は人気（比較的どこも使われているらしい）
• navigation を nav と略す（日本では Navi が多いと思われる）
• サイドバーにあたる部分は呼び名のバリエーションがいっぱい

日本で普及している主要ブログツールのワイヤーフレーム命名規則

主要ブログツールのワイヤーフレーム命名規則一覧表

ブログツール名	文書型定義	全体を囲むbox	ヘッダ	ナビゲーション	メインとサイドを囲むbox	メイン	サイドバー	フッタ	その他	補足
JUGEM	1.0T	#layout	直接 h1 で記述	.entry_navi	#box	#main	#side	なし	-	テンプレート「plain」の例。このテンプレートでは、フッタに関わりそうなコンテンツはmainに内包
Movable Type version 3.2-ja-2	1.0T	#container	#banner	（エントリーアーカイブのみ・メインに内包）.content-nav	#pagebody	#alpha	#beta	なし	-	フッタに関わりそうなコンテンツはサイドバーに内包
WordPress	1.0T	#page	#header	（メインに内包）.navigation	なし	#content, .narrowcolumn	#sidebar	#footer	-	id=content に対してclass=narrowcolumn/widecolumn でレイアウト変更が可能な設計
FC2ブログ　テンプレート hachi	4.01T	#container	#banner	（メインに内包）.prev-next-navi	#blogcontainer	#blog	#left	#footer	-	他に、３カラムのテンプレート「memo」だと、id=blogcontainer の中に id=wrapper というボックスを使ってid=left と id=blog を内包し、その外で id=right をフロートさせている
Serene Bach	1.1	なし	.title	（メインに内包）.entry_navi	.body	.contents	.navigation	.footer	-	-
a-blog	4.01T	#allBox	#headerBox	（メインに内包）#newsNaviBox	なし	#mainBox	#subBox	#footerBox	-	-
livedoor Blog default 2003	定義なし	#container	#banner	なし	#content	.blog	#links / .side	#footer	-	テンプレートの種類によって命名規則が統一されていない模様。比較的新しいテンプレートは文書型定義されている
はてなダイアリー　テーマ「Hatena」	4.01T	なし	直接h1	なし	なし	#main	.sidebar	なし	-	共通ヘッダ部分はテーブルレイアウト

良い名前を考える

原理から考えると・・・

• id は一意性のある領域や要素に対して名付けるのが好ましい
• class は同じ機能をもつ領域や要素に対して名付ける
• そしてその名前は、色形をあらわす名称ではなく、意味や機能をあらわすほうが好ましい

とはいうものの、left や right など、特定のスタイルをあてない場合に全く意味がわからなくなるものも意外とあるようです。

ありがとうございました

(o e o)/

このスライドショーは W3C が提供する HTML Slidy を利用しています(XHTML + CSS + javascript)。

• HTML Slidy
  • software licensing
  • document use policies