コーディングガイドライン

一般的なメタルール

・エンコーディング

UTF-8（BOMなし）を使用してください。
エディターがバイトオーダーマークなしで、文字エンコードとしてUTF-8を使用していることを確認してください。

<meta charset="utf-8">

・コメント

必要に応じてコードを説明してください。

HTMLのスタイルルール

・ドキュメントタイプ

特に指示がない限りはHTML5を使用してください。

<!DOCTYPE html>

・マークアップ

マークアップはコーディングにおいてとても重要な作業です。
HTMLの本質は文書の構造化であり、マークアップはそのための手段です。
HTMLタグ一つひとつの意味を理解し適切に判断し、正しいマークアップを心がけてください。

・HTMLのバリデート

可能な限り適切なHTMLを記述すること。
そうでないとパフォーマンスが低下するような場合でない限りは、きちんと書く。
「W3C HTML validator」などの検証ツールを使用する。

<!-- NG -->
<title>Test</title>
<article>This is only a test.

<!-- OK -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

・セマンティックに書く

目的に応じてHTMLを記述する。
見出しならh要素、段落ならp要素、アンカーならa要素など目的に応じたHTML要素を使う（「HTMLタグ」
リンクならa要素で書く。onclickのようなJavaScriptな振る舞いのものを要素を極力属性に入れない。

<!-- NG -->
<div onclick="goToRecommendations();">All recommendations</div>

<!-- OK -->
<a href="recommendations/">All recommendations</a>

・メディアの代替コンテンツ

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

<!-- NG -->
<img src="spreadsheet.png">

<!-- OK -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

・type属性

CSSとJavaScriptのtype属性は省略する。 HTML5ではデフォルトの言語として解釈されるため省略することが可能です。

<!-- NG -->
<link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css">

<!-- OK -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">

<!-- NG -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>

<!-- OK -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

HTMLの書式ルール

・HTML引用符

