06-6777-3688
BLOG

【2021年版】HTMLコーディング規約とは?プロが使う改行、インデント、コメントなどレギュレーションを全公開。

公開日:2021年3月12日/最終更新日:2021年5月25日

HTMLコーディング規約は制作チームとしてコーディングを行う際に欠かせないものです。規約とはルールのことですが、各々がルールなしにコーディングをしていたら何ともバラバラで読み辛いものになってしまいます。

では、どのようなHTMLコーディング規約を作れば、読みやすいコードになるのでしょうか?実際に弊社が使っている規約を公開しながら、「本当に優れた規約」を作るための考え方についてお話していきたいと思います。

HTMLのイメージ

 

目次

HTMLコーディング規約は非常に大切

WEB制作を行う者にとってHTMLコーディング規約を作ることは非常に大切なことですが、具体的にどういった目的で規約が作られているのか?について説明します。

HTMLコーディング規約とは

まず「HTMLコーディング規約」の定義ですが、これは「HTMLをコーディングする上でのルール」のことです。コーディングルール、コーディングレギュレーションなどとも呼ばれています。

HTMLコーディング規約を作る理由

HTMLコーディング規約はコーディングを見やすくするためのものですが、具体的には以下に挙げるような目的で作られています。

  • ・コミュニケーションコストの軽減
  • ・品質を一定に保つ
  • ・管理しやすくする

一つずつわかりやすく説明します。

●コミュニケーションコストの軽減

コードがあまりにゴチャゴチャして見にくいと、何を書いているのかその不明な点を本人に聞かなければなりません。最初にルールを決めておかないと、たびたび聞く羽目になり、コミュニケーションコストが積み重なってしまいます。しかし、コードの書き方やコメント(メモ)の入れ方を規約として用意しておけば、その後のコミュニケーションコストを軽減できるでしょう。

ミーティング

●品質を一定に保つ

ずっとコーダー専門でやってきた人以外にも、プログラマ、エンジニア、さまざまなバックグラウンドの人がコーディングに関わるものでしょう。何もルールを決めずにコーディングしていると、どうしてもそれぞれの個性が出てきてバラバラなコードになったあげく、エラーなど不都合が出てしまうかもしれません。

コーディング規約を定めておくことで不都合な状況を回避し、品質を均一化する(一定に保つ)ことができるため、安定した開発につなげていけるのです。

●管理しやすくする

何かコードを追加したり、状況に応じて改善したりする際に読みにくいと管理が大変です。毎回手間がかかる、つまり管理コストが高いということになりますし、積み重なっていくとそれはもう大きな損失です。規約を作って守ることは面倒に思えるかもしれませんが、のちのち被るはずの大きな損失に比べれば、規約作りはそこまでの手間ではないでしょう。

優れたHTMLコーディング規約の条件

HTMLコーディング規約は会社や制作チームごとに多種多様ですが、どういったHTMLコーディング規約が好ましいのか?という共通認識のようなものは存在するのです。ここでは世間で認識されている「優れたHTMLコーディング規約」の条件について解説します。

明確な理由があって定められている

HTMLコーディング規約は明確な理由を持って作っておいたほうが、より長く、より厳密に守っていきやすいです。もし定められている理由が不明瞭な規約があったらどうでしょうか?規約にあるのならコーダーはそれを守らなければなりませんが、納得できずに「ルールだから」といって守っていても「発展性」からいうと少し残念な点が浮かびます。

コーディングはどんどん進化していくものですし、さらにブラッシュアップしていくには、規約を使っている当人(コーダー)の「よりよくしていきたい」という意識が必要なのです。

規約を守ることはもちろん大切なのですが、真に納得できないものなのにそのまま守っているだけでは何も発展しないので、始めから「皆に納得してもらえる規約」を作るか、皆が精査して改善の声を上げていける環境を作ることも非常に大切でしょう。

メンテナンスしやすい

先に挙げたように、HTMLコーディング規約を作る理由の一つは管理しやすくするためです。管理、もっと言うとメンテナンス(保守)しやすい規約ほど好ましいということになります。

