>- サービス>
- WEBサイト・アプリ構築>
- コーディングガイドライン
目次
対応ブラウザ、基本事項について
- IE9以上、Firefox最新Ver.、Google Chrome最新Ver.、Safari最新Ver.については標準対応。
- IE6,7,8については要望があれば対応する。
- 論理マークアップを徹底する。
- 画像には必ずalt属性を指定する。
XHTML版ヘッダーの記述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="ltr" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/JavaScript; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css; charset=UTF-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="copyright" content="" /> <meta name="robots" content="ALL" /> <meta name="format-detection" content="telephone=no" /> <meta property="og:title" content="" /> <meta property="og:type" content="" /> <meta property="og:description" content="" /> <meta property="og:url" content="" /> <meta property="og:image" content="" /> <meta property="og:site_name" content="" /> <meta property="og:locale" content="ja_JP" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="stylesheet" href="/css/○○.css" /> <script src="/js/○○.js" type="text/javascript"></script> <title></title> </head>
①DOCTYPE宣言。
②文書で標準的に用いる言語を指定。
④文字コード指定。
⑤JSで使用する文字コード指定。
⑥CSSで使用する文字コード指定。
⑦文書で用いる言語を指定。（こちらが優先で複数指定可能）
⑧キーワードを記述。
⑨サイトの説明を記述。
⑩著作権を記述。
⑪検索エンジンへの対応。NOINDEX,NOFOLLOWで非公開。
⑫電話番号の自動リンク機能を制御。（Safari対応）
⑬～⑲OGPタグ、SNSを利用する際には必須。
⑳ファビコンの設定。
㉑CSSを使用する場合に記述。
㉒JSを使用する場合に記述。
㉓ページタイトルを記述。
HTML5版ヘッダーの記述
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="copyright" content=""> <meta name="robots" content="ALL"> <meta name="format-detection" content="telephone=no"> <meta property="og:title" content=""> <meta property="og:type" content=""> <meta property="og:description" content=""> <meta property="og:url" content=""> <meta property="og:image" content=""> <meta property="og:site_name" content=""> <meta property="og:locale" content="ja_JP"> <link rel="shortcut icon" href="/favicon.ico"> <link rel="stylesheet" href="/css/○○.css"> <script src="/js/○○.js"></script> <title></title> </head>
①DOCTYPE宣言。
②文書で標準的に用いる言語を指定。
④文字コード指定。
⑤キーワードを記述。
⑥サイトの説明を記述。
⑦著作権を記述。
⑧検索エンジンへの対応。
⑨電話番号の自動リンク機能を制御。（Safari対応）
⑩～⑯OGPタグ、SNSを利用する際には必須。
⑰ファビコンの設定。
⑱CSSを使用する場合に記述。
⑲JSを使用する場合に記述。
⑳ページタイトルを記述。
ディレクトリ階層について
※初期ファイルセットで不要なファイル、コメントは削除しておくこと。
フォーマット
- インデントはタブ1つ(半角4スペース)とする。
- カラーコードは小文字、16進数(6桁)で記述する。(#ffffff等)
- コメントのフォーマットについては「CSSの書き方」の項で説明する。
- ダブルクォート(")を標準とし、Javascriptなど必要に応じてシングルクォート(')を使用する。
- サイズの単位は固定はpx、可変は％と使い分ける。
ただし、line-heightの値については1.2(120%)のように、%を記載しない。
命名規則
- 第三者が見ても、ひと目で何の要素のことかわかるように明確な名前をつける。
- 名前のフォーマットは、チェインケース(文字の単語間にハイフン)を用いる。
例）
news-item
menu-image
CSSについて
構成について
”public_html” (ドキュメントルート)
├ ”css”
│├base.css ←全ページ共通
│├top.css ←TOPページのみに適用
│├enquete.css ←enqueteフォルダにのみ適用
│├mypage.css ←mypageフォルダにのみ適用
│└recipe.css ←recipeフォルダにのみ適用
├ ”js”
├”recipe”
│├index.html
│├detail.html
│└list.html
├”mypage”
├”enquete”
└ index.html
- cssファイルは原則としてcssフォルダに保存する。
(ファイルが乱立してどこにあるかわからなくなってしまうため。) - 各ページ共通で使用するものについては全てbase.cssに保存する。
- adminやsp、mbなど｢public_html｣内で全く別のデザインを含む場合は、CSSフォルダ内に各ディレクトリを作成し、その内部で｢reset.css｣｢base.css｣｢フォルダ名.css｣を展開する。
- 各ページごとにCSSファイルを読み込む。
読み込むCSSは原則として、｢reset.css｣｢base.css｣｢フォルダ名.css｣の3つのみ。
※reset.cssは各ブラウザの差異を埋めるために利用。
※例外として、jqueryで必要なCSS、media typeの切り替えで必要となるCSS等は別ファイルで保存する。 - jQueryなどで必要なCSSはどのjsファイルに対応するCSSかわかるように、名前をつける。
- ｢reset.css｣については、｢YUI 3 CSS Library｣を基本とし、案件によっては他のreset.cssを使うことも検討する。
CSS内の記述について
- 文字コードはutf-8で記述。@charsetの宣言は必ずファイルの先頭に書くこと。
- タグの指定は要素名は必要に応じて記述する。
<div id="wrapper"> <ul id="nav"> <li class="list01"><a href=""></a></li>←このliを指定する場合 <li class="list02"><a href=""></a></li> <li class="list03"><a href=""></a></li> </ul> </div>
上記の例の場合、記述方法は以下のとおりとする。
#wrapper #nav .list01
※必要に応じて子要素を指定するセレクタ「＞」、隣接セレクタ「＋」を使用しても良い。
※管理・制作のしやすさの観点からselectvisr.js(http://selectivizr.com/)の使用を認める。
※selectvisr.jsを使用する場合、擬似要素、属性セレクタを用いることが可能。
- コメントの書き方について
/* -------------------------------
セクションブロック
------------------------------- */
/*
* コメントが複数行に
* 渡って必要な場合
*/
/* サブセクション・基本のコメント */
- プロパティの書き方について
インデントをタブ1つ、複数要素を指定する場合は行を分ける。
また、urlの指定がある場合はダブルクォートは不要。
ショートハンドが使用できるケースでは使用を認める。
プロパティ名、ショートハンドの並び順は極力揃えること。詳細は下記参照。
header > ul > li a,
header > ul > li a:hover {
display:block;
background-image: url(../img/common/header.png);
background-size: 390px 37px;
background-repeat: no-repeat;
background-position: 0 0;
height: 37px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
JSについて
- Javascriptは原則として1系の最新Ver（安定版）のjQueryを使用する。
- モダンブラウザを対象とするサイトの場合は2系の最新Ver（安定版）のjQueryも使用可。
- prototypeなど他のライブラリを使用する際には衝突しないようによく注意する。
- ライブラリを使用する際はライセンス違反にならないか確認する。
- jQueryUIなどのUI系のライブラリは極力使用しない。
- JSの記述についてはインデントはタブ1つ(半角スペース4つ分)とする
- スクリプトを自作する際は、使用方法がわかるようにコメントを明記する。
- jQueryを使用する際の記述の仕方は下記を参照。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.1.min.js"><\/script>')</script>
※1行目でGoogleのCDNを読みに行く。
2行目はCDNが読めなかった際にサーバー上のjQueryを読み込むための記述。
- コメントの書き方について
/* -------------------------------
セクションブロック
------------------------------- */
/*
* コメントが複数行に
* 渡って必要な場合
*/
/* サブセクション */
//一行コメント
内部SEO
タイトルタグ
- 異なるURLで同じタイトルにならないように設定
- 全角30文字以内におさめる
discriptionタグ
- 異なるURLで同じdiscriptionにならないように設定
- 全角100文字以内におさめる
keywoordタグ
- 1ページにつき5つ以内におさまっているか
見出し
- h1～h3をh1から順番に利用し、対応した内容とセットで記述
- h1は各まとまりの中に1つだけ記述する
リンク
- リンクは極力テキストに貼るようになっているか
- 画像にリンクを貼る場合にはtitle属性にワードを記述しているか
ALTタグ
- リッチスニペットが使えるジャンルのサイト(人物、商品、クチコミ、レストランなど)の場合、設定を行っているか
URL
- wwwの有り無しを統一化しているか
- http/httpsを統一しているか
ページネーション
- ページネーションがあるページにはnext/prevのタグを入れているか
無料相談・お見積もり24時間以内に必ずご連絡をいたします。
お電話受付時間 平日9：30～18：30
