検索

HTMLコーディングルール

弊社が設置するテンプレートは、基本的にはルールに従った作りになっています。そのテンプレートを作成した際のルールを以下に記載してあります。テンプレートを例にコーディングを進め、迷ったときにこちらのルールを確認するようにしてください。

目次

  1. HTMLバージョン
  2. 文字コード
  3. コーディング時のインデント
  4. jQuery
  5. 対応ブラウザ
    1. Windows
    2. Mac
    3. スマートフォン
  6. 印刷対応
  7. ディレクトリ構造
  8. 命名規則
    1. 共通ルール
      1. 良い例
      2. 悪い例
    2. ファイル・フォルダ・freoページID
    3. JSファイル
  9. 品質管理
    1. Nu Html Checker
    2. HTML-lint
  10. その他の便利ツール（任意）
    1. HTML Coding Checker
    2. META SEO inspector

HTMLバージョン

HTML5を使用してください。

<!DOCTYPE html>

文字コード

UTF-8を使用し、BOM無しのUTF-8で保存してください。

<meta charset="utf-8">

コーディング時のインデント

4スペース分のインデントを取ってください。

誤った例

修正しなくてはいけない要素が極めて多い状態ですが、インデントは4スペース分を取って、開始タグと閉じタグも合わせてください。

<div>
  <section>
  <h2>ホームページ制作</h2>
  <p>お客様の事業の成功へと導くホームページ制作です。</p>
</section>
  <section>
  <h2>ロゴ制作</h2>
  <p>企業の顔となるロゴ制作です。ブランドアイデンティティを保つため統一ルールも一緒に制作します。</p>
  </section>
  </div>

正しいインデントの例

<div>
    <section>
        <h2>ホームページ制作</h2>
        <p>「好きなもの、私らしく」をコンセプトに女性向けのヘアーアクセサリーやアクセサリー、服飾雑貨など季節に合わせてトレンドのファッションアイテムを中心にライフスタイルを提案するブランドです。</p>
    </section>
    <section>
        <h2>ロゴ制作</h2>
        <p>企業の顔となるロゴ制作です。ブランドアイデンティティを保つため統一ルールも一緒に制作します。</p>
    </section>
</div>

jQuery

基本は最新版を使用。プラグインを使用し、かつ古いバージョンが必要な場合は、バージョンダウンOKとします。

対応ブラウザ

以下のブラウザを標準対応のブラウザとします。案件によっては変動がある可能性もあります。

Windows

  1. Google Chrome 最新版
  2. Microsoft Edge 最新版
  3. Firefox 最新版

Mac

  1. Safari 最新版
  2. Firefox 最新版
  3. Google Chrome 最新版

スマートフォン

  1. iOS Safari最新版
  2. android Chrome最新版

印刷対応

基本的には非対応ですが、案件によっては必要となる場合があります。その際には、通常のスタイルシートとは別に印刷用に、print.cssを用意し、linkタグで読み込みます。既存のスタイルシート内に記述する書き方はNGとします。

<link href="/css/print.css" media="print" rel="stylesheet">

ディレクトリ構造

バージョンアップに伴い、必要なファイル、保管されているファイルは変更されることがあります。また、特に説明が必要ないファイルは以下に記載をしていません。サイトに応じて適宜判断をしてください。

制作者はコーディングが必要なファイルです（プロジェクトにより差があります）
 .com ルートディレクトリー