作った本人しかそのコードを見ないならあまり問題はないのでしょうが、本来複数人が関わるプロジェクトでは、コーディング担当の人と、メンテナンス担当の人は違うことがあります。制作物をクライアントに納品しても、そのメンテナンスを引き続きお願いされることもあれば、また違う制作会社が担当することもあるでしょう。

メンテナンス中のサイト

本来コーディングは人によって書き方がちょっとずつ違うので、読み取るには苦労が伴うものです。もともと難しいのですから、少しでも見やすいように工夫するのはごく正当なことだと言えます。

そもそも制作チーム内の人同士でも読み取るのが難しいコードなら、なおのことクライアント側が受け取って「読みやすい」と感じるはずがありません。その後のメンテナンスのために規約をしっかり定めていくことが大切なのです。

常に更新され続けている

コーディングしていく中で「これはよくない」「これでは成果が上がらない」といった規約も出てくることと思います。規約は守らなければなりませんが、場合によっては軌道修正していく柔軟さも大切です。

なぜHTMLコーディング規約を作るのか?というと、いいものを作るのが目的にあるはずです。制作会社・制作チームによって規約には違いが見られますが、広く評価されているGoogleコーディング規約をベース・参考にしている会社は多くあります。Googleコーディング規約は常にブラッシュアップされており、この点も評価されている部分なので、やはり「常に更新され続けている」というのは相当に重要な点なのだと判断できるでしょう。

HTMLのコード

規約がそのプロジェクトにとって最適かどうかは、その規約を運用しているコーダーが一番よく分かります。あるプロジェクトが完了した際、以下のようなことを考えるのは非常に有意義なことです。

  • ・納得感を持って規約を守れたか?
  • ・効果を感じない規約はなかったか?
  • ・どんな規約ならもっとよくなる?

こういった部分を見直していくと、自ずと作るべき規約が見えてきます。一度作ったらもう改変したらダメ!いうことはありません。規約はコードを見るすべての人のためにあるものなので、よりよいものにしていく意識は必要です。

世間の流れを汲んでいる

WEBプログラムは時代と共に便利に進化していくものなので、それならば自分達が使うHTMLコーディング規約も、それに倣ってどんどん自分達に合うように新しいものを取り込みながら、進化させていくことが大切でしょう。

売上

どんな分野でも同じだとは思いますが、WEBの世界は特に情報の行き来が非常に膨大で活発な分野ですから、進化のスピードも早く、そして激しいものとなります。進化とはそれ自身がどんどん良くなろうとする自然的な現象なので、「進化が早い」というのは本来好ましいことです。

現状に甘んじて、頑なに規約を進化させないでいると世間に取り残されてしまうので、最新のものを追っていくことは必要だと言えます。

W3Cに準拠している

W3CとはWEB業界の標準化を図る団体のことで、現在WEBに関わる世界中の会社・個人に広く影響を与えています。Web技術にはさまざまな仕様や規格が存在しており、際限なくバラバラな規格で製品を作っていると、そのユーザーが困り果ててしまいます。

つまりは互換性の話なのですが、これはあなたが今見ているブラウザを例に挙げるとわかりやすいと思います。たとえばGoogle Chromeでは設計した通りにちゃんとサイトが表示されるのに、Mozilla Firefoxではレイアウトが大きく崩れてしまう。

これではFirefoxユーザーに不親切ですし、ブラウザが違うとデザインも変わるというのはそのサイト自体も不安定というレッテルが貼られてしまいます。だからこそWEBの標準化に従うことはサイトの評価を下げないためにも重要なことなのです。 W3CではHTMLコーディングについても標準化を目指しており、その仕様が公開されています。製品(サイト、サービスなど)の評価を下げないために、まずこの仕様に準拠していくと間違いがありません。

標準化して互換性の高いWebサービスならユーザーに喜ばれますし、サイトならユーザビリティの確保によって検索サイトに評価される・・つまりSEOの強化につながります。そのためW3Cに準拠したコーディングは好ましいとされているのです。

