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

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

ただいまの
回答率

90.61%

  • HTML

    8664questions

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

  • HTML5

    3875questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML記述ルール、規約

解決済

回答 5

投稿

  • 評価
  • クリップ 2
  • VIEW 704

makoto-n

score 336

htmlの書き方を社内で統一さえるために規約を作成しています。
ネスト化するなど大まかな部分はできたのですが、
それぞれのタグのルールというか特性みたいなものが調べきれていないです。
たとえば
<p>~~~</p>の間に<br>をいれないとかのことです。

稚拙な説明で申し訳ない。
そういうのを教えてください。

イメージ説明↑これのことw
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 5

+2

HTMLのコーディング規約としては、「HTML自体の文法」と「意味論的なもの」という2つのレイヤに分かれます。

まず、使うHTMLのバージョンが決まれば、HTMLの文法も確定します。適切なDOCTYPEを書いて、それに従ったHTML構造を組み立てる必要があります(たとえばインライン要素・ブロック要素などのように、重ねられないタグもあります)。

そして、「あくまでHTMLは文書の構造を表して、スタイルはCSSで表現する」という原則を踏まえれば、ある程度意味論的なルール付けもできてきます。たとえば、<br>タグの使い方ですが、「意味論的に改行すべき場面」が適切なので、詩のように改行まで意味を持つ文脈でなければ、箇条書きなら<ul><li>で表現する、空行を開けたいならCSSで対応する、などのような手段が適当となります。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

checkベストアンサー

+1

「1から作るのは…」は、実勢的には至極もっともだと思います。

ただ…大事な事を忘れています。

あなた・御社の規約の目的はなんですか?

統一とは?あとはみんなが、見て、きっと正規化してくれる!、と?

プロジェクトの性格が違っても、同一ルールですか?

ユーザに、「うちはこうやってます!」とアピールしたい?

社内ルールを統一すれば、まぁ、恐らく、きっと、悩みが減るから?

例えば、皆さんも考えた事が有るかと思うのですが、 Google の規約なら「ほう、そうか…」だけでは終わらないと思います。当然に、「準拠」が、SEO 的にも好ましいのかな?、と、それが正解かはともかく考えられるかと思います。

「目的」が有るから、作られる「ルール」が有り、その「ルール」が有るから、例え一部であっても「目的」が達成出来なければならないのかな?、と思います。

そして、タグの入れ子ルールでしたら、基本的に仕様に掲載されています。ですので、厳しいようですが、これはルールつくりとしては、「質問」されるものではないと思います。仕様を精査せず、質問するのは、残念ながら間違いかと思います。

ただ、今更、W3C を見て…というのもなので、バカにせず、リファレンス本をルール代わりに社員一人一人に持たせるのも一考です。これで、各々が勉強やリファレンスとして使ってきた書籍上の差分は解消出来ます。そう、規約は、「書籍:XXに準ずる」でも、立派な規約です。

また、この入れ子問題の様に、各タグについて、余りに詳細に決めごとを作り上げていくのも、いささか、「目的」によっては、逆に運用上の齟齬が目立つような気がします。つまり、「それ、本当に全社員が実行できますか?」って事です。

ルールは重要ですが、余りに細かすぎるのは、考え物です。

「時間が勿体ない」のは理解出来ますが、少なくともマイルストーンごとに、「ここのマークアップで悩みました検討会」も行えないほどでしょうか?

実際、御社ならではの特徴あるマークアップというものが有ったり、今は無くても、将来形成されていくでしょう。

その中で、日々、アップデートしていく「コーディング規約」は如何でしょうか?

「コーディング規約」有りき、は間違いではないでしょうが、規約を作る事を「目的」に、内容を精査していっては、本当に御社に必要な規約が出来上がるのでしょうか?

そして、まずはもう一度、基本に立ち返って、「わが社のコーディング規約はXXの為にある」を引き出されては如何でしょうか?

