質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • HTML

    8668questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • JSP

    904questions

    JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

  • Smarty

    166questions

    Smartyは、PHPアプリケーションで使用されるテンプレートエンジンです。

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

解決済

回答 3

投稿

  • 評価
  • クリップ 4
  • VIEW 988

lupus_dingo

score 251

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

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

などが知りたいです。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+1

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進数値に統一する

.submit-button{
  background:url("/img/button/submit_off.png") no-repeat 0 0;
  color:#ffffff;
}

.submit-button:hover{
  background-image:url("/img/button/submit_on.png");
  color:#ff0000;
}

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

<!-- ここから検索結果 -->
<div class="search-result">
・・・(略
</div>
<!-- /.search-result -->
※divタグなど、同じタグで深い階層が作られるのであれば、閉じタグの下に
「ここがこのid,class属性の終わりですよ」と分かるコメントを入れる。

 ★入力フォーム

例えば、お問い合わせページ等、入力フォームがあるページなら
少しでも手間を省いて貰えるように、最低限のタグ、属性は書く
<!-- 問い合わせフォーム -->
<div class="contact-box">
  <h1>お問い合わせはこちら</h1>
  <form action="" name="contact" method="post">
    <input type="hidden" name="hoge" value="1">
    <table>
      ・・・(略
    </table>
    <input type="submit" value="送信">
  </form>
</div>
<!-- /.cantact-box -->

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/03/18 19:42

    回答ありがとうございます。
    commonと同階層にあるディレクトリはそれぞれの機能ごとにまとめてるイメージでしょうか?その下のhtmlが全てindex.htmlなのも何か理由がありますか?

    閉じタグのコメントが「/.」で始まってるのはなぜでしょうか?

    キャンセル

  • 2015/03/18 20:35

    >commonと同階層にあるディレクトリはそれぞれの機能ごとにまとめてるイメージでしょうか?

    そうですね。
    機能別とも言えますし、サイトメニュー別とも言えます。

    commonはそのサイト内全ページ共通で使用するフォルダと示す際に
    良く付けられるフォルダ名です。
    要は制作に関わる人が理解できる名前であれば
    何でも良いと思います。(/cmn/と略しても良いでしょう)


    >その下のhtmlが全てindex.htmlなのも何か理由がありますか?

    小難しいので、簡単に説明します。

    「http://○○.com/about/」へアクセスした場合、
    ○○.com内のaboutフォルダにアクセスするわけですが
    /about/の中のどのファイルをアクセスするかは指定されていません。

    ファイル名が省略された場合、
    どのファイルを読むかをサーバー側で初期設定されています。
    それが、「index.html」となります。
    ※サーバー側で設定変更可能
    ※設定方法は本題から逸れるので省きます


    >閉じタグのコメントが「/.」で始まってるのはなぜでしょうか?

    すみません。
    これは僕自身が良く使うルールとして癖で書いてしまいました。w
    .(ドット)はCSSでclass指定する時に使うので

    <div class="search-result"> ~ </div>

    と書いたら閉じタグ後のコメントに

    <!-- /.search-result -->
    「↑ここが「class="search-result"」ブロックの閉じですよ。」

    という意味を込めて書いています。
    なので、これがid指定の場合は

    <div id="search-result"> ~ </div>
    <!-- /#search-result -->

    と書いたりします。

    コメントの書き方は本当に人それぞれですね。

    <!-- ここから○○ -->
    <div id="○○"> ~ </div>
    <!-- ここまで○○ -->

    って書く人もいます。




    キャンセル

  • 2015/04/01 18:14

    回答ありがとうございます。
    indexは予想通りでした。

    <!-- /.search-result -->
    のようにスラッシュのついたコメントはたまに見るのでようやく意味がわかりました。閉じタグのスラッシュを意味してたんですね。
    (でも#のついたコメントは見たことないのでidのコメントは少ないのかな?)

    キャンセル

+1

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

bodyタグ内のタグにはid属性かclass属性をなるべくつけた方がいいか? 
inputタグのname属性はテーブルのカラム名と一致させた方がいいか? 
タグのインデントはどのタイミングでするか? 
こちらなんですが、最初にモックを作る段階でキチンと整理して、
命名規約・name属性はテーブルと同じをした方が手戻りが少なくて済むと思います。
タグインデントは後回しでも(動作が出来るようになってから)でも大丈夫だと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/03/14 17:02

    回答ありがとうございます。

    ② その画面の一つの部品特有のスタイルでも外だししますか?
    ③ サブミットするだけの簡単なスクリプトも外だししますか?

    キャンセル

  • 2015/03/14 17:35

    ②画面固有でも外出しにしますね。
     共通のスタイルとオーバーラップさせるイメージで固有のCSS化にします。
    ③個人的には外出しにします。
    特にサブミットするだけの簡単なスクリプトなら尚更、共通部品にして、
    ページによってサブミット方法が異なるような事がないようにします。

    キャンセル

  • 2015/03/18 19:31

    回答ありがとうございます。
    勉強になりました。

    キャンセル

0

試作品であれば名前に気を付けるくらいでしょうか。

idならば aaa_bbb のようにアンダースコア区切りで、
クラス名はハイフン区切りにする、とか。

上記のルールが正しいと言う意味では無く、名前の付け方は統一しておくと後で楽ですよと言う意味です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/03/14 16:51

    回答ありがとうございます。
    ハイフン区切りの変数はjavascriptで演算子と間違って誤作動起こさないかいつも不安になるので、アンダーバーにしています。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    8668questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • JSP

    904questions

    JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

  • Smarty

    166questions

    Smartyは、PHPアプリケーションで使用されるテンプレートエンジンです。