全般的なスタイルルール

優れたHTMLコーディング規約とは一体どういうものなのか?が分かってきたものと思いますが、実際にプロはどのようなコーディング規約を使っているのでしょうか?具体的に見たほうがわかりやすいので、ここで弊社が使っているコーディング規約を公開いたします。

プロトコル

埋め込みリソースからプロトコル表記httpsを使用する。(http,https)を省略する書き方は非推奨とする。

一般的な書式ルール

インデント

半角スペース2つ分もしくはTabでインデントする。Tabとスペースを混在させない。

大文字/小文字

すべて小文字のみ使用する。(名称のテキストは除く)

文末のスペース

文末の余計なスペースは削除する。

全般的なメタルール

エンコード

エンコードは、UTF-8(BOM無し)を使用する。

OGPタグの記述

指示がある場合は、下記のOGPタグを記述。

※テキストの_______下線部分は指示書内の文言を入力。
※パスの_______下線部分を適切に入力。

コメント

必要に応じてコードの説明を記述する。

TODOコメント

コードにTODO(TODO内容)をコメントとして記述する。@@のようなものではなくTODOキーワードだけ使用する。

ページャー付きページのcanonicalタグについて

新着一覧、製品一覧などのページでページャーが付くページには、headタグ内にcanonicalタグを記述する。

thumbnailメタタグ

<head>タグ内にモバイル検索結果にサムネイル画像を表示させるためのthumbnailタグを記述する。

HTMLのスタイルルール

ドキュメントタイプ

HTML5を使用する。以下で始まる形式で書く。
すべてのHTMLに<!DOCTYPE html>があるのがGood。
XHTML5はNG。HTMLとしては正しいとしてもvoid要素は閉じないように。いわゆる<br />ではなく<br>を使う。

HTMLのバリデート

可能な限り適切なHTMLを記述する。
パフォーマンスが低下するような場合でない限りは、できるだけ正確に記述する。
「W3C HTML validator」などの検証ツールを使用して確認する。

セマンティックに書く

目的に応じたHTMLを記述する。
例えば、見出しならh*要素、段落ならp要素、アンカーならa要素など目的に応じたHTML要素を使用する。
目的に応じてHTMLを使用することは、アクセシビリティ、再利用、およびコード効率の理由から重要。

マルチメディアの代替コンテンツ

マルチメディアの要素には、代替コンテンツを提供。画像には、意味のある代替テキストをalt属性に記述する。動画・オーディオコンテンツはキャプションを記述する。純粋に装飾的な用途の場合など意味を持たない画像については、代替テキストは使用しない。(alt=””とする)

構成関係の分離

HTML構造・見た目(CSS)・動作(Script)は、厳密に分離し3つの関係はできる限り最小にすること。
見た目に関するものはCSSに、振る舞いに関するものはSCRIPTへ記述する。
構造・見た目・動作を分離することは、メンテナンス上の理由から重要。HTMLドキュメントとテンプレートを変更する方が、スタイルシートとスクリプトを更新するよりもコストがかかる。

実体参照

実体参照は使用しないこと。UTF-8においては、&mdash;, &rdquo;, or &#x263a;のような文字は実体参照を使う必要はない。例外としてHTMLで特別な意味を持つ文字( < や & など)は適用される。

type属性

CSSとScriptのtype属性は省略する。HTML5ではデフォルトで解釈される。

HTMLの書式

全般的な書式

ブロック・リスト・テーブル要素は改行し、それらのすべての子要素にはインデントを入れる。
(リスト項目間の空白に関する問題が発生した場合は、すべてのli要素を1行にまとめることが可能。)

<section>タグについて

<section>タグを利用する場合、直下には<h1>〜<h6>がないといけない。見出しになる内容がない場合は<div>タグを使う。

<nav><header><footer>タグについて

