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

最終更新日:2017/1/25

当コーディングガイドラインは、coding lab(コーディング・ラボ)でサイト構築の際、現在採用している仕様全般について、
成果物の品質維持の為に規定したものです(注1)。随時改定いたします。

(注1)サイトレギュレーションがある場合は、それに従います。

<目次>
  1. 開発環境
  2. HTML
  3. CSS
  4. JavaScript
  5. 画像
  6. リンクチェック
  1. 開発環境
    • アプリケーション
      • Adobe Photoshop CC 2015 / EmEditor Professional 16.1.0 / Microsoft Office 2010
      • 案件(入稿データ)により、Adobe Illustrator CS5 / Adobe Fireworks CS5 / Adobe Dreamweaver CS5
    • OS:ブラウザ(機種)
      • Windows 10:Microsoft Edge / Internet Explorer / Firefox / Google Chrome 各最新版(DELL XPS ONE 27)
        ※IE9~IE10が要件に含まれる場合はIETesterと開発者ツールを利用
      • Mac OS X Sierra(10.12.2):Safari 最新版(MacBook Air)
      • Android 7.1.1:Google Chrome(Nexus 9)
      • iOS 10.2:Safari(iPhone7 MNCL2J/A)
      • iOS 9.3.2:Safari(iPod touch MD717J/A)
      • Android 4.4.2:ブラウザ / Google Chrome(HTC J One HTL22)
    • HTMLバージョン/CSSレベル
      • HTML5
      • CSS3
    • 文字コード
      • UTF-8(BOMなし)
    • 改行コード
      • webサーバのOSに準ずる LF(UNIX系) / CR+LF(Windows)

    ↑目次へ戻る

  2. HTML
    • フレーム割(ページ内の構成を要素別にdivタグで分割)
      #header, #nav, #contents, #main, #sub, #footerなどid名はサイトにより意味内容に沿って命名
    • インデント方法
      インデントなし
    • コメント記述
      フレーム割・主なブロックの終了タグ直後にコメントを挿入(改行なし)
      [記述例]
      <header id="header">
      ・
      ・(省略)
      ・
      </header><!-- / #header -->
      
    • ローマ数字(ⅠⅡⅢ)、丸囲み数字(①②③)、単位記号(㎝ ㎏ ㎡)などの機種依存文字は数値文字参照を利用
    • 文法チェック
      ・W3C Markup Validation Service(http://validator.w3.org/)

    ↑目次へ戻る

  3. CSS
    • 適用方法
      • HTMLからインポート用の外部CSSを読み込む(インラインでの記述はしない)
      • メディア対応:基本はall、要件により印刷時の別レイアウト対応
    • 外部CSS分割方法(注2)
      • リセット・ベース用(base.css):ブラウザデフォルト指定のリセット、body,a などの基本指定、#header, #nav, #contents, #main, #sub, #footer などサイト共通骨組み指定
      • モジュール用(module.css):サイト共通要素指定(h1, h2, h3, ul, ol など同じデザイン箇所)
      • 各カテゴリ用([カテゴリ名].css):カテゴリ内で使用する個別のスタイル指定

      (注2)サイト規模やデザインにより、これに限らない

    • id/class
      • ページ内固有要素はidを使用
      • 区切り記号はアンダースコア(main_contents, global_nav など)
    • プロパティ記述順
      display
      list-style
      position
      float
      clear
      width
      height
      margin
      padding
      border
      color
      background
      font
      line-height
      text-decoration
      text-align
      vertical-align
      white-space
      other text
      content
      
    • インデント方法
      プロパティ前にタブでインデント ※SCSS利用の場合はコンパイルオプションに依ります
    • 文法チェック
      W3C CSS Validation Service(http://jigsaw.w3.org/css-validator/

    ↑目次へ戻る

  4. JavaScript
    • jQuery(JavaScriptライブラリ)を利用した簡単な実装を対応しております。
      個別の仕様は(対応可能かどうかも含めて)ご相談ください。

    ↑目次へ戻る

  5. 画像
    • 保存形式:png/ gif(png8より軽量の場合)/ jpg/ svg
    • ディレクトリ:/assets/img/(サイト内共通画像は/assets/img/shared/、トップは/assets/img/top/など)
    • 画像命名規則(画像パーツ種によって先頭に付加)
      • ヘッダ:hdr_
      • フッタ:ftr_
      • ナビゲーション:nav_
      • ロゴ:logo_
      • タイトル:ttl_
      • サブタイトル:subttl_
      • ボタン:btn_
      • バナー:bnr_
      • 写真/イラスト/図版:img_
      • 背景:bg_
      • バレット:blt_
      • アイコン:icn_

      id/class名と対になるように命名(bg_main_contents.gifなど)

    ↑目次へ戻る

  6. リンクチェック