- 質を高めるため。
- 統一性を持たせるため。
- 作業を効率的に進めるため。
0. 前置き
0-1) 本ガイドラインの存在意義
0-2) コーディングの際の原則
- 本コーディングガイドラインに準じてコーディングをすること。
- W3C Markup Validation Serviceでチェックした際にエラーが出ないようなマークアップを行う。
- ファイルサイズは軽量化に努め、無駄を省く。
- 命名規則に則り他者が見ても理解できるようにする。
- 日本語名は使用せずに基本的に英語を心がける。
1. ファイル関連
1-1) ディレクトリ階層について
- なお、「index.html」はトップページであり、他のページを増やす場合はroot上にフォルダを作成し、
その中に「index.html」ファイル配置する。
そしてroot上の「images」 , 「css」 , 「js」フォルダに作成したフォルダ名のフォルダを配置する。
1-2) ファイル名使用文字
- 「a」～「z」までの小文字。
- 「0」～「9」までの数字。
- ハイフンは使用せずに「_(アンダースコア)」を使用する。
※アンダースコアは単語と単語をつなげる際にのみ使用可とする。 - 半角文字を使用する。
- スペースは使用しない。
- 先頭に数字を使用しない。
- それぞれの「何か」を先頭に下記、「それの何：を書くようにする。
ex) : bg_h.gif (ヘッダーの背景)
1-3) ファイル名文字数制限
- 半角31文字以内で収める。
1-4) 命名規則
- 明確に且つ短い命名をする。
ex) :
ico_twitter (Twitterのアイコン)
bg_nav (ナビゲーションの背景)
btn_contact (問い合わせボタン)
| 1. それぞれの部分を下記に略すことにする。 | |
| 部分 | 略称 |
| ヘッダー | h |
| ナビゲーション | nav |
| サイドバー | sb |
| フッター | f |
| 2. その他略して使用するもの。 | |
| 部分 | 略称 |
| アイコン | ico |
| ボタン | btn |
| 写真 | pic |
| 図やグラフ | grp |
| デザイン上テキストを画像化したもの | txt |
| h1 ～ h6タグの見出しで使用する画像 | h1 ～ h6 |
3. 擬似クラスで表示する画像
一番最後に「hrv」をつける。
ex) : h1_logo_hrv.png (h1タグで囲まれたhoverすると表示するロゴ)
以上命名規則は 2 → 1 → 何か(ex : contact) →3の順番に記述する。
当てはまらない場合には英語でオリジナルでつける。
その場合、先頭に「un」(unknown)をつける。
1-5) アイコンやボタンについて
- 複数ある場合には CSS Sprite を施すため、画像を1つにまとめる。
その際の命名は「btn_h」(ヘッダーのボタン)のようにする。
2. HTMLコーディングガイド
2-0) ひな形
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TOPMODEL.JP | モデルとアーティストによるポートフォリオ共有サイト</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="css/common/reset.css">
<link rel="stylesheet" href="css/common/style.css">
<link rel="stylesheet" href="css/toppage/top.css">
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script></script>
</head>
<body>
<div id="wrapper">
中略
</div>
</body>
</html>2-1) DOCTYPE宣言
- HTML5を使用するため、
とする。<!DOCTYPE html>
2-2) 文字コードの制定
- 文字コードはUTF-8を使用する。
2-3) metaデータ
- discription , keywords , viewport , authorを使用する。
2-4) 外部ファイルの読み込み
- 外部ファイルの種類は原則まとめて記述する（HTTPリクエストを減らし高速化するため。）
ex) :
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<script src="common.js"></script>2-5) sectionとdivの使い分け
- wrapperの中に記事がある場合
<div id=”wrapper”>
<section class=”entry”>
<h2>記事のタイトル</h2>
<article>記事の内容</article>
</section>
</div>
理由
- wrapper自体はドキュメントとして意味を持たないため。
- section内からがページの中身として重要であるため。
- #entryもほぼwrapperだが、節としては成立しているためOK。
- articleは内容の部分で使う。
2-6) 改行とインデント
- ブロックレベル要素のタグで改行する。
- インライン要素のタグは開業せずに記述する。
※ただし、長くなる場合にはタグごとに改行する。 - インデントは半角スペース4つとする。（tabキーは使用しない。）
<header>
<ul>
<li><a href=”#” target=”_blank”>Twitter</a></li>
</ul>
</header>2-7) h1～h6タグの使用に関して
- トップページではh1はサイトタイトルやロゴで使用する。
- その他の個別ページではそのページを表すものとして強い部分にh1を使用する。
理由
- トップページの重要部分はタイトルである。
- その他ページでは<title>タグ内でサイト名が強くなっているので、
h1で被らせるよりもないようとしてのタイトルをh1で囲んだ方がSEO的に強くなると思われるため。
2-8) imgタグの使用に関して
- alt属性には画像が表示されなかった場合にテキストとして表示するために
画像をもじとして表す適切な言葉を入れる。
2-9) aタグについて
- 外部サイトに飛ぶリンクを貼っている場合には、target="_blank"を使い、別タブで開く。
2-10) コメントの入れ方
- 終了タグのすぐ右に記述する。
- 「○○ END」と書く。
- class名やid名を併用している場合はid名を書く。
- class名のみでclass名を複数使用している際はその要素の一番強く影響するclass名を書く。
ex) :
<section id=”element”>
コンテンツ
</section><!-- element END -->2-11) id名をつけるよりもclass名をつけるようにする。
- class名ならば他に使用することも可能なため。
- 特定の要素として識別（区別）したい場合にはid名を使用しても良い。
2-12) id名 / class名命名規則
| よく使う命名 | |
| 部位 | 略称 |
| ヘッダー | h |
| フッター | f |
| サイドバー | sb |
| グローバルナビ | gNavi |
| ラッパー | wrapper |
| リスト | list |
| インナー | in |
| メイン | main |
| サブ | sub |
| コンテンツ | contents |
| コピーライト | copy |
- 短く、明確に命名する。
- 英語名をつける。
- ローマ字表記にはしない。
- h-in(ヘッダーインナー)などつなげる場合にはハイフンを使用する。
- 基本的に小文字で書く。( gNaviは除く )
- in(インナー)は最後に書く。
- 何 + 部位の順で書く。（ex : contents-main-in[ メインにあるコンテンツのインナー ] ）
2-13) その他
- 英数字は半角で書く。
- class名や記述順は class="オリジナル 汎用的class"の順で書く。
2. CSSコーディングガイド
2-0) 大前提
- reset.cssは'HTML5 Doctor'をベースに無駄を省いて使用する。(canvasなどの使わないもの)
- IE7まで対応させるため、レイアウトの崩れの原因になりそうな箇所にはCSS2まで使用可能。
その他デザインとして崩れの原因とならない箇所はCSS2.1 , CSS3まで使用可能とする。 - 見やすさや可読性を重視しつつ、無駄を省く。
- 「;」は区切りのためにあるので、最後のプロパティの値には「;」をつけない。
2-1) font-family
- 'Lato', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif
参考URL : http://ultimate-ez.com/2013/09/08/2547/
2-2) CSSの表記順
display >> overflow >> font-family >> font-size >> line-height >> color >> float = position >> top , left , right , bottom >> width >> height >> margin >> padding >>border >> background
左から優先順位が高い。
「要素の状態 / フォント / 位置 / 幅 / 高さ / 空白 / 領域空白 / 枠線 / 背景」 のような感じである。
2-3) 複数の要素に同じスタイルを当てる
- 一列に連続して書くことはなく、「,」の後で改行する。
ex) :
h1,
h2,
h3,
h4,
h5,
h6,
{
font-weight:normal
}2-4) 初期のスタイル
- font-size:16px (Chromeを基準とするため16px)
- font-family:'Lato', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif
- line-height:1.7
インデント
- インデントは半角スペース2つとする
ex) :
body{
width:150px;
height:100px
}2-6) コメントの書き方
- 大きなレイアウトの部分のコメントは下記のように２行で入れる。
ex) :
/* [ common ]
----------------*/
.common{
width: 150px
}- 小さな細かな部分は下記のように１行で入れる。
ex) :
/*[ btn ]*/
.btn{
width: 50px
}2-7) 単位について
- 値が0の時には単位をつけない。
- font-sizeに関してはemを使用する。
- line-heightには単位をつけない。
- その他はpx , %を適切に使用する。
2-8) ショートハンドについて
- background , margin , padding , border-left/right/bottom/top等のショートハンドを使う。
- borderのショートハンドを使用する場合には、border: 1px solid #f60
のように四方が同じサイズのときだけ使用可能とする。 - fontは別々で記述する。
- 2-8-1) background記述順
- background:画像のパス リピート 位置
- 2-8-2) border記述順
- border: サイズ 線のスタイル 線の色
2-9) :before , :afterについて
- これらはCSS2.1のため、IE7に使用することができない。
なのでレイアウトが崩れない部分では使用を可能とする。
2-10) CSSの書き方
- インデントは半角スペース2つ。
#wrapper{
width:150px;
height:100px
}2-11) その他
- 値が0.5など「0.X」の時は0を省き、「.5」のように書く。
5. 参考文献
5-1) HTML系参考文献一覧
- 適したマークアップかを確認する
- W3C - Markup Validation Service
- sectionにwrapperを使うのはよろしくない。
- http://hyper-text.org/archives/2011/07/html5_mistakes.shtml
- Google HTML / CSS Style Guide
- http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
- 困ったときのMOZZILA DEVELOPPER NETWORK (HTML)
- https://developer.mozilla.org/ja/docs/Web/HTML
5-2) CSS系参考文献一覧
- 適したCSSかを確認する
- http://jigsaw.w3.org/css-validator/validator.html.ja
- サイバーエージェント - メンテナブルCSS
- http://www.cyberagent.co.jp/recruit/techreport/report/id=7926
- 困ったときのMOZZILA DEVELOPPER NETWORK (CSS)
- https://developer.mozilla.org/ja/docs/Web/CSS