グローバルナビには<nav>タグを使用する。ページ共通部分のヘッダーには<header>タグを使用する。ページ共通部分のフッターには<footer>タグを使用する。

HTMLクオテーションマーク

属性値にはダブルクオテーションを使う。属性値に使うクオテーションは、シングル ’ よりもダブル ” が好ましい。

外部リンク target=”_blank”について

外部にリンクしている、<a>タグにrel=”noopener noreferrer”を記述する。ただし下記へのリンクに関しては、rel=”noopener noreferrer”は必要なし。

  • ・Twitter Facebook Google関係等のリンク
  • ・自サイト内でのリンク

CSSスタイルルール

CSSのバリデーション

可能な限り正確なCSSを記述する。CSSバリデーターにバグがある場合や独自の構文を必要としない限りは、正確なCSSコード書くこと。W3C CSS validatorなどのツールで検証テストする。

IDとクラスの命名

IDとクラス名には意味のある名前を使うこと。表示名や不可解な名前ではなく、具体的な名前を付ける。
(これらの名前は最も理解しやすく、変更される可能性が最も低いため。)

IDとクラスの命名スタイル

必要最低限の長さでIDとクラス名を使うこと。

CSSセレクタ

CSSに、h div p等のタグをセレクタに指定しないで、必要に応じてクラスを割り振る。親セレクタも同様にタグ指定はしない。

その他

imgタグのsrcsetの記述

imgタグにはsrcsetを記述しRetinaディスプレイで適切な画像が出力させるようにする。

フォントサイズの指定

vw vhなどのブラウザサイズに依存するサイズ指定はしない。原則としてpx remなどの固定指定を使用。
※デザイン上レイアウトの保持などが困難な場合は、部分的に使うことも可能。

OSおよび対応ブラウザ

PC OS

Winsdows、Mac

ブラウザ

Windows:Edge、Chrome、FireFox Mac:Safari

レスポンシブ
(PC/スマホ)
PC OS

Winsdows、Mac

ブラウザ

Windows:Edge、Chrome、FireFox Mac:Safari

スマホ OS

Android7~、iOS12~

ブラウザ

Android:Chrome、iOS:Safari

レスポンシブ
(PC/スマホ/タブレット)
PC OS

Winsdows、Mac

ブラウザ

Windows:Edge、Chrome、FireFox Mac:Safari

スマホ OS

Android7~、iOS12~

ブラウザ

Android:Chrome、iOS:Safari

スマホ OS

Android7~、iOS12~

ブラウザ

Android:Chrome、iOS:Safari

※Edge、Chrome、FireFox、Safariは最新版。

レスポンシブにおけるリキッドとソリッド

レスポンシブにおいてブレイクポイントの指定が特段無い場合以下の内容

  SP タブレット PC PC大画面
~767px 768~991px 992~メインコンテンツ幅 メインコンテンツ幅~
配置ルール 常に縦並び 規定の画面幅を下回ると縦並びになる  
可変 リキッド ソリッド

CMSが入っているページについて

一覧ページの1ページ内表示件数は一定数とは限らない。 1ページ表示件数に満たない場合もある。 表示件数が変化しても、レイアウトが崩れないようにする。 特にグリッド表示のデザインの場合には注意。

一覧ページ・詳細ページともに表示されるテキスト文字数は一定ではない。 文字数が多くなっても、少なくなってもレイアウトが崩れないようにする。 一覧ページ・詳細ページともに画像がアップロードされているとは限らない。

no imageのような形でデザインされている場合はよいが、no imageがデザインされていない(画像自体を非表示)の場合は画像がなくてもレイアウトが崩れないようにする。

作業中のプログラマー

ここまでが実際に弊社が使っているコーディング規約のすべてです。先ほど挙げた、優れたコーディング規約の条件を完璧に満たした規約であり、常に見直しをすることで、よりよいコーディングができるように努めています。

コーディングに関する困りごと、ご要望に対応