属性値の引用符は、ダブルクオーテーション(")を使用する。

<!-- NG -->
<a class='maia-button maia-button-secondary'>Sign in</a>

<!-- OK -->
<a class="maia-button maia-button-secondary">Sign in</a>

CSSスタイルルール

・CSSのバリデート

可能な限り適切なCSSを記述すること。
CSSバリデーターにバグがある場合や独自の構文を必要としない限りは、きちんと書く。
HTML同様W3C CSS validatorなどのツールで検証する。

・IDとクラスの命名

IDとクラス名にはちゃんと意味の分かる名前を使うこと。
見た目を反映したものやそれが何を表しているか不可解な名前ではなく、要素の目的や役割を反映した名前を付ける。

また、可能な場合は、BEM記法での命名を推奨する。

・単語の間はハイフン1個（例： block-name）
・Block と Element の区切りはアンダースコア2個（例： block-name__element）
・Modifier はハイフン2個（--）の後に付加する（例： block-name__element--modifier）

/* NG: 意味が無い */
#yee-1901 {}

/* NG: 見た目を表してる */
.button-green {}
.clear {}

/* OK: 役割を表してる */
#gallery {}
#login {}
.video {}

/* OK: 汎用的な名前 */
.aux {}
.alt {}

/* BEM記法 */
block
block__element
block__element--modifier
block--modifier
block--modifier__element

・「0」と単位

値が「0」なら単位を省略する。

margin: 0;
padding: 0;

・小数点の頭の「0」

小数点の頭の「0」は省略する。

font-size: .8em;

・URI値の引用符

url()での指定において、""（ダブルコーテーション）や''（シングルコーテーション）などのURI値の引用符を省略すること。

@import url(//www.google.com/css/go.css);

・HEX形式のカラーコード

HEX形式（16進数）のカラーコードで3文字で表記できるものは3文字にする。

/* NG */
color: #eebbcc;

/* OK */
color: #ebc;

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

font-size
remで指定してください。

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

/* NG */
font-size: 16px;
line-height: 20px;

/* OK */
font-size: 1.6rem;
line-height: 1.5;

CSS書式ルール

・ブロック単位のインデント

階層がわかるようにブロック単位でコードをインデントする。

@media screen, projection {
    html {
        background: #fff;
        color: #444;
    }
}

・プロパティの終端

すべてのプロパティの終端はセミコロンを書くこと。

/* NG */
.test {
    display: block;
    height: 100px
}

/* OK */
.test {
    display: block;
    height: 100px;
}

・プロパティ名の終端

すべてのプロパティ名の終端にはコロンの後にスペースを入れること。

/* NG */
h3 {
    font-weight:bold;
}

/* OK */
h3 {
    font-weight: bold;
}

CSSメタルール

・セクションのコメント

第三者が見て分かるようにセクションごとにコメントを記述する。

/* Header */
#adw-header {}

/* Footer */
#adw-footer {}

/* Gallery */
.adw-gallery {}

JavaScriptルール

1. 極力、HTMLとCSSで対応できないものにのみ使用してください。
2. 何をしているものかコメントを付けてください。
3. 対応する全てのブラウザ、端末で動作チェックを行ってください。
4. 見ただけでは分からないようなエラーがでていないか各ブラウザのデベロッパーツールのコンソールで確認してください。
5. 外部JavaScriptファイルの読み込みは、原則として</body>の直前で行ってください。
6. </body>の直前での読み込みだと動作に問題がある場合は<head>...</head>内で読み込んでください。
7. 全て、もしくはほとんどのページで使用するものはcommon.jsにまとめてください。

画像ルール

・JPEG・PNG・GIFの使い分け

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

PNG-32(24)
透過色がある画像に使用してください。
ファイルサイズが肥大化しがちなので、極力使わずに済むようにスライスを工夫してください。

PNG-8
256色に収まるイラスト・ボタン・アイコンなどに使用してください。

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

レスポンシブ対応について

・Viewportの設定

以下の設定を標準としますが、案件の仕様によっては変更して使用してください。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

・ブレイクポイントについて

768pxとコンテンツ幅を標準としますが、案件の仕様によって変更してください。

@media only screen and (min-width: 768px) {
    /* スタイル */
}

@media only screen and (min-width: 1080px) {
    /* スタイル */
}

WordPressについて

・WordPress本体

特に指定がない限り、WordPress本体および各プラグインは最新の安定版を使用してください。
本体は、 WordPress.orgよりダウンロードしてください。

・テーマの命名規則

企業名・案件名・ブランド名などユニークなものを使用してください。

・初期ユーザー名とパスワードについて

ユーザー名 : 企業名 or 案件名 or ブランド名 + _ad
パスワード : 生成したpassword

下記のような自動生成ツールを用いてください。
http://www.luft.co.jp/cgi/randam.php

・固定ページについて

各Pテンプレートの.phpを作成し固定ページでテンプレートとして呼び出して使用してください。

・投稿データの取得について

原則として「WP_Query」を使用してループを設定してください。

・CSS,JSファイル等の読み込みについて

原則としてfunctions.phpで一元管理してください。
CSSやJavaScriptの読み込みはheader.phpに書くこともできますが、functions.phpでwp_enqueue_style()、wp_enqueue_script()をアクションフックに登録して読み込むことが推奨されています。

// 例
  function add_files() {
    // cssを読み込む
    wp_enqueue_style( 'theme_style', get_template_directory_uri() . '/style.css', array(), '1.0.0' );

    // j-Queryを読み込む
    wp_deregister_script('jquery');
    wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false );

    // jsを読み込む
    wp_enqueue_script( 'common_script', get_template_directory_uri() . '/js/common.js', array( 'jquery' ), true );
  }
add_action( 'wp_enqueue_scripts', 'add_files' );

・プラグインについて

WP Multibyte Patch（必須）
日本語などのマルチバイト文字を正しく扱えるようにするためのプラグインです。

Contact Form 7
お問い合わせフォームの作成に使用します。
郵便番号の自動入力が必要な場合は、yubinbango.jsを使用してください。
https://github.com/yubinbango/yubinbango

Duplicate Post
投稿や固定ページの複製に使用します。

Master Slider
施工事例等、スライダーが必要な際に使用します。

WP-PageNavi
ページネーションを使用する際に使用します。

Breadcrumb NavXT
パンくずリストを作成する際にに使用します。

Classic Editor
旧エディターと、TinyMCE、メタボックスなどを含む以前のスタイルの投稿編集画面レイアウトを有効化します。

Custom Post Type UI
カスタム投稿タイプおよびカスタムタクソノミーの作成に使用します。

その他ルール

・メールアドレスのリンク設定

SPAM対策のために、下記のサイトのような暗号化メールアドレスの生成サービス「安全性：中」を使用して暗号化してください。
http://www.luft.co.jp/cgi/coding.php

JavaScriptで対応が難しい場合は、「安全性：低」などを使用しエンティティ化で対応してください。

・検証・対応ブラウザ

以下のブラウザを標準対応のブラウザとします。
なお、案件によっては対応ブラウザを拡張する場合もあります。

[PC/タブレット/スマホ]
・Internet Explorer 11
・Edge 最新版
・Firefox 最新版
・Chrome 最新版
・Safari 最新版
・iOS Safari 最新版
・iOS Chrome 最新版
・Android Chrome 最新版

禁止事項

・text-indent: -9999px; 等でテキストを読めない状態
・font-size: 0; 等で文字サイズが小さすぎて読めない状態
・height: 0; 等で高さを消し読めない状態

一般的なスタイルルール

・大文字