「答え」ではなく恐縮ですが、今回私が感じた次第を述べさせて頂きました。失礼致しました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/09/17 10:45

    > あなた・御社の規約の目的はなんですか?
    ごもっともな問いかけです。
    おかげで目が覚めた気持ちです。
    ありがとうございます。

    キャンセル

0

一から全てを網羅して規約を用意するのは非常に労力が掛かりますし漏れも相当数で出てしまいます。
都度の検討・対応によって矛盾が出たり統一感が出なくなる時もあります。
ですので、インターネットで調べて既知の規約を叩き台にして社内用に改編していくというのも勉強にもなりますし早道にもなる一つの方法と思います。

ご参考: Google HTML/CSS Style Guide
翻訳サイトも幾つかありますが本家のみご参考URLにて。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/09/13 22:15

    そうですね。
    そのほうが早道です。
    ありがとうございます。

    キャンセル

0

開発の進捗が悪くなるので、HTML採点サイトで、例えばエラーレベル9のものを出さないようにする、という取り決めぐらいにしておいたほうが良いと思います。
あとは、精々「セキュリティ情報を出力しないでね」ぐらいがいいですかね。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/09/13 22:12

    ありがとうございます。
    そちらのサイトで試しにチェックしてみたのですが、ネスト化された部分を不要な空白と認識されてしまいます。
    ほかにも採点機能付きのチェッカーを探したのですが、これというものがなかなか見付からず&hellip;
    TetsujiMiwa様がおススメするチェッカーはなにかございますか?

    それと「セキュリティ情報」とはなにでしょうか…?

    キャンセル

  • 2015/09/13 22:39

    おすすめのチェッカーというか、個人的な意見ですが、IE、FireFox、Chromeでレイアウト崩れなく表示されていたらOKと考えてます。class属性なんか、整理してキチンと書きたいところですが、それをやってる時間はまず取れないです。

    不要な空白と認識されている箇所は、エラーレベルはいくつでしょうか?
    その空白に問題を感じなければ、そのエラーレベルは許容範囲という認識で良いです。許容できる書き方、許容できない書き方、をエラーレベルで線引しちゃおうって話です。

    「セキュリティ情報」とは、主に問題になってくるのが、htmlコメントです。
    ブラウザ上に表示されないからといって、ユーザに知られちゃまずいID/パスワードを記載してたり、顧客情報を書き込んでたり、ですね。
    Htmlコメントと言っても、ソースの表示で丸見えです。

    キャンセル

  • 2015/09/13 22:59

    2.3回試したらそこの文章が消えました。
    それほど問題ではなかったのかと。
    あと、こちらはhtml4.01の対応になっていますので(更新も止まっています)ほかのチェッカーを再度探してみようと思います。

    キャンセル

  • 2015/09/13 23:02

    IEをベースに、とは聞いた話ですが。
    古いバージョンのIE対策とかどのようにしていますか?
    たしか、winXPはIE8までしかバージョンアップできなかったと記憶していますが。

    キャンセル

  • 2015/09/14 05:28

    IEの古いバージョンは、必要があればIETesterで目視チェックです。
    どうしても古いバージョンへの独自対応が必要になった時は、
    javascriptを使った判定処理使えばいいと思いますが、
    今のところ、そういうケースに遭遇したことないですね。

    WinXPはマイクロソフトのサポートが終了しているので、
    むしろ対応考慮すべきではないと思います。

    キャンセル

0

当社もガイドラインありますが、相当分厚いですよ

1から作るのはあまり現実的ではないです。どこかの物を参考にして、自社のやり方に修正するという方向性がよいと思います

下記サイトは無料でガイドラインを提供していますので、参考にしては
http://coding-factory.com/guideline/

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/09/15 14:05

    ありがとうございます。
    助かります。

    キャンセル

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

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

関連した質問

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

  • HTML

    8664questions

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

  • HTML5

    3875questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。