├ css
│  ├ reset.css------------------：WEB・管理ページ共通リセット用
│  ├ style.css------------------：制作者WEB 1,280px以上
│  ├ pc.css---------------------：制作者WEB 1,279px以下、1,025以上
│  ├ tablet.css-----------------：制作者WEB 1,024以下、601px以上
│  ├ smart.css------------------：制作者WEB 600px以下
│  ├ admin.css------------------：管理ページ PC用
│  ├ adminSmart.css-------------：管理ページ SP用（max-width:640px）
│  ├ iframe.css-----------------：管理ページ iframe PC用
│  ├ iframeSmart.css------------：管理ページ iframe SP用
│  ├ dropzone.css---------------：管理ページ dropzone用
│  ├ setup.css------------------：管理ページ セットアップ画面用
│  ├ colorbox.css---------------：colorbox
│  ├ common.css-----------------：共通のスタイルシート
│  ├ default.css----------------：共通のスタイルシート
│  ├ document.css---------------：PDF書き出し時のスタイルシート
│  ├ error.css------------------：エラー表示用
│  ├ jquery.subwindow.css-------：問合せフォーム subwindow
│  ├ slickmap.css---------------：slickmap
│  └ validationEngine.jquery.css：問合せフォーム validation
│
├ images----------------------：制作者画像一式
│  ├ bg-----------------------：CSSで使用する背景画像
│  ├ common-------------------：ヘッダー・フッターなど共通パーツで使う画像
│  ├ img----------------------：ページ内で使用する画像
│  │ ├ about------------------：.com/about ページで使用する画像
│  │ └ area-------------------：.com/area ページで使用する画像
│  │ - ├ tokyo_01.jpg-----------：.com/area/tokyo ページで使用する画像
│  │ - ├ saitama_01.jpg---------：.com/area/saitama ページで使用する画像
│  │ - └ tokyo----------------：.com/area/tokyo の内部階層の写真
│  │  --- ├ shibuya_01.jpg------：.com/area/tokyo/shibuya の写真
│  │  --- └ shibuya_02.jpg------：.com/area/tokyo/shibuya の写真
│  │ ├ top_01.jpg---------------：トップページで使用する画像
│  │ └ top_02.jpg---------------：トップページで使用する画像
│  ├ colorbox-----------------：カラーボックスで使用する画像
│  ├ header-------------------：ヘッダーで使用する画像
│  ├ icons--------------------：アイコン画像、アイコンSVGファイル
│  ├ tablesorter--------------：管理画面で使用するテーブル順序入替
│  └ video--------------------：.mp4などの動画ファイル
│
├ js
│  ├ plugins------------------：freoのプラグインで必要なJSを格納
│  │ └ forms.js-----------------：フォームで使用するファイル
│  ├ common.js------------------：freoの設置パスを設定するファイル
│  ├ jquery.js------------------：管理ページ用
│  └ admin.js-------------------：管理ページ用
│
├ bxslider--------------------：オプションのbxslider
├ configs---------------------：設定ファイル
├ database--------------------：データベース（SQLite用）
├ files-----------------------：アップロードファイル
├ libs------------------------：メインプログラム
│  ├ freo---------------------：freoメインプログラム
│  └ smarty-------------------：smartyメインプログラム
├ mails-----------------------：メールテンプレート
│
├ templates-------------------：テンプレート
│  ├ internals----------------：内部で使用するファイル
│  │ ├ admin------------------：管理ページ
│  │ ├ category---------------：制作者カテゴリー
│  │ │- ├ default.html----------：デフォルトファイル。指定がないときに使用されるファイル
│  │ │- └ top.html--------------：top カテゴリーで使用されるファイル
│  │ ├ default----------------：制作者トップページ
│  │ │- └ default.html----------：.com/ で使用されるファイル
│  │ ├ entry------------------：制作者バックナンバー
│  │ │- └ default.html----------：デフォルトファイル。指定がないときに使用されるファイル
│  │ ├ login------------------：管理ページログイン
│  │ ├ page-------------------：制作者内部ページの大元テンプレート（2行下との違いに注意）
│  │ │- ├ default.html----------：デフォルトファイル。指定がないときに使用されるファイル
│  │ │- └ about.html------------：.com/about で使用されるファイル
│  │ └ view-------------------：制作者エントリー
│  │ │- ├ default.html----------：デフォルトファイル。指定がないときに使用されるファイル
│  │ │- └ 15.html---------------：.com/view/15 で使用されるファイル
│  ├ page---------------------：制作者内部ページ（個別ファイル）
│  │ ├ about.html---------------：.com/about の内容
│  │ ├ about
│  │ │- ├ staff.html-----------：.com/about/staff の内容
│  │ │- ├ president.html-------：.com/about/president の内容
│  │ │- └ map.html-------------：.com/about/map の内容
│  │ ├ services.html-----------：.com/services の内容
│  │ ├ services
│  │ │- ├ paper.html------------：.com/services/paper の内容
│  │ │- ├ print.html------------：.com/services/print の内容
│  │ │- └ web.html--------------：.com/services/web の内容
│  │ └ area
│  │ - ├ tokyo.html-------------：.com/area/tokyo の内容
│  │ - ├ saitama.html-----------：.com/area/saitama の内容
│  │ - └ tokyo
│  │  --- ├ toshima.html---------：.com/area/tokyo/toshima の内容
│  │  --- └ shibuya.html---------：.com/area/tokyo/shibuya の内容
│  ├ plugins------------------：プラグイン格納ファイル
│  │ ├ form-------------------：フォーム
│  │ │- ├ form----------------：制作者特定のテンプレートを指定する際のフォルダー
│  │ │--│ ├ estimate.html-------：.com/form/estimate のフォームで使用されるファイル
│  │ │--│ └ pamphlet.html-------：.com/form/pamphlet のフォームで使用されるファイル
│  │ │- ├ form.html-------------：指定ファイルがない場合のフォームで使用されるファイル
│  │ │- ├ preview.html----------：送信確認画面
│  │ │- └ complete.html---------：送信完了画面
│  │ └ page_all---------------：ページ一括表示
│  │ - ├ default.html-----------：基本テンプレート
│  │ - ├ slickmap.html----------：slickmap
│  │ - └ megamenu.html----------：megamenu
│  ├ footer.html----------------：制作者フッター共通
│  ├ header.html----------------：制作者ヘッダー共通
│  └ utility.html---------------：制作者サイドバー共通
│
├ templates_c----------------：コンパイル済みテンプレート
├ tinymce--------------------：TinyMCE
├ vendor---------------------：mpdf用ファイル
├ .htaccess--------------------：mod_rewriteの設定や転送設定（取り扱い要注意）
├ config.php-------------------：設定ファイル
├ index.php--------------------：起動ファイル
└ robots.txt-------------------：検索エンジン用

