Web制作・運用現場のための「課題解決」の教科書

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

ページ

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

目的

Webページの実装手法の定義、HTML・CSS・JavaScriptなどのコーディングの標準化

対象者

主に制作スタッフが利用

内容

マークアップ言語の種類やコーディングに関する規約、HTMLや画像などのファイルの持ち方、その他Webページの実装に必要な技術のルールを定義します。システム開発で言うところの開発標準に該当します。

HTMLは比較的コーディングの自由度の高い言語ですが、それだけに制作スタッフ個々人が勝手にコーディングを行うと、書き方やリソースファイルの持ち方がバラバラになり、メンテナンスしにくくなってしまいます。それを防止するためには、ガイドラインで標準のコーディング手法を決めてしまうことが有効です。

目次(例)
  1. 本書について
    • (a)本書の目的と位置づけ
  2. 環境と技術に関する定義
    • (a)想定閲覧環境
    • (b)マークアップ言語仕様
    • (c)CSS/JavaScript仕様
    • (d)画像、プラグイン、利用可能なWeb技術
    • (e)印刷対応
    • (f)利用しているシステム
    • (g)外部ASPコード及びシステムタグ
  3. 物理設計ルールの定義
    • (a)共通ファイルの定義
    • (b)個別ファイル命名規則
    • (c)個別ファイル格納規則
    • (d)パスの記述ルール
  4. コーディングルールの定義
    • (a)HTML設計ルール/head部の定義
    • (b)HTMLコーディング規則
    • (c)CSS設計/コーディング規則
    • (d)JavaScript設計/コーディング規則
    • (e)RSS、XML、その他のスクリプトについて
  5. 共通テンプレート・モジュール
    • (a)共通HTMLテンプレート一覧
    • (b)共通HTMLモジュール一覧
  6. 特殊モジュールの仕様について
    • (a)ソーシャルプラグインとOGP
    • (b)トップページ・キービジュアル用XML
    • (c)汎用カルーセル用JavaScript
  7. 共通リソース一覧
    • (a)共通CSS一覧
    • (b)共通JavaScript一覧
    • (c)共通画像一覧

マークアップ言語仕様

個別ファイル命名規則

HTML設計ルール/head部の定義

No 要素 指定 タグ
1 文書タイプ宣言 固定 <!DOCTYPE html>
2 htmlタグ 固定 <html lang="ja">
3 head開始 固定 <head>
4 HTMLの文字コード告知 原則固定 <meta charset="utf-8">
5 title ページごと <title>ページタイトル</title>
6 meta description ページごと <meta name="description" content="ページの説明文">
7 meta keywords ページごと <meta name="keywords" content="ページのキーワード">
8 スマホの電話番号リンク無効化 固定 <meta name="format-detection" content="telephone=no">
9 viewportをデバイス幅に固定 固定 <meta name="viewport" content="width=device-width,initial-scale=1">
10 og:title(投稿見出し) ページごと <meta property="og:title" content="OGページタイトル">
11 og:type(投稿属性) ※ パターン <meta property="og:type" content="article">
12 og:url(投稿本籍) ページごと <meta property="og:url" content="このページのURL(http://から)">
13 og:image(投稿サムネイル) 原則固定 <meta property="og:image" content="http://www.members.co.jp/common/images/ogpcorp.gif">
14 og:sitename(投稿元サイト名) 原則固定 <meta property="og:site_name" content="メンバーズ|ソーシャルメディア時代をリードするネットビジネスパートナー">
15 og:description(投稿リード) 任意 <meta property="og:description" content="
16 FacebookアプリID 原則固定 <meta property="fb:app_id" content="152467208157230">
17 サイトインデックス指定 原則固定 <link rel="contents" type="text/html" href="/sitemap.html" title="サイトマップ">
18 ファビコン指定 原則固定 <link rel="shortcut icon" href="/favicon.ico">
19 WebClipアイコン指定 原則固定 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
20 共通CSS読込 必要分 <link rel="stylesheet" type="text/css" href="/***.css" media="screen,print">
21 個別CSS読込 必要分 <link rel="stylesheet" type="text/css" href="/***.css" media="print">
22 共通JS読込 必要分 <script type="text/javascript" src="/***.js"></script>
23 個別JS読込 必要分 <script type="text/javascript" src="/***.js"></script>
24 Google Analytics非同期コード 原則固定 <script src="/common/js/ga.js"></script>
25 head終了 固定 </head>
※TOPは、<meta property="og:type" content="website">
次のページへ

ページ

この記事が役に立ったらシェア!
tweet88はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

ドアウェイページ
特定のキーワードで検索結果に表示させ、来訪した人を他のページに誘導するために作ら ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper株式会社ブレインパッド
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore