htmlで試作品を作る際の注意点

htmlで試作品を作成する際、他人に実装を依頼する場合や、後からの改修のしやすさなどを考慮して普通はこうする、みたいなコード規約はありますか？
またはこうすると他人に実装を依頼する際にわかりやすいなど、気をつけていることがあったら教えて下さい。

例えば、
bodyタグ内のタグにはid属性かclass属性をなるべくつけた方がいいか？
inputタグのname属性はテーブルのカラム名と一致させた方がいいか？
タグのインデントはどのタイミングでするか？

などが知りたいです。

行動規範の内容に同意します

回答3件

ベストアンサー

HTML/CSS → 自分
PHP(Java)/JavaScript → 他の人

という担当の割り振りだとしたら
以下の事に気を配ってソースを書く事に専念します。

★役割ごとにフォルダ名を決める

特に、htmlとは違う別のファイルはcommonフォルダにまとめる等
役割をきっちり分け、理解されやすい構造にすると良いです。

また、同じHTMLファイル内でstyleやscriptタグが混在していると
ややこしくなりますので
CSS/JSは別ファイルがベストです。

以下は、例です。

(root)
├ common
│ ├ img(画像)
│ ├ css(StyleSheet)
│ └ js(JavaScript)
│
├ about
│ └ index.html
│
├ contact
│ └ index.html
│
・・・（略
└ index.html

★ CSS内で実現可能な処理は予め実装しておく

例えば、ボタンのhoverで画像が変わるといったものは
CSS内で解決出来そうな所は予め実装しておく

また、色の書き方、どのプロパティを使うかも決めておいた方が
理解されやすいでしょう。
例えば色なら「red」、「white」といった文字指定は使わず
「#ff0000」、「#ffffff」と6桁の16進数値に統一する

lang
1.submit-button{
2  background:url("/img/button/submit_off.png") no-repeat 0 0;
3  color:#ffffff;
4}
5
6.submit-button:hover{
7  background-image:url("/img/button/submit_on.png");
8  color:#ff0000;
9}

★プログラムが入る箇所はid,class属性名、コメントを書く

lang
1<!-- ここから検索結果 -->
2<div class="search-result">
3・・・（略
4</div>
5<!-- /.search-result -->

※divタグなど、同じタグで深い階層が作られるのであれば、閉じタグの下に
「ここがこのid,class属性の終わりですよ」と分かるコメントを入れる。

★入力フォーム

例えば、お問い合わせページ等、入力フォームがあるページなら
少しでも手間を省いて貰えるように、最低限のタグ、属性は書く

lang
1<!-- 問い合わせフォーム -->
2<div class="contact-box">
3  <h1>お問い合わせはこちら</h1>
4  <form action="" name="contact" method="post">
5    <input type="hidden" name="hoge" value="1">
6    <table>
7      ・・・（略
8    </table>
9    <input type="submit" value="送信">
10  </form>
11</div>
12<!-- /.cantact-box -->

投稿2015/03/14 04:46

編集2015/03/14 05:23

退会済みユーザー

総合スコア0

lupus_dingo

2015/03/18 10:42

回答ありがとうございます。 commonと同階層にあるディレクトリはそれぞれの機能ごとにまとめてるイメージでしょうか？その下のhtmlが全てindex.htmlなのも何か理由がありますか？閉じタグのコメントが「/.」で始まってるのはなぜでしょうか？

退会済みユーザー

2015/03/18 11:35

>commonと同階層にあるディレクトリはそれぞれの機能ごとにまとめてるイメージでしょうか？そうですね。機能別とも言えますし、サイトメニュー別とも言えます。 commonはそのサイト内全ページ共通で使用するフォルダと示す際に良く付けられるフォルダ名です。要は制作に関わる人が理解できる名前であれば何でも良いと思います。(/cmn/と略しても良いでしょう) >その下のhtmlが全てindex.htmlなのも何か理由がありますか？小難しいので、簡単に説明します。「http://○○.com/about/」へアクセスした場合、 ○○.com内のaboutフォルダにアクセスするわけですが /about/の中のどのファイルをアクセスするかは指定されていません。ファイル名が省略された場合、どのファイルを読むかをサーバー側で初期設定されています。それが、「index.html」となります。 ※サーバー側で設定変更可能 ※設定方法は本題から逸れるので省きます >閉じタグのコメントが「/.」で始まってるのはなぜでしょうか？すみません。これは僕自身が良く使うルールとして癖で書いてしまいました。ｗ .(ドット)はCSSでclass指定する時に使うので <div class="search-result"> ~ </div> と書いたら閉じタグ後のコメントに  「↑ここが「class="search-result"」ブロックの閉じですよ。」という意味を込めて書いています。なので、これがid指定の場合は <div id="search-result"> ~ </div>  と書いたりします。コメントの書き方は本当に人それぞれですね。  <div id="○○"> ~ </div>  って書く人もいます。

lupus_dingo

2015/04/01 09:14

回答ありがとうございます。 indexは予想通りでした。  のようにスラッシュのついたコメントはたまに見るのでようやく意味がわかりました。閉じタグのスラッシュを意味してたんですね。 (でも#のついたコメントは見たことないのでidのコメントは少ないのかな？)

行動規範の内容に同意します

私が気を付けている点は下記の内容ですね。
①id、name、classの命名規則。
②sytleはタグの中に直接埋め込むのではなくcss化する。
③JavaScriptに関してもcssと同様に外出し。
④HTML Validaterに準拠しているか確認する。（IE,chrome,firefoxなどで崩れないか確認）
http://validator.w3.org/