AGLのコーディングルール

エディターの一般的な設定

エンコーディングは UTF-8です。
改行コード (End of Line Sequence) は LFを使用します。
タブ（半角スペース2つ）でインデントします。

例: settings.jsonでVSCodeを設定します。

{
  "files.encoding": "utf8", /* Encoding is UTF-8 */
  "files.eol": "\n", /* Line break code is LF */
  "editor.tabSize": 2, /*Tab is 2 half-width spaces */
}

ディレクトリ/ファイルの命名

ディレクトリ名/ファイル名に使用できる文字は以下の通りです。
- "a" ～ "z" の小文字 (1 byte)
- "0" ～ "9"の数字 (1 byte)
- "-" (ハイフン), "_" (アンダースコア) (1 byte)
英語名
スペースや他の特集文字は使用しないでください。
ディレクトリ名/ファイル名に複数の単語がある場合は、単語間に"-"(ハイフン)を追加してください。

マークアップ

<!DOCTYPE html> と <html lang="ja"> を必ず宣言すること。
HTML W3Cの検証
HTMLの構文とタグを正しく記述すること。
タグ名と属性は小文字を使用すること。
使用していないCDNライブラリを追加しないこと。また、複数のCDNを使用する場合は、CDNを1つに統一した方がい良いです。

メタタグ

必ずcharset="UTF-8"を記述すること。
title, description, keywordなどのタグはheadタグ内に記述すること。 (指示がない場合は空でも問題がありません).

見出しタグ

1ページには<h1>タグを1つしか使わないこと。<h1>タグにはロゴではなく、そのページの重要なタイトルを1つ含めること。
ページの見出しタグは文書の構造に合わせて使用すること。
- もし <h4> タグがあれば、その前に <h3>, <h2> タグがなければなりません。
- セクション内の見出しタグのフォントサイズは h2 > h3 > h4 > h5 > h6のルールに従う必要があります。
普段、見出しタグは section, aside, article タグに含まれます。

リンク/ボタンタグ

リンクの先が明確でない場合はhref="#"で指定します。
外部リンクは target="_blank" を設定する必要があります。
リンク領域は正しい位置に配置すること。
リンクはシングルターゲットではなく、ブロックとして扱う必要があります。
お客様より別の指定が来る場合以外、すべてのリンクはデフォルトで opacity: 0,7 と transition を指定する必要があります。
リンク/ボタン要素には、cursor: pointer の設定を適用する必要があります。

画像タグ

imgタグ内には必ずaltを記述すること。altにセクションまたはアイテムのメインタイトルを、ロゴのaltにウェブサイト名を含めてください。
ファーストビューの画像またはお客様よりの指示がある場合以外はimgタグにloading="lazy"属性を追加すること。
デバイス画面の幅によって異なる画像を使う場合は、pictureタグを使用してください。
レスポンシブ時に画像が歪まないように注意してください。
モバイルやRentina画面では、画像がx2比率になるようにしてください。

リンク、スクリプトタグ

type 属性を使用する必要がありません。
Google Fontを使用する場合は、ページの読み込みを最適化するために、CSSでインポートせず、<link>タグを使用したほうが良いです。

dl, dt, dd タグ

FAQ（よくある質問）リストに使われています。

HTML5のタグ

mainタグはメインコンテンツに1回しか使用できません。
navタグはグローバルナビゲーションに1回しか使用できません。
sectionには最低1つの見出しタグがなければなりません。ない場合はsectionではなく、divタグを使用してください。
timeタグは記事/イベントの日付と時刻を表示するのに使われます。

スタイリング

CSS

CSS W3Cの検証

特別な場合以外、font-size, line-height, letter-spacingはrem, emなどの相対値で指定してください。

/* 悪い例 */
.elem {
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.4px;
}

/* 良い例 */
.elem {
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}  

属性のプロパティと値は小文字を使用する必要があります。

/* 悪い例 */
.elem {
  COLOR: #FFF;
  background-color: RED;
}

