2008年7月 3日
XHTMLガイドライン（個人的）
基本ディレクトリ構造（案件によって臨機応変に対応）
html
├common
│ │
│ ├css
│ │ ├import.css [各CSSファイル読み込み]
│ │ ├format.css [ブラウザのデフォルトスタイルのリセット]
│ │ ├template.css [テンプレート用]
│ │ ├common.css [個別のレイアウト]
│ │ ├index.css [トップページ用]
│ │ ├print.css [印刷用]
│ │ └component.css [コンポーネント＋調整用]
│ │
│ ├images [共通で使う画像]
│ │
│ ├flash [swfファイル]
│ │
│ ├pdf [pdfファイル]
│ │
│ └scripts [javascriptのファイル]
│
├各カテゴリファイル
│ ├images [各カテゴリで使う画像]
│ │
│ └index.html[各カテゴリのトップページ]
│
└index.html [トップページ]
画像命名規則
| 種類 | 省略表記 |
|---|---|
| ロゴ | logo |
| タイトルとして使う見出し | ttl |
| 見出し | (hxxl),(hxl)hl,hm,hs,(hxs),(hxxs) |
| テキスト | txt |
| 写真、イラスト | img |
| ボタン | btn |
| グローバルナビゲーション | globalNav |
| ローカルナビゲーション | localNav |
| コンテンツナビゲーション | contentNav |
| ユーティリティナビゲーション | banner-utilityNav contentinfo-utilityNav |
| 罫線 | line |
| アイコン | ico |
| 背景 | bg |
| ロールオーバー | _r |
| デフォルト | _n |
| 現在地 | _a |
| 連番 | 01,02,03～ |
| テンプレートで使用している場合 | temp_ |
- 例1、実際に、画像ファイルに名前をつけたサンプル
- index（カテゴリのhtmlファイル名） + _ + 省略表記 + 連番 + .拡張子・・・index_img01.jpg
- 例2、実際に、画像ファイルに名前をつけたサンプル
- tmp（テンプレートで使用している場合） + _ + 省略表記 + 連番 + .拡張子・・・tmp_img01.jpg
htmlのコメントルール
<body>
<!--[ document ]--><div id="document">
<!--[ banner ]--><div id="banner">
～
</div><!--[ /banner ]-->
<!--[ contents ]--><div id="contents">
<!--[ main ]--><div id="main">
<div class="section-lv1">
<h1>test</h1>
<div class="section-lv2">
<h2>test</h2>
<!-- /section-lv2 --></div>
<div class="section-lv2">
<h2>test</h2>
<div class="section-lv3">
<h3>test</h3>
<!-- /section-lv3 --></div>
<!-- /section-lv2 --></div>
<!-- /section-lv1 --></div>
</div><!--[ /main ]-->
<!--[ complementary ]--><div id="complementary"></div><!--[ /complementary ]-->
</div><!--[ /contents ]-->
<!--[ contentinfo ]--><div id="contentinfo"></div><!--[ /contentinfo ]-->
</div><!--[ /document ]-->
</body>
トラックバック(0)
このブログ記事を参照しているブログ一覧: XHTMLガイドライン（個人的）
このブログ記事に対するトラックバックURL: http://magic-happens.net/mt/mt-tb.cgi/14
コメントする