コーディングでお困りのことはありませんか?弊社ではWEBに関わる方や会社様向けに高品質なHTMLコーディングサービスを提供中です。

  • ・社内にコーダーがいない、足りない
  • ・SEOに強いコーディングを求めている
  • ・モバイルマーケティングに力を入れたい
  • ・納期が近いけど、外注は手間が掛かる

上記のような困りごと、ご要望のある方のご相談を受け付けています。

↓お問い合わせはこちら↓
コーディングの外注に関するお問い合わせ

社内にコーダーがいない、足りない

デザインをメインに行っている会社だけど、コーディングの量が多い案件が入ってくること、ありませんか?デザイナーに比べてコーダーが少ないと、なかなかコーディングが進まなくて大変ですよね。コーダーを増やしたいけど、いつもコーディング案件が入ってくるわけではないと、採用するのも人件費の問題で厳しい面があることと思います。

コーディングのみでも外注しようと思っても「結構な費用がかかりそう」と考える方も少なくないのですが、弊社は高品質なのに適正価格での受注を実現しています。なぜこの価格で抑えられるのか?というと、以下のような理由によるためです。

  • ・効率重視でムダを削減
  • ・広告費を削減

今回説明している通り、弊社はHTMLコーディング規約を常に最新のものに保ち、時代に合わせて改善、そして作った規約はしっかり守る、を遵守しています。見やすいコードを心掛けているのでムダが生じにくいですし、手間がかかりません。

HTMLのコード

また、広告費をあまりかけていないのですが、これはより安くサービスを提供したいという思いのためです。今、弊社のブログ・ホームページを見てくれている皆様にこそ、本当にコスパのいいサービスを受けてもらいたい、このために弊社は努力しております。

「安いところはどこも海外スタッフを使っているのでは?」このように思われることの多い業界です。サイト設計やデザインは非常に繊細さが要求されるため、クライアントの要望を微妙なニュアンスも含めて、確実に汲み取らなければなりません。日本語の分からない海外(オフショア)スタッフを挟むとどうしてもそういった意図が伝わらない・・そういった面は確かにあると思います。

しかし、弊社は日本人スタッフのみでも適正価格に抑えているのです。やはりムダが少ないという点が大きく、実際に高いコスパで満足いただけているので、コーダー不足でお悩みの方はぜひ弊社を頼っていただければ損はさせません。

SEOに強いコーディングを求めている

SEO

コーディングはSEOにとって重要なポイントの一つとされています。少し前までのSEO評価は被リンクの数(どれだけのサイトにリンクされているか)の比重が大きかったのですが、今最重要とされているのは、「どれだけユーザーにとって有益なのか」という部分です。

他にも「W3Cに準拠したコーディングかどうか」も重視されており、SEOのためにもW3Cに準拠することは大切、というのはWEB制作者にとって一つの常識となっています。 当然、弊社もW3Cに準拠した最先端技術コーディングを心掛けていますし、Webマーケティングを数多くの会社様に提案している実績があるため、より高度なSEO対策を提供可能です。

SEOに強いサイトを作ってもっと集客したい、商品・サービスを訴求したいとお考えの会社様は、ぜひ運営20年で培った経験と知見、そして最新のSEOを常に取り入れている弊社にご相談いただければと思います。

モバイルマーケティングに力を入れたい

近年ではスマホからのサイト閲覧がパソコンを上回っており、これまでPCサイトをメインに考えていた会社様が一挙にモバイルマーケティングに取り組むようになりました。PCサイトは手を抜くわけではなく、PC・スマホサイトどちらも大切にしていく。そうお思いの方には「リキッドレイアウト」を用いた弊社のコーディングサービスがお役立ちするはずです。

さまざまなデバイス

リキッドレイアウトとは、ブラウザに合わせてサイトコンテンツのサイズを変動させるデザインのことで、どんなスマホから見ても横スクロールバーが出ない(横にはみ出さない)特徴があります。 現在では小さな画面のタブレット、大きな画面のスマホなど画面サイズが多種多様に存在する時代なので、あらゆるデバイスのブラウザに合わせて変動するリキッドレイアウトの 強みが非常に大きく効いているのです。