/* 良い例 */
.elem {
  color: #fff;
  background-color: red;
}  

属性はすべてのブラウザで一般的に使われているものを使用してください（Cross-Browser）。そうでない場合は、お客様に確認する必要があります。
お客様の指示でクラスを自分で作れない場合以外、できればidを使ってCSSを記述しないようにしてください。
!importantの使用はできるだけしないようにしてください。

SCSS

階層はできるだけ少なくすること。（3レベル以内でのみネストされます）。
できればmixinsの乱用は避けてください。純粋なCSSにビルドされた際にコードが最適化できない場合があるからです。

WordPressのシングルページ以外、SCSSではhtml要素名を直接に使用せず、クラス名を使用すること。

<div class="c-box">
  <h2 class="c-box__title">title title title title title</h2>
  <p class="c-box__desc">desc desc desc desc desc desc desc desc</p>
</div>

/* 悪い例 */
.c-box { 
  padding: 20px;
  h2 {
    color: blue;
  }
}

/* 良い例 */
.c-box { 
  padding: 20px;
  &__title {
    color: blue;
  }
}

変更必要なクラスにメディアクエリを設定すること。

/* 悪い例 */
.c-block {
  background-color: #fff;

  &__element {
    color: #000;
  }
}

@media (max-width: 767px) {
  .c-block {
    background-color: #000;
  
    &__element {
      color: #fff;
    }
  }
}

/* 良い例 */
.c-block {
  background-color: #fff;

  @media (max-width: 767px) {
    background-color: #000;
  }

  &__element {
    color: #000;

    @media (max-width: 767px) {
      color: #fff;
    }
  }
}

Flocss & BEM

Flocss と BEM　に従ってクラス名を命名すること。

すべてのタグにクラスをつける必要がありません。

<!--クラス名の例-->
<div class="c-sample">
  <figure class="c-sample__img">
    <img class="c-sample__img__img1" alt="img" src="/">
  </figure>
  <div class="c-sample__text c-sample__text--red">
    <p class="c-sample__text__text1">title title title</p>
  </div>
</div>

クラス名は長すぎるものや多くの親クラスをネストするものにしないようにしてください。

<!-- 悪い例 -->
<div class="c-list">
  <div class="c-list__card">
    <div class="c-list__card__info"> <!-- Not recommended -->
      <figure class="c-list__card__info__img"> <!-- Not recommended -->
        <img alt="img" src="/">
      </figure>
      <div class="c-list__card__info__text"> <!-- Not recommended -->
        Title title title
      </div>
    </div>
  </div>
</div>

<!-- 良い例 -->
<div class="c-list">
  <div class="c-list__card">
    <div class="c-list__info">
      <figure class="c-list__img">
        <img alt="img" src="/">
      </figure>
      <div class="c-list__text">
        Title title title
      </div>
    </div>
  </div>
</div>

フォント

フォントに関しては、お客様から提供いただいたデザインの通りに実装する必要があります。
フォントが明確でない場合、またはフォントがない場合、すぐにお客様に確認すること。
お客様の許可がなく勝手にインターネットからフォントをダウンロードしてフォントファイルをfont-faceに変換してはいけません。ほとんどの日本語フォントは著作権で保護されています。勝手に使用すると法律違反になります。
フォントファミリーの末尾には必ずフォントのフォールバック（sans-serif, serif...）を付けてください。

メインフォントは最も包括的なタグ（通常はbodyタグ）に指定する必要があります。

body {
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

フォントサイズはrem単位で、小数点以下の桁数は1つのみに指定してください。例: font-size: 2.5rem.

Javascript

定数

変更なく一貫して使用される定数は大文字と"_ "(アンダースコア)で宣言すること。

const SITE_URL = 'https://...';

変数と関数

JavaScriptでの変数・関数は、camelCase形式で宣言されます。始めの単語は小文字で、次の単語う以降は最初の文字を大文字で書きます。

var companyName = 'Allgrow Labo';

function showName(name) {
  console.log(name);
}

ライブラリ

スライダー/カルーセル

デフォルトでautoplayモードを設定すること。
できれば Swiperを優先的に使用するようにしてください。

パララックス

パーフェクトピクセル

デザインミスまたは顧客の要件の場合以外、成果物はデザインと完全に一致する必要があります。

ブラウザとデバイス

Webサイトが下記のブラウザ(クロスブラウザ)と実際のデバイス(クロスデバイス)で見る時に正常に表示されるように実装すること。

OS	ブラウザ	デバイス
Windows	Chrome, Firefox, Edge	Window PC
MacOS	Safari	iMac, Macbook
iOS	Safari	iPhone, iPad
Android	Chrome	Android Device

ブレークポイントとシミュレーション

基本的にほとんどのデザインはレスポンシブ対応が必要です。また、ブレークポイントはデザインによって変わります。具体的な指示がない場合、ブレークポイントの基準は以下の通りです。

サイズ	チェックポイント	仮想環境
1025px以上	レイアウトが崩れない	PC
768px~1024px	レイアウトが崩れない	Tablet
320px~767px	レイアウトが崩れない	SP

:::備考レスポンシブ対応とパーフェクトピクセルでのチェックを効率的に行うために、ブレークポイントを追加することができます。 :::

Wordpress

HTMLをWordPress化した後の表示は崩れが発生しないようにしてください。
レイアウトをheader.php, footer.php, sidebar.phpなどの適切なファイルに分割すること。
HTMLが存在しないページは404ページを表示させること。
管理画面のメイン言語を忘れずに「ja」に設定してください。編集中に英語にすることができますが、編集後に必ず日本語に戻してください。
管理画面のデフォルトの背景色を設定すること。
忘れずにメニューをアクティブにしてください。
正確にページングの処理を実装するようにしてください。
WordPress のデフォルト関数を、それらの機能に応じて正しく使用すること。例:
- Header: get_header() 関数を使用して header.php ファイルをインクルードします。wp_head() 関数を header.php ファイルに忘れずに配置してください。
- Footer: get_footer() 関数を使用して footer.php ファイルをインクルードします。wp_footer() 関数を footer.php ファイルに忘れずに配置してください。
- Get link: get_template_directory_uri() 関数を使用して、css ファイルと js ファイルのリンクをセットします。
- Loop: シングルページでもループを使用する必要で、wp_reset_postdata()関数を使ってループを終了します。
コーディングする際は、常に最適化を考慮して不必要なコードや使用していないコードを避けるようにしてください。
Wordpressテンプレートのファイル構造とテンプレート読み込みの優先順位を明確に理解すること。
全てのページに正しいtitle, meta descriptionを設定すること。

シングルページのCSSはクラス名ではなく、HTML要素名を使用してください。

.content {  
  h1 { ... }  
  h2 { ... }  
  p  { ... }  
  ul { ... } 
  ... 
}

PHP

PHPでの変数名/関数名は、camelCase 形式で宣言すること。
定数は大文字で、"_" (アンダースコア) で区切る必要があります。
PHPコードは <?php ?> タグ内に記述して、echoではなく <?= ?> ショートタグを使用すること。

情報セキュリティ要件

許可なく勝手にプロジェクトの情報（デザイン、ソースコード、データ...）を第三者（AGL社員を含む）に共有しないこと。
未公開のプロジェクトをSNSなどで共有しないこと。

AGLのコーディングルール

エディターの一般的な設定​

ディレクトリ/ファイルの命名​

マークアップ​

メタタグ​

見出しタグ​

リンク/ボタンタグ​

画像タグ​

リンク、スクリプトタグ​

dl, dt, dd タグ​

HTML5のタグ​

スタイリング​

CSS​

SCSS​

Flocss & BEM​

フォント​

Javascript​

定数​

変数と関数​

ライブラリ​

スライダー/カルーセル​

パララックス​

パーフェクトピクセル​

ブラウザとデバイス​

ブレークポイントとシミュレーション​

Wordpress​

PHP​

情報セキュリティ要件​