01.はじめに

コーディングルールとは特定のコードの書き方のルールや約束事を定めたもののことを指します。

コーディングルールを作成し遵守することで、コードが読みやすくなり、バグの抑制、開発効率アップ、メンテナンス性の向上などの手助けにもなります。

その結果、いつ、誰がコードを作成したかによらず、誰もがコードを理解し、必要に応じて変更できるようになります。

このコーディング規約は新規でウェブサイトを作成するときに適応します。
保守・運用案件の場合は、そのウェブサイトのガイドラインを適用してください。

本ルールは改変が必要な際、随時更新いたします。

02.6つの方針

  • 文書構造的に正しいマークアップを行なってください。
  • 意味を持たないタグ（divやspanなど）を過剰に使用したコードを書かないでください。
  • コンテンツの増減で崩れない構造にしてください。
  • 同一サイトでダブルスタンダードなことをしないでください。
  • 同一デザインのスタイルを2つ以上作成しないでください。
  • 自分でコーディングしたものの品質に責任を持ってください。

HTMLコーディングはクオリティが表面に現れにくい作業です。
どんなに無駄なコードが多くても見た目や動きがデザインと合っていれば、ユーザーが使うものとしては問題ないと言えます。

しかし、Webサイトは作って終わりではなく、その後には必ず更新があります。
それがコーディングを担当した人ではないことは多々ありますし、半年後、1年後ということもあります。

そのため、更新性を考えずにデザインをただ再現しただけの冗長なコードや、その場限りのコードを書いてしまうと、更新する人はコードの把握に時間がかかります。また、問題も起こりやすくなりますし、更には問題が起きたときにも原因の特定が難しくなります。

以上の理由から、HTMLコーディングは単にデザインを再現するだけではなく、後のことやを考え更新性のあるコードにする必要があります。

03.Webサイトの仕様について

HTMLバージョン HTML5
対象OS・ブラウザ

【パソコン】
Windows10：Edge最新版、GoogleChrome最新版、Firefox最新版

【スマホ】
iOS最新版のデフォルトブラウザ、AndroidOS最新版のデフォルトブラウザ
文字コード UTF-8（BOMなし）
HTML5ではUTF-8の使用が推奨されているため、UTF-8を標準とします。
他の文字コードも指定することはできますが、文字化けなどへの配慮が必要になります。
また、UTF-8であれば、表現できる文字の範囲が広いため、関連するファイルがUTF-8で統一されている場合、不必要に文字コードを気にする必要がなくなるというメリットもあります。
ただし、BOMの有無で文字化けが起こるので、BOMなしのUTF-8になっていることを確認してください。
パス指定 案件毎のルールに則る。
機種依存文字 実体参照に変換して記述してください。
文字コードがUTF-8の場合、Unicodeに対応したフォントであれば実体参照にしなくても問題なく表示することができます。
しかし、閲覧環境はユーザーによって異なり、ユーザー側でカスタムすることも可能なため、Unicodeに対応したフォントで閲覧しているとは限りません。
よって、より確実に表示するために実体参照で記述することを推奨します。

04.HTML設計指針

基本ルール

  • W3Cに準拠したマークアップを行なう。
  • 無駄な改行や余計なスペースをなくし、見出し（h1、h2など）、段落（p）、リスト（ul、liなど）、定義（dl、dt、dd）などの役割にあったタグで正しく構築する。
  • タグ、属性、id、class名などはすべて小文字を使用する。
  • 属性の全ての値はダブルコーテーションでくくる。
  • CSS、JSファイルの挿入の際、type属性は省略可能のため省略する。
  • jQueryなど外部のCSS、JSファイルの挿入の際、「http:」「https:」から記述してリンクする。
  • 閉じタグについては、省略可能なものも省略せず、全て記述する。
  • <img>タグの / （バックスラッシュ）などはHTML5では省略可能のため省略する。
  • <img>タグにおいて、alt属性については必須とする。
    （altを追加すると前後の文章と内容が重複する場合は、空の状態で追加する）
  • idについては、リンクでのアンカーのために設定が必要な場合、JSなどのシステムからの指定の際に必要な場合を除き、原則として使用しない。
  • 空タグ（中身のないタグ）がなるべく発生しないようにする。

HTML5

HTML5で構成する。
主に必要な要素は下記の通り（構成によって変更あり）。

  • ヘッダー部分 - <header>
  • フッター部分 - <footer>
  • グローバルナビゲーション - <nav role="navigation">
  • コンテンツ全体 - <main role="main">
  • メインコンテンツ部分 - <section>

