WEB標準HTMLコーディング｜制作メニュー

WEB標準HTMLコーディングとは

CSS・HTMLを、W3Cが定める仕様に準拠した正しいタグを使用することで、多くの主要ブラウザへの正しい表示を実現することが可能です。正しいマークアップ技術は、サイト保全性から検索エンジン対策、またアクセシビリティ向上への近道であると言えます。

準備を万全に～コーディングの作業工程

品質を保つために下記の作業工程で行います。

１．下記資料をディレクターが用意します。

・全体仕様書
IE6（win）、IE7（win）、Firefox（win,mac）、Safari （mac）など対応ブラウザは必須
・制作マニュアル（h1,h2,h3,h4の指定など）
・全ページの構成
・サイトマップ（ディレクトリ・ファイル名入り）
・デザインカンプ

２．コーダーもしくはディレクターが全ページの構成を把握しCSS設計を行う。

３．コーダーがトップページからマークアップ作業を行い、作業後にディレクターにチェックを依頼。

４．ディレクターがチェッカープログラムを使用しながら、細かくチェックする。

５．随時、お客様に確認を依頼。BASIC認証のかかったテスト環境にアップロードしたものをご確認いただきます。

CSSのおもな注意点

1．複雑にしない
一度しか出てこないものは、HTML側で、strongやbr、などを使ってもかまいません。
できるかぎり、CSSの記述はシンプルに。
また、テーブルなどを使用したほうがいい場合もあります。そのときは柔軟な判断を。

2．共通化
全体に共通する部分はまとめて書く。
あるひとつのページにしか出現しないようなものは、そのページ単体のCSSを作成し、そのページの格納されているフォルダ内に置く。
（共通して使用しているCSSと、使用頻度の少ないものを分け、管理を簡単にするため。）

例）．
【共通】
ルート直下\ shared \ css
common.css（全ページ共通のCSSなど、使用頻度の高いもの）
ルート直下\ shared \ js
common.js（全ページ共通のjava script、使用頻度の高いもの）

【単発】
\ news
news.php
news.css（news.phpのみで使うcss。全体共通と切り離すことで分かりやすくする）

3．テーブルには極力CSSを適用しない。
CMSなどではテーブルを任意で後で書く仕様が多いため。

4．h1 h2 h3 h4などはCSSで管理する。
ボトムページはすべてのページで統一。CSSを修正するだけで管理できるものはできるかぎり1ファイルで管理。タグの付け方は別に定める制作マニュアルを参照する。

5．文字の大きさ
・CSSでh1 h2 h3のフォントサイズを変更することは、SEO的に問題ではありません。
・デザイン重視の場合は、pixel指定
・アクセシビリティ重視の場合、em指定。

WIN　IE6の文字サイズ中で見た時を一番ベストな状態に。
本文はだいたい12pxぐらいの大きさに見えるようにお願いします。フォントの指定はデザイン上の指定がある場合のみ行ってください。

6．リンク
下記の通り、制作マニュアルにまとめますので、参考にしてください。

例）
全体のリンクは下記のように指定お願いします。
a:link { text-decoration: none; color: #0033CC;}
a:visited { text-decoration: none; color: #0033CC;}
a:active { text-decoration: none; color: #0033CC;}
a:hover { text-decoration: underline; color: #0033CC;}

一番上のグローバルメニューのみ下記の通りにお願いします。
#header a:link { text-decoration: none; color: #FFFFFF;}
#header a:visited { text-decoration: none; color: #FFFFFF;}
#header a:active { text-decoration: none; color: #FFFFFF;}
#header a:hover { text-decoration: underline; color: #0033CC;}

7．画像に枠線（border）を入れる場合は、cssにて入れる。
（画像ひとつひとつ枠線を入れるのは手間のため）

HTMLのおもな注意点

1．前提
・XHTML1.0で制作（DreamWeaverを使用してください）
・W3C チェッカーは必要に応じて使用する。
【W3C チェッカー】
http://validator.w3.org/
【W3C cssチェッカー】
http://jigsaw.w3.org/css-validator/
【使いやすいチェッカー】
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
・ターゲットブラウザ
IE6（win）
IE7（win）
Firefox（win,mac）
Safari （mac）
※CSSハックは使用しないこと。
まずTOP１ページをコーディングし、ターゲットブラウザで同じように見れることを最初の段階で確認してください。

2．TITLEタグについて
SEOの対策上、titleタグは大事といえます。できれば20文字前後で検索のキーワードとなる文章、タイトルを入れること。ページ毎に作成しますので、CMS設定できるようにします。

3．META情報
ページ毎に作成します。CMS設定できるようにします。
・ページの説明（ページの内容説明）
＜meta name="description" content="ページの説明"＞
・キーワード（検索エンジン対策）
＜meta name="keywords" content="ページのキーワード"＞

4．その他
1）．繰り返し項目にあたる部分は、繰り返しを意識したコーディングを。

【ポイント】
・抜いても足しても崩れないこと。
・繰り返しの時のマージン
・どこで終わってもきれに。
・リストタグ（li）をうまく使用する

2）．必ずタグは閉じる。img、hr、input　ひとつで終わるものは忘れがちです。

3）．メニュー、ヘッダー、フッターなどで使用する共通化できるファイルは
インクルードを使って共通化する。
その際、それらのテキスト・htmlファイルは一つのフォルダ（libraly、もしくはincludes）
というなまえにしておく。

4）．リストタグを使う場合は、・（黒丸）などシステム側で出せる記号も画像化して使う。
（ブラウザによってマージンの取り方が異なるため）

5）．画像には日本語でaltとtitleを入れる

6）．リンクには、日本語でtitleを入れる
aタグに日本語でタイトルを入れると、有利になります。