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>
2htmlタグ固定<html lang="ja">
3head開始固定<head>
4HTMLの文字コード告知原則固定<meta charset="utf-8">
5titleページごと<title>ページタイトル</title>
6meta descriptionページごと<meta name="description" content="ページの説明文">
7meta keywordsページごと<meta name="keywords" content="ページのキーワード">
8スマホの電話番号リンク無効化固定<meta name="format-detection" content="telephone=no">
9viewportをデバイス幅に固定固定<meta name="viewport" content="width=device-width,initial-scale=1">
10og:title(投稿見出し)ページごと<meta property="og:title" content="OGページタイトル">
11og:type(投稿属性) ※パターン<meta property="og:type" content="article">
12og:url(投稿本籍)ページごと<meta property="og:url" content="このページのURL(http://から)">
13og:image(投稿サムネイル)原則固定<meta property="og:image" content="http://www.members.co.jp/common/images/ogpcorp.gif">
14og:sitename(投稿元サイト名)原則固定<meta property="og:site_name" content="メンバーズ|ソーシャルメディア時代をリードするネットビジネスパートナー">
15og:description(投稿リード)任意<meta property="og:description" content="
16Facebookアプリ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">
19WebClipアイコン指定原則固定<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>
24Google Analytics非同期コード原則固定<script src="/common/js/ga.js"></script>
25head終了固定</head>
※TOPは、<meta property="og:type" content="website">
この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

今日の用語

アーティクル・スピニング
既存のコンテンツを書き換えたり、その一部を流用したり自動置換したりして、同一では ...→用語集へ

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

インフォメーション

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

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

サイトマップ
RSSフィード


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