ページタイトル

（例）ページタイトル｜祖先カテゴリ｜サイト名

OGP（Open Graph Protocol）

<meta>設定

<meta name="twitter:card" content="summary_large_image">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:site_name" content="">
<meta property="og:type" content="website">
<meta property="og:url" content="https://">
<meta property="og:image" content=" https://img/img_ogp.png>

OGP画像

推奨サイズ：1,200px×630px

推奨ファイルの拡張子：.png

ファビコン

推奨ファビコンサイズ

  • 16px×16px
  • 32px×32px
  • 180px×180px
  • 192px×192px

SVG・JPEG・PNG・GIFの使い分け

SVG

ロゴやアイコンなどの単純な画像を容量軽く美しく表示したい際に使用してください。

JPEG

写真などのフルカラーの画像や、グラデーションがかかっている等、色数が多い画像に使用してください。

PNG

透過色がある画像に使用してください。

GIF

GIFアニメーションにのみ使用してください。

サイズが大きすぎる画像をなるべく使わない

撮影した写真をそのままホームページに掲載すると、たとえサイズを小さくしていてもそのページの表示に大変時間がかかります。Squooshなどで画像の容量を小さくしてください。

著作権フリーでない画像は使わない

作者の許可なく、イラストや画像を無断で掲載すると著作権の侵害となるおそれがあります。

ホーム > 祖先カテゴリ（ある場合） > 親カテゴリ（ある場合） > ページタイトル

※ページタイトル以外はリンクを付与する。

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

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

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

（例）<a href="/" rel="noopener">外部リンクURL</a>

印刷対応

基本的には非対応ですが、案件によっては必要となる場合があります。

1ページのファイルの容量をなるべく軽くする

容量が大きいファイルはインターネットで表示させる時に時間がかかります。
表示が遅いと見ている人もイライラしたり、途中で見るのをやめてしまう場合もあります。

ファイル名、フォルダ名は半角英数にする

ファイル、フォルダには半角小文字英数で名前を付けます。日本語だとインターネットでは表示できません。

05.CSS設計指針

基本ルール

  • 文字コードはHTMLに合わせる。
  • CSSの記述は、基本的にHTMLファイルに直接記述せず、外部CSSファイルに記述し読み込む。
  • Dart Sassを採用（注）@importは非推奨になるため、@useと@forwardで記述
  • 作成したid、classにはなるべくコメントを残してください。

CSSファイルの分割

  • Dart Sassでファイル分割管理したものをコンパイル時に「style.css」になるべく統一してください。

ディレクトリ/ファイル構成

| css/
　|- style.css（生成されるCSS）
　|- style.min.css（生成されるMinified化CSS）

| scss/
　|- base/（リセットとサイト共通定義）
　　　|- _reset.scss（リセットCSS）
　　　|- _common.scss（サイト共通定義）
　|- mixin/（サイト内で何度も使うデザイン定義群）
　　　|- _btn.scss（ボタンデザイン）
　　　|- _font.scss（書体関係デザイン）
　　　|- _form.scss（フォームデザイン）
　　　|- _media.scss（メディアクエリ）
　　　|- _other.scss（その他）
　|- module/（ブロック（パーツ）単位のSCSSファイル群）
　　　|- _ブロック名.scss
　|- page/（ページ専用CSSが必要な時に使用するファイル群）
　　　|- _index.scss（トップページ専用デザイン定義）
　|- setting/（変数管理ファイル群）
　　　|- _config名.scss（サイト共通変数）
　|- style.scss（使用するSCSSをインポートするファイル）

セットフォーマットルール

  • 1行1プロパティとし、プロパティにはインデントを付ける。
  • プロパティが1つの場合は1行で記述しても可。
  • セレクタ名のあと、半角のスペースを1つあけて「{」を入力する。
  • 各プロパティの前にはタブをつける。
  • タブ（2スペース分）のインデントを使用して整形。
  • 各プロパティの後に「:」と半角スペースを1つ空けて値を書く。
  • 値の後には「;」を付ける。
  • 汎用性のあるセレクタはclassで指定する、font（size、weight、styleなど）やbackgroud（color、image、position）などの複数あるプロパティは、まとめて記述するなどの簡潔な書き方をする。

id、classの命名規則

  • すべて小文字の半角英数字で命名する。
  • できるだけ簡潔でありながら何を意味してるか分かる名前にする。
  • 汎用性のあるclassについては簡潔にするために、単語を連結せずに使用する場合もある。
    （例：.b 、.u など）
  • アンカーリンクの対象となる要素を除き、原則としてclassのみを使用してコーディングしてください。
    アンカーリンクの対象となる要素に関しても、通常通りにclassでスタイルを付与した後に、アンカーリンク用としてidを付与してください。

id

アンカーリンクに使用するので、対象となるコンテンツ名を英訳したIDを付与します。

class

原則としてBEM＋FLOCSSのルールになるべく従って命名してください。
子要素は「__」、バリエーションや兄弟要素は「--」で接続することとします。

プロパティの記述規則

  • font を除き、プロパティは一括して指定する。
    （ border-style、border-size、border-color などはすべて border にまとめる、
    margin、padding はまとめて記述する、など。）
  • 「0」の値の単位は省略する。
  • 色の指定は可能であれば3文字の16進数表記を使用し、16進数以外での指定しない。
    また、16進数の表記については半角小文字の英数字とする。
  • プロパティの記述はW3Cが推奨している視覚順でなるべく記述をしてください。
    • 視覚整形モデル
    • ボックスモデル
    • 背景
    • 色
    • フォント
    • 表
    • UI
    • アニメーション
    • その他

（例）CSS記述順序

  • 視覚整形モデル

    display
    flex
    flex-grow
    flex-flow
    flex-direction
    flex-wrap
    justify-content
    align-items
    align-self
    visibility
    opacity
    list-style
    position
    top
    right
    bottom
    left
    z-index
    float
    clear
    transform

  • ボックスモデル

    width
    height
    margin
    padding
    overflow
    border
    box-sizing
    box-shadow

  • 背景

    background

  • 色

    color

  • フォント

    font
    font-style
    font-size
    line-height
    font-family
    letter-spacing
    text-decoration
    text-align
    text-indent
    text-transform
    white-space
    word-break
    word-wrap
    text-shadow

  • 表

    border-collapse
    border-spacing
    vertical-align

  • UI

    content
    counter-increment
    counter-reset
    outline
    cursor

  • アニメーション

    transition
    animation

  • その他

    direction
    widows

ベンダープレフィックスについて

ベンダープレフィックスの順序には見た目以上の理由はありませんが、ベンダープレフィックスなしのプロパティは必ず最後に指定してください。
ベンダープレフィックス付きのプロパティはブラウザが独自に拡張したものや、勧告候補前のものを先行実装しているものですが、ベンダープレフィックスなしのプロパティは正式にサポートされたものです。
よって、正式にサポートされたプロパティが有効ならそちらが適用されるように、ベンダープレフィックスなしのプロパティは最後に指定します。

ベンダープレフィックス記述順序

  • -webkit-
  • -moz-
  • -ms-
  • ベンダープレフィックスなし

調整用Classについて

調整用Classとは、.mb0 { margin-bottom: 0; }や.txtcenter { text-align: center; }のような、単一のプロパティを持つ汎用的なClassのことで、このようなClassの使用は極力避けるべきです。

よくあるのが同じ種類のタグが連続するコンテンツの最後の要素に対して下マージンを消すために.mb0と指定している場合です。
この場合はコンテンツの最後なので.lastChildというクラスを付けた方が適切ですし、Classさえついていれば複数のプロパティを指定でき、他の箇所でも使用できるため汎用性があります。

調整用Classの使用が許容されるケースとしては、表の中でセル別にテキスト位置を指定したいときや、フォーム要素の幅で例外を指定したいときなど、限定的な状況です。
理想としてはこういった部分にもClassを付ける方が適切と考えられますが、Classの個数が多くなりがちで、それぞれに適切に命名していると時間がかかってしまううえに、Classを指定しても単一のプロパティしか指定しないことが多いので、微調整用クラスを使っている状態と大差がないため、許容範囲とします。

フォント周りの単位指定について

font-size

remで指定してください。

line-height

原則として単位なしで指定してください。

フォントサイズの指定方法や単位には様々なものがありますが、扱いが容易なremを使用します。
remはrootであるHTMLタグのフォントサイズを基準とした相対値指定なので、HTMLタグでfont-sizeを10pxに設定しておくと、14pxにしたければ1.4rem、26pxにしたければ2.6remというように、計算が非常に簡単で、親要素のフォントサイズに影響されないというメリットがあります。

line-heightは「行間を指定するプロパティ」と誤解されやすいですが、正確には「行の高さ」を指定するプロパティです。
つまり、「行と行の間の余白の値」を直接指定しているわけではなく「（フォントも含めた）行の高さ」を指定することで、間接的に行間の余白が決定されているということになります。

line-heightはpxなどの絶対値と、%・em・単位なしなどの相対値を取ることができ、値は子孫要素に継承されます。
line-heightを絶対値で指定している時、その値よりもfont-sizeの値が大きくなった場合に行が重なるという問題が発生します。
この問題は値が継承されることにより、意図しない箇所で発生することが多いです。
line-heightを相対値で指定していれば、font-sizeにline-heightの値が掛け合わされた値となり、font-sizeがどんな値でもそれに応じた行の高さになるので、この問題を回避することができます。
また、相対値指定では単位に違いはありますが、フォントサイズに対して値を掛け合わせるという点では同じなので、一番シンプルに書ける単位なしを標準とします。
絶対値で指定している場合でも、line-heightを指定し直すことで行の重なりを解消することはできますが、複数の要素に対して絶対値で上書きし直すよりも、必要な場合以外は上書きする必要がないように原則として相対値で指定するものとします。

06.JavaScript

基本ルール

  • jQueryは基本は最新版を使用。プラグインを使用し、かつ古いバージョンが必要な場合は、バージョンダウンOKとします。
  • HTMLとCSSで対応できないものにのみ使用してください。
  • 何をしているものかコメントを付けてください。
  • 対応する全てのブラウザ、端末で動作チェックを行ってください。
  • 見ただけでは分からないようなエラーがでていないか各ブラウザのデベロッパーツールのコンソールで確認してください。
  • 外部JavaScriptファイルの読み込みは、原則として</body>の直前で行ってください。
  • </body>の直前での読み込みだと動作に問題がある場合は<head>...</head>内で読み込んでください。
  • 全て、もしくはほとんどのページで使用するものはcommon.jsにまとめてください。

JavaScriptは便利ですが、些細な処理でもブラウザにとっては負荷になってしまいます。
よって、HTMLとCSSで対応できることまでJavaScriptを使ってしまうと、多少なりともパフォーマンスは落ちてしまうので、安易に使用するべきではありません。
また、JavaScriptを使用すると、スクリプトの動作チェックも必要となるうえ、使用している言語が増えるのでコード理解に時間がかかることに繋がります。
そのため、本当に必要な箇所でのみJavaScriptを使用し、使用する際は何のためのJavaScriptかコメントを記述してください。

JavaScriptファイルの読み込みは<head>...</head>内に記述してしまうと、ブラウザによっては該当のファイルの読み込みが完了するまで他のファイルの読み込みをブロックするものがあるため、</body>の直前とします。
しかし、中にはHTMLや画像の読み込みが終わる前に実行しておく必要のあるものがあります。
そのスクリプトがどのタイミングで実行されるべきかをよく考えて読み込み・実行の記述位置を判断してください。

07.WordPress

基本ルール

  • WordPressは制作時点で最新のバージョンを使用。
  • セキュリティを考慮し、プラグインは極力使用しない。
  • カスタマイズはコアファイルを操作せず、テンプレートファイル内で完結するよう設計してください。
  • 使用したプラグインや注意事項などは納品時の仕様書にまとめ作成してください。
  • 投稿方法をわかりやすくまとめたマニュアルを作成してください。

パス指定

本番サイト・テストサイトの階層が違う場合でも、テーマファイルなどの記述はそのまま使えるようになるべくテンプレートタグを使ってパスを指定してください。

  • <?php echo home_url(); ?>
    サイトのTOPページのURLを取得　例）https://example.com
  • <?php echo site_url(); ?>
    WordPressが設置されている場所のURLを取得　例）https://example.com
  • <?php echo get_template_directory_uri(); ?>
    テーマフォルダへのルートパスを取得　例）https://example.com/wp-content/themes/my_theme
  • <?php bloginfo('url'); ?>
    サイトドメイン直下のルートパスを取得　例）https://example.com/

    • おすすめのプラグイン

    • WP Multibyte Patch
      WPで日本語などのマルチバイト文字を正しく扱えるようにするためのプラグインです。
    • SiteGuard WP Plugin
      セキュリティを向上させることができるセキュリティプラグインです。
    • WP-optimize
      データベースの最適化・画像圧縮・キャッシュの設定で不要なデータを削除し、サイトのパフォーマンスを向上させるプラグインです。
    • Resize Image After Upload
      写真をアップロードするときに指定したサイズに自動的にリサイズするプラグインです。
    • Yoast Duplicate Post
      ユーザーは任意の種類の投稿を複製したり、新しい下書きにコピーしてさらに編集したりできるプラグインです。