htmlのコーディング規約
htmlも人によって書き方は、バラバラです。
「鈴木智子のホームページのアクセスアップ講座」では、以下のようにしています。
ドキュメントタイプやmetaなどのヘッダー要素
以下のソースを元にmeta情報の変更や、title部分の変更、cssやJavaScriptなどのインクルードファイルの記述を変えます。
mataについては、「metaタグについて」を参照して下さい。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="robots" content="INDEX,FOLLOW" /> <meta name="author" content="サイト名" /> <meta name="copyright" content="Copyright (c) 2009 nishi-shinjuku.net" /> <meta name="coverage" content="サービス提供対象範囲" /> <meta name="Targeted Geographic Area" content="地理的対象範囲" /> <meta name="classification" content="カテゴリ" /> <meta name="rating" content="対象年齢層" /> <meta name="slurp" content="NOYDIR" /> <meta name="robots" content="NOODP" /> <meta name="Keywords" content="キーワード（カンマ区切り）" /> <meta name="Description" content="説明文" /> <title>サイト名</title> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <link href="css/basefont.css" rel="stylesheet" type="text/css" /> <link href="css/common.css" rel="stylesheet" type="text/css" /> <link href="css/ページ独自のcss" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript" src="js/iepngfix.js"></script> </head>
cssのインクルード部分は、@importで読み込んで管理している方も多いかと思いますが、これはHTTPリクエストがファイルの数だけ発生して、パフォーマンス的に良くありませんので、使用しません。
インデント
インデントは、タブとします。
<body> <h1>ホームページ制作の西新宿ドットネット</h1> <div id="header"> <h2 id="logo">西新宿ドットネット</h2> <p id="header_inquiry">お電話でのお問合せはこちら</p> </div> … </body>
Dreamweaverは、デフォルトでインデントの設定がスペース2文字になっています。
変更するには、以下の操作を行って下さい。
Dreamweaverを起動
[編集]→[環境設定]
カテゴリの[コードフォーマット]をクリック。
インデント：チェック
使用：タブ
タブサイズ：4
を設定して[OK]ボタンをクリック。
コメント
コメントは、各ブロックの始まりと終わりに記載します。
<body> <!--container--> <div id="container"> <h1>ホームページ制作の西新宿ドットネット</h1> <--header--> <div id="header"> <h2 id="logo">西新宿ドットネット</h2> <p id="header_inquiry">お電話でのお問合せはこちら</p> </div> <!--/header--> … <!--/container--> </body>
h1
h1は必ずテキストでbody要素の直下に配置します。
ただし、divやコメントは、除きます。
画像が先行するデザインの場合でも、スライスの方法を考えて、h1を優先させます。
共通要素
ヘッダー、グローバルメニュー、会社情報、バナー、フッター、コピーライトは、必ず共通要素としてコーディングします。
デザインによっては、トップページとその他のページが異なる場合もあります。
では、続いて「cssのコーディング規約」を説明します。