弊社コーディングサービスではリキッドレイアウトによって、どんなタブレット・スマホからアクセスしても見やすいサイトを実現し、集客効果を高めます。なお「PCサイトのみ」「スマホサイトのみ」でのご依頼もOKです。どんなサイトにすればいいのか迷っている方であれば、こちらからお客様に合ったものを提案できますので、何なりと不安な点をご相談ください。

納期が近いけど、外注は手間が掛かる

タイムスケジュール

たとえばいくつかの大きな案件を抱えており、納期に間に合うか厳しい状態だけど外注に頼んでも手間が掛かりそう・・そうお困りであれば、弊社コーディングサービスを頼ってみませんか。

弊社では二重チェック体制を取っているので、修正による戻しの可能性を下げ、結果的に納品スピードを早めることにつながっています。コーディング担当スタッフが対応したものを、もう一回別のスタッフが第三者としてチェック。その際にiPhone・Androidなど機種の違いによるレイアウトのブレがないかも、しっかりチェックしています。

こうすることで高品質かつスピーディーな納品を実現でき、実際に多くの迅速さが要求されるご依頼も高品質にて対応してきました。納期が近いけど外注も不安、というお客様はまずは弊社で見積もりいただければと思います。

HTMLコーディング規約とは?【まとめ】

HTMLのイメージ

HTMLコーディング規約を作って、それを守ることにはメリットしかありません。むしろ、何もルールなしにコーディングするのは、WEB制作の現場においてはご法度です。そこはクリアしていても、古い規約や効果の上がらない規約をずっと守っているチームもあるかもしれません。

弊社はHTMLコーディングサービスに自信を持っているので、実際に使っている規約も自信を持って公開できますし、お客様からは高品質と満足いただけております。ほかにもWordPressやLP制作のご相談にも対応可能です。WEB制作会社様や広告代理店様などWEB関連のお仕事をしている方は、ぜひ弊社のコーディング下請け・外注サービスをお頼りください。

↓お問い合わせはこちら↓
コーディングの外注に関するお問い合わせ

web作成、1度はこんなことありませんか?

最後まで記事を読んでくださりありがとうございます!

ここまで読んでくださった方々の中には、Web制作を行っている方、企業や個人の宣伝としてwebで宣伝されている方など たくさんいらっしゃるかと思います。

しかし、個人でweb作成をされている方、企業としてweb作成をされている方、
お問合せページに使いにくさをかんじてませんか?

たくさんの方々からお問い合わせが来ると、お客様への返信の管理やその他機能に物足りなさを感じませんか?

あるいは、メールフォームに拡張機能を追加しようとするとほしい機能が有料だった…なんてこともありませんか?

そんな方のお悩みを解決するツールが、、
EasyMailという完全無料のメールフォームです!

弊社ではEasyMailというオープンソースメールフォームCMSを展開しております!

今まではかゆいところに届かなかった、もっとカスタマイズ性が高いものが欲しい、などなどお客様の声をふんだんに反映したものになっております!

大事なことなのでもう一度言いますが、完全無料です!

詳しくは弊社のEasyMail特設ページをご覧ください!

【EasyMail】URL:https://www.mubag.com/

EasyMailメインイメージ

 

株式会社ファーストネットジャパンでは、1998年の創業から培ってきた知見・経験を基に、良質かつユーザー第一のWEBサイトを制作して参りました。

弊社は、コーポレートサイト・採用サイト・ECサイト・LPサイトなど、様々なWEBサイトの制作に対応しております。

またSEO対策・SNS運用・リスティング広告運用などWEBマーケティングも得意としており、集客にお悩みの方はぜひご相談ください。

まずはお気軽にお問合せください。

お見積り、外注のご相談はこちらをクリック

 

お気軽にご相談ください

成果の出るホームページのご提案をさせていただきます。
集客や売り上げに直結するノウハウなどもございます。まずは一度お問い合わせください。

最新の制作実績

弊社サービス