コーディングベース コーディングの代行・外注は
品質と実積のコーディングベースへ

簡易
お見積りはこちら

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

Guideline
  • Home
  • コーディングガイドライン

コーディングベースはクオリティの均一化や作業効率化を図るため、以下のガイドラインに沿って制作を進めます。
案件やページに応じて最適なものに変更することがあります。

  • HTML

    • マークアップ

      サイトの特性やコンテンツ内容を把握し各ページに適したマークアップを行う。
      セクショニング構造を意識したセマンティックなコーディングを心がける。

    • コードの記述ルール

      文字コードはUTF-8とする。
      半角カタカナは使用しない。
      通貨記号や著作権マークなど機種依存文字はエンティティ文字を用いる。

    • コメント

      ソースの構造把握や視認性向上のためコメントを挿入する。
      その際、誰が見ても分かりやすいコメントになるよう心がける。
      使われないコードをコメントアウトしたまま残さないこと。

    • DOCTYPE

      HTML Living Standard
      <!DOCTYPE html>

    • viewport

      <meta name="viewport" content="width=device-width">

    • パスの記述ルール

      CMSの自動出力によるパス構造またはルート相対パス

    • SSI

      インクルードファイルは「inc」ディレクトリ内にまとめる。

    • タグのアルファベット表記

      要素名や属性名は小文字で記述する。

    • <title>タグ

      下記のように縦棒（両側に半角スペース）で区切る。
      ページ名 | サイト名
      または
      ページ名 | カテゴリ名 | サイト名

    • <meta>タグ

      既存サイトがある場合は参考にする。
      キーワードは半角カンマで区切る。

    • <section><article><aside><nav>タグ

      セクショニング要素は適切に用い、レイアウト目的のみでは使用しない。
      <section>タグ内の最初の要素として<hX>タグを設置する。
      <section>タグ内に見出しを設定できない場合は<section>タグを用いない。

    • <header><footer>タグ

      ヘッダーやフッター要素は<header><footer>タグで囲む。

    • <nav>タグ

      グローバルナビに限らず、ローカルナビやパンくずリストなども<nav>タグで囲む。

    • <hX>タグ

      文書構造に沿った最適な見出しを用いること。
      サイトタイトルまたはページタイトルにあたる要素には<h1>タグを設定する。

    • <figure>タグ

      参照用の図表やイメージは<figure>タグを用いる。
      その際のキャプションは<figcaption>タグを用いる。

    • <img>タグ

      画像の代替テキストをalt属性で設定する。
      装飾用の画像や、同内容のテキストが隣接する場合は「alt=""」とする。

    • <ul><ol>タグ

      順序に意味がある場合は<ol>タグを用いる。
      例：料理のレシピは<ul>、料理の手順は<ol>

    • <label>タグ

      フォームパーツの項目名に使用する。

    • <input>タグ

      ラジオボタンのname属性は必須とする。
      <label>のfor属性と<input>のid名を一致させる。

    • 外部サービスのタグ

      SNSや解析ツールのタグを設置する場合は提供元が推奨する方法で実装する。

    • パンくず

      ホームから当該ページまでの遷移をリスト化する。

  • CSS

    • バージョン

      CSS3

    • 文字コード

      UTF-8

    • 制作環境

      SASS(SCSS)を使用

    • ファイルの設置場所

      assetsディレクトリ内

    • フォントファミリー

      Webフォントの指定がない場合は下記のセットを使う。
      'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック体', YuGothic, '游ゴシック', 'メイリオ', 'Meiryo', sans-serif

    • 命名ルール

      文書構造上意味のある名前にする。
      ローワーキャメル方式。

    • セレクタについて

      1行につき1プロパティを記述する。
      2つ以上のショートハンドプロパティは一括で指定する。

    • 色の指定

      HEX（16進数6桁）またはRGBAで指定する。
      作業効率を優先させるため大文字小文字のルールはなし。

    • コメント

      メンテナンス性を考慮した簡易な見出しを心がけること。

    • CSSハック

      CSSハックの使用は極力避けること。

  • JavaScript

    • 標準ライブラリ

      とくに指定がない限りjQueryを使用する。

    • jQueryのバージョン

      1系と2系はセキュリティ脆弱性があるため3.xを使用すること。

    • スクリプトの場所

      外部ファイル化して可能な限り<head>内で読み込むようにする。

    • 文字コード

      UTF-8
      サイト外から読み込むファイルは文字コードを変更しない。

    • コメント

      メンテナンス性を考慮した丁寧な説明を心がけること。

    • 変数名

      ローワーキャメル方式またはアンダースコアで区切る。

    • ファイルの設置場所

      assetsディレクトリ内

  • ファイル

    • ファイル名

      ハイフンとアンダースコアおよび半角英数字を用い、英字は小文字を使用する。
      先頭にハイフンとアンダースコアを用いない。
      最大26文字とする。
      サイトと連動した意味のある英単語が望ましい。
      連番を用いる場合は2桁の数字で揃える。
      ファイル名には拡張子をつける。
      WordPressのURLと連動するテンプレート名はハイフン区切りがが望ましい。

    • 画像ファイルの設置場所

      assets/imagesディレクトリ内
      共通ファイルは直下に設置する。
      その他の画像は各ページに対応したディレクトリを作成する。

    • 画像のファイル形式

      基本的にWebPかsvgを使う。
      WebPの場合は<picture>タグを使ってレスポンシブ対応およびWebP非対応ブラウザ対応を行う。
      WebP非対応ブラウザ
      jpg、pngともに適切な圧縮で軽量化を図る。

    • 高解像度ディスプレイ対応

      表示サイズの2倍で書き出す。

  • その他

    • ディレクトリ名

      ハイフンとアンダースコアおよび半角英数字を用い、英字は小文字を使用する。
      先頭にハイフンとアンダースコアを用いない。
      最大26文字とする。
      サイトと連動した意味のある英単語が望ましい。
      連番を用いる場合は2桁の数字で揃える。

    • チェック

      構文チェックツールを用いて文法チェックを行う。
      デザインと並べてマージンやフォントサイズなどの表示チェックを目視で行う。
      リンク先やJavaScript機能のチェック、フォームの送受信テストを行う。