命名規則

WEBサイトは制作者とは別の人が管理をすることはよくあることです。なので、誰がいつ作業をしても分かるような統一ルールを定めてあります。規定に従ってファイル名、フォルダー名、freoのページIDを命名することで、メンテナンス性の向上、ミスの削減、一貫性の向上、ファイル名を考える時間の削減につながります。

共通ルール

  1. 半角英数字のみを使用する。
  2. 記号は「-」（ハイフン）、「_」（アンダースコア）のみ使用する。
  3. 全角スペース、半角スペースは使用しない。

良い例

about_01.html
about_01.jpg
test_03.svg

悪い例

埼玉県.html
WEBサイト_01.jpg
test@.php

ファイル・フォルダ・freoページID

  1. ファイルの内容を推測できるような英単語を使用したファイル名、ページIDにする。
  2. フォルダーの内容を推測できるような英単語を使用したフォルダ名にする。

JSファイル

jQueryライブラリーをダウンロードして使用する際は、bxsliderフォルダーと同様のアップロードの仕方をしてください。ライブラリーの名称が分かるように、ファイル一式をサーバーにアップロードしてください。

 .com ルートディレクトリー
├ bxslider-------------------：オプションのbxslider
└ parallax-------------------：例 parallaxのフォルダー

品質管理

以下のツールを利用してチェックを行ってください。

Nu Html Checker

https://validator.w3.org/nu/
Errorは全て修正必須とし、Warningはサイトの構成上修正できないエラーは許容範囲とする。

HTML-lint

http://www.htmllint.net/html-lint/htmllint.html

重要度4以上のエラーの修正は必須とし、サイトの構成上修正できないエラーは許容範囲とする。

その他の便利ツール（任意）

便利ツールとして参考に記載しておきます。

HTML Coding Checker

https://chrome.google.com/webstore/detail/html-coding-checker%EF%BC%88%CE%B2%E7%89%88%EF%BC%89/pjpdbehajmbnicjjdfclnenlcnnmgbog?hl=ja
チェック機能を取り揃えたchrome拡張ツール。

META SEO inspector

https://chrome.google.com/webstore/detail/meta-seo-inspector/ibkclpciafdglkjkcibmohobjkcfkaef?hl=ja
TDKH（title, description, keyword, h）の確認なども可能なMETA TAGの確認ツール。