LICTOOR

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

常に高品質なサイト制作を目指すべく、弊社では独自のコーディングガイドラインを設定しています。
その一部を、以下にてご紹介いたします。

(最終更新日:2017/08/31)

  1. 1.基本方針
  2. 2.HTML
  3. 3.CSS
  4. 4.その他

1.基本方針

1.1. 対象ブラウザ

対象ブラウザとバージョンは以下の通りです。

  • Internet Exploler 11 以上
  • Edge 最新バージョン
  • Google Chrome 最新バージョン
  • Safari 最新バージョン
  • Firefox 最新バージョン
  • Safari for iOS 最新バージョン
  • Android 標準ブラウザ OS4.4 以上

※Internet Exploler は、対象バージョンの拡大につきましてご要望がございましたらご相談に応じます。

1.2. 文字コード・改行コード

文字コード及び改行コードは、HTML、スタイルシート、JavaScript すべて、基本的に下記の通りとします。

  • 文字コード:UTF-8
  • 改行コード:LF

1.3. ファイル・フォルダ構成

ファイル・フォルダ構成は基本的に下記の通りとします。


ドキュメントルート

  • index.html(サイトのTOPページのHTML文書)
  • assets
    • css(スタイルシート)
    • images(画像)
      • common(サイト内全体で共通で使用する画像を格納)
      • 個別フォルダA(個別コンテンツで使用する画像をそれぞれ格納)
      • 個別フォルダB
      • ...
    • js(JavaScript)
  • 個別フォルダA(個別コンテンツで使用するHTML文書をそれぞれ格納)
    • index.html
  • 個別フォルダB
    • index.html
  • ...
  • 固定ページのHTML文書
  • sitemap.xml(ご要望に応じて)
  • robots.txt(ご要望に応じて)

1.4. 命名規則

ファイル・フォルダの命名規則は、基本的に下記の通りとします。

  • 英単語(適したものがない場合はローマ字を使用)を用いて、ファイル・フォルダの役割を明示する。
  • 指定がない限りは、すべて小文字を使用する。
  • 複数の英単語を使用する場合は、ハイフン(-)で英単語を連結する。


画像ファイルの命名規則は、基本的に下記の通りとします。

  • 画像ファイルは、その画像が持つ役割に応じて接頭辞(後述)を付し、任意の命名を行う。複数の画像を使用する場合は、末尾に2桁の連番をつける。
    (例)logo-brand.png, img-model-03.jpg
  • 接頭辞は下記を使用する。
    • bg:背景画像
    • bnr:バナー
    • btn:ボタン画像
    • icon:アイコン画像
    • img:画像全般
    • logo:ロゴ画像
    • txt:画像テキスト全般
  • スマートフォン用の画像、マウスホーバー時の画像には、それぞれ「状態」オプションとして「-sp」、「-hover」をつける。
    (例)logo-brand-sp.png, img-model-03-hover.jpg

1.5. 画像形式

弊社では、ご要望をいただいた場合に限り、SVG(ベクターデータ)を使います。それ以外の場合は下記の理由により、基本的に JPEG, PNG などのビットマップデータを使用します。

  • SVG は特殊な視覚効果を用いることができるが、画像の差し替えを行う場合、それに伴う CSS や JavaScript の調整が必要となり、後のサイト管理の負担が大きくなる可能性があるため。
  • JPEG, PNG であれば、画像を差し替える際に上記の作業の必要がなく、シンプルに扱うことができるため。

2.HTML

2.1. HTMLバージョン

弊社では、基本的に HTML5 を使用します。
但し、HTML4.01, XHTML を使用した既存ページの改修においては、現行のバージョンに従います。

2.2. マークアップの検証

マークアップの検証には、Web の標準・各種仕様を策定する W3C が提供する「The W3C Markup Validation Service」を使用します。
「Error」「Warning」判定の無いマークアップを目指します。但し、以下の場合はその限りではありません。

  • それによってページの動作・性能が低下する場合。
  • 必要に応じて挿入したコードがある場合。

2.3. 基本ルール

文章構造のわかりやすい、要素本来の意味を理解したシンプルなコーディングを目指します。
div要素はレイアウトの補助として使用し、div要素内に直接テキストを記述するのは基本的に NG とします。テキストの記述が必要な場合は、p要素やspan要素を使用します。

HTML5 使用時は、header, footer, article, section, nav, aside といったセクショニング・コンテンツ関連のタグを積極的に用います
section要素は必ず、セクション内容を表す見出し(h要素)を内包します。h要素を内包しない場合、div要素を使用します。

2.4. 書式ルール

コードを読みやすくするため、文章構造に合わせて必ずインデントを施します。
インデントには半角スペース2つを使用します。

2.5. h要素

1ページにつき必ず1つのh1要素を使用します。同一ページにおける複数のh1要素の使用は禁じます。
ページ全体の文章構造を考え、一番大きな見出しにh1要素を用いて、以降はh2, h3, ...を使用します。

2.6. ol, ul要素

箇条書きテキスト、及びそれに準じるテキスト(グローバルナビゲーションやパンくずリスト)には、ul要素を使用します。
箇条書きテキストに明確な順序がある場合にのみ、ol要素を使用します。

2.7. table要素とdl要素

表組データを表示する場合は、データの意図を汲み取った上で、table要素とdl要素のいずれの使用が適しているかを判断します

table要素を用いる場合、表の見出しにはth要素を、データ部分にはtd要素を使用します。その際、見出しの列とデータ部分の列の前に、それぞれtr要素を付与します。
dl要素を用いる場合、表の見出しにはdt要素を、データ部分にはdd要素を使用します。

2.8. p要素

p要素は本文テキストに使用しますが、上記のh要素、ol, ul要素、table要素、dl要素の方がより適切ではないか、常に考慮します

2.9. img要素

img要素を使用する場合、基本的にalt属性の記述を行います
alt属性には、画像の代替となるテキストを記載します。
但し、背景画像や装飾用の画像など、適切な代替テキストがない画像に限り、alt属性は空白のままとします。

2.10. コメントルール

開発者用のメモとしてコメントを利用することは基本的に NG とします
例えば、インデントを施すことによって文章構造は明確となるため、コードの読みやすさを考慮した、要素の始めと終わりの印としてコメントを記載する手段は、基本的に控えるようにしています。

2.11. コード内の改行

コードを読みやすくするため、セクショニング・コンテンツ関連のタグの上下に1行の空白を設けます。

2.12. 電話番号の取り扱い

スマートフォンでの番号発信を可能にするため、ご要望に応じて「tel」プロトコルを使用します

2.13. viewport の指定

パソコン専用サイトでも、必ず viewport 指定は行います。
コンテンツ幅は、デザインをいただいた際に指定があればそちらに準拠し、指定がない場合は弊社で調節します。

レスポンシブ対応サイト、及びスマートフォン・タブレット専用サイトの場合は、以下の記述を基本とします。

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

3.CSS

3.1. 記述箇所

CSS は、外部ファイルに記述してlinkタグで読み込みます。これは、デザインの一括管理を容易にするためです。
HTML 文書内の style 属性に直接記述することは基本的に NG とします。

3.2. 命名規則

セレクタ名(クラス名・id名)は、基本的にレイアウト由来のものにせず、サイト内における役割を示す名前をつけます

セレクタ名(クラス名・id名)のつけ方は OOCSS の命名規則を基本とした上で、作業効率向上のため、下記に留意しています。

  • 再利用性の高いスタイルは、単一パーツとして別個に指定する。
  • 2つ以上の単語を使用する場合、ハイフン(-)で連結する。

3.3. CSS ハック

ブラウザ間での CSS の実装状況の違いなどを吸収して、各ブラウザでの表示を極力同一にする、CSS ハックという手法は、基本的に使用しません。

3.4. 要素セレクタの扱い

body要素など、一括してスタイルを適用する場合以外は、基本的に要素をセレクタ名に使用しません。

3.5. ブレークポイント

ブレークポイントは、基本的に 1024px768px の2箇所とします。
これにより、1024px 以上でパソコン、768px 〜 1023px でタブレット、767px 以下でスマートフォン用のレイアウトに切り替わります。

また、レスポンシブ対応サイトの場合は、ユーザーの閲覧状況(利用ブラウザの表示領域など)に合わせてコンテンツの幅と位置が可変に表示されるようにし、横スクロールバーが現れないようにします。

4.SEO・テスト・その他

4.1. コーディング全般

HTML, CSS の記述は、弊社のコーディングガイドラインに基づいて行います。

4.2. JavaScript の記述箇所

CSS 同様、JavaScript も基本的に外部ファイルとして記述します。
但し、読み込み時間の短縮など、特別な理由がある場合に限り、インライン化します。

4.3. 画像テキストの扱い

imgタグを用いた画像テキストは基本的に使用しません。(SEO対策)
デザインを優先するなど、ご要望がございましたらご相談ください。

4.4. モバイルフレンドリーテストの実施

レスポンシブ対応サイト・モバイル端末専用サイトの場合、サイトの使いやすさを検証するため、モバイルフレンドリーテスト(Google提供)を必ず実施します。

4.5. SEO 対策としての HTML 文書の構造化

ご要望に応じて、下記の属性を用いて HTML 文書を構造化します。

  • itemscope
  • itemtype
  • itemprop

これは、サイトの正確な情報を検索エンジンに収集してもらい、ユーザーに最適な検索結果を提供するためです。
また、構造化データテスト(Google提供)も実施します。