西新宿ドットネット テンプレート・コーディング規約

テンプレート・コーディング規約

株式会社西新宿ドットネットのテンプレートとコーディング規約です。

対応ブラウザについて

PC版については、YUI Library3系に準拠して、クロスブラウザ対応して下さい。
対応ブラウザは、IE,Firefox,Chromeとします。

スマートフォン/タブレット版については、HTML5 Doctorに準拠して下さい。
対応ブラウザは、Andoridでは、標準ブラウザ、iOSでは、Safariに対応して下さい。

その他のブラウザについては、特別に指示が無い限り対応しなくて構いません。

テンプレートについて

PC版、スマートフォン/タブレット版とそれぞれ用意してありますので、これらのテンプレートを元にコーディングをして下さい。
PC版の全てのテンプレートは、1,000px幅（960 Grid System）のものとなっています。よって、左右の装飾が入る場合、装飾が内包されるタイプのものです。
スマートフォン版のテンプレートは320px幅（iPhone6SEの幅）のものとなっています。

PC版テンプレート

YUI Library3系準拠のテンプレートを用意してあるので、これらを元にコーディングをして下さい。
特に指定が無い場合は、英語版のテンプレートを使う事はありません。

2分割T字型	2分割I字型 （キービジュアル大）	2分割I字型 （キービジュアル小）
逆L字型	3分割縦型	逆U字型
英語逆L字型

スマートフォン/タブレット版テンプレート

HTML5 Doctor準拠のテンプレートを用意してあるので、これらを元にコーディングをして下さい。
iPhone/iPad版では、Retinaディスプレイ対応している部分が違っています。
iPad/Android Tablet版では、キービジュアルとバルーンポップアップを大きな画面に対応している部分が違っています。
つまり、画像やバルーンポップアップのサイズ指定以外の部分は、ほぼ共通で使えるようにしています。

• iPhone版
• iPad版
• Android版
• Android Tablet版

各テンプレートの違い

日本語テンプレートと英語テンプレート

日本語テンプレートと英語テンプレートの異なる点は2つあります。
1点目はbasefont.cssです。
英語テンプレートでは日本語のフォントがないことを前提として構成されています。
2点目は、ソーシャルマークレットの違いです。
ソーシャルマークレットの使い方が日本語圏と英語圏では異なるため、　それぞれ別のパターンになっています。
英語版では、Twitter、Facebook、Google+、Pinterestが使用されていて公式ページへリンクさせる形をとっています。

スマートフォン/タブレット版とPC版

スマートフォン/タブレット版では、HTML5 Doctor準拠（HTML5.0+CSS3.0）、PC版では、YUI Library3系準拠（HTML4.0+CSS2.0）のテンプレートを用意しています。
よって、スマートフォン/タブレット版とPC版ではコーディングが全く異なっています。

タブレット版とスマートフォン版

画面解像度が異なるため、キービジュアルとバルーンポップアップのサイズが変わります。
また、タブレット版では、ファビコンが必要になります。

アンドロイド版とiOS版

iOS版ではRetinaディスプレイが使用されているため画像を50%の縮尺でコーディングする必要があります。

初期ファイルについて

フィーチャーフォン以外のテンプレートには、基本的に以下のディレクトリとファイルが含まれています。
ディレクトリ構成については、最終の組込み時にファイル名が被らないようにPC版以外は、数階層深くなっていますが、基本概念は同一です。
フィーチャーフォンは、JavaScriptやCSSが基本的には使えないので、画像フォルダのみとなっています。

ルートディレクトリ
	self/
		css/
		img/
		js/
	index.html
	about.html
	entry.html
	view.html
	inquiry.html
	inquiry_thanks.html

HTMLファイルについて

index.html

トップページです。各要素が含まれています。

about.html

子ページです。メールフォーム以外の子ページは、このファイルをコピーして、使用して下さい。

サービス概要=service.html
料金表=price.html
など、「英単語.html」と命名してください。

英単語がない場合、日本語表記をローマ字（ヘボン式）でファイル名に充ててください。
ただし「judo」など、ヘボン式よりも一般的なスペルが存在する場合は、そちらを優先してください。

inquiry.html,inquiry_thanks.html

メールフォームのセットです。phpの入れ込みをする際にSmartyを採用していますので、各ファイルに記述されている{}内の部分やinput type="hidden"部分は、削除しないでそのまま残しておいて下さい。

尚、コーディング時の確認の為、inquiry.htmlの下部にリンクを設けています。

また、各ページにグローバルナビ等、リンクが切れている部分があります。
これはCSSで使うIDとページファイル名を関連付けして構築している為です。

entry.html,view.html

ブログページになります。日付の要素とナビゲーションが配置されています。
コメントタグがありますが、削除はしないでください。

CSSファイルについて

reset.css,basefont.css

この2つはCSSをリセットする為に使用します。修正・変更の必要は、ありません。
スマートフォン版・タブレット版についてはstyle.cssに全て集約されています。
基本的には、reset.css,basefont.cssと同じようにcssをリセットして再定義を行っています。
id及びclassの命名規則については下記のPC版に従ってください。

common.css

全てのページに共通する設定が含まれています。
パーツ毎にコメントで括られています。
下部に「レイアウト」というコメントによって括られている部分は、「太文字」や「テーブルレイアウト」といった要素が記述されています。編集して使用して下さい。
ただし、要素を削除してはいけません。IDやクラスを考えるときに既存の物と重複しないように注意して下さい。

toppage.css

トップページについての設定が含まれています。
トップページは、他のページと見た目が異なることが多いので、混乱を避けるために個別に作成しています。

other.css

その他のページについての情報です。
中身は、サイトを構成するHTMLファイル名のコメントで分けられており、h2要素の背景等、個別に必要なCSSの設定を記入します。
またトップページのスタイルと競合して「common.css」に記入できない設定を、「common」として記入する場合もあります。

blog.css

ブログのページについての情報です。
entry.html、view.htmlのブログページが必要な際には、こちらに作成します。

ディレクトリについて

ディレクトリ構成は、基本的にこのままの状態にします。よって、htmlファイルが多くなる場合、
例えば、会社概要＝company.html、さらに、沿革＝Corporate_History.html、役員紹介＝directors.htmlなど、
ディレクトリは作成せずに、基本的に「英単語_英単語.html」としてください。

ブロックのコーディング順について

HTMLのコーディングはヘッダー、左カラム、（中カラム、）右カラム、フッターとなるようにして下さい。
CSSのfloat設定で左右の設定を自在にできますが、管理のし易さから見たままのコーディングをして下さい。

画像ファイルについて

画像は、jpg形式（最高画質）を使用します。
png形式は透過処理を用いる場合のみ使用します。
ただし、画像の劣化を防ぐためにpng形式を用いる場合もあります
gif形式はアニメーションを用いる場合のみ使用します。

ファイル名については、以下のルールを適応して下さい。
例：「bg_common_h2.jpg」
[1]_[2]_[3]_[4].jpg
1 背景として使用する画像の場合は「bg」、ページにimgタグを用いて使用する場合には「img」として下さい。
2 各ページに跨って使用する共通画像なら「common」、そのほかの画像には使用するページのファイル名（拡張子を除いたもの）を使用して下さい。
3 個別の名前を付けます。分かりやすい名前にして下さい。
4 複数個ある場合は、2ケタの数字を使用して下さい。

画像置換のテクニックについて

画像置換のCSSは、以下の方法を用います。

p.parts a {
	background-image: XX.jpg;
	height: 0;
	padding-top: XXpx;
	overflow: hidden;
}

googleが使用しているテクニックです。その他のテクニックはスパム行為とみなされるので使用しないで下さい。

フォントサイズについて

YUIlibraryのCSSを使用して、ベースのフォントサイズを設定していますので下を参考に「%」で設定して下さい。

特定のタグについて

以下のタグは使用に際し注意して下さい。

• h2,h3,h4,h5,h6タグ
• imgタグ
• ul,liタグ
• strong,emタグ

h2,h3,h4,h5,h6タグ

h2要素はページのタイトルに使用します。h3、h4、h5要素はすべて記事部分のみに使用し、サイドメニューのタイトル等に使用してはいけません。

imgタグ

imgタグはインライン要素として扱って下さい。したがって単体で使用する場合は、pタグで括る必要があります。
また画像には必ずalt値を設定して下さい。ロゴにおける会社名や電話番号部分など画像に文章が含まれている場合はその文章をalt値に設定します。写真やイメージ画像はブランク（alt=""）で構いません。

ul,liタグ

ul,liタグを使う場合は、内容は単語のみとして下さい。
例えば以下のようになります。

<ul>
	<li>塗装工事</li>
	<li>防水工事</li>
	<li>足場工事</li>
</ul>

長文を箇条書きにしたい場合は、以下のようにdivタグとpタグを使って下さい。

<div class="like_list">
	<p>従業員の安全教育を徹底しています。</p>
	<p>一定の品質を保つように試験をしています。</p>
	<p>地域へ貢献する企業を目指しています。</p>
</div>

strongタグ,emタグ

strongタグやemタグはSEOの手段として当社にて調整を行いますので、コーディング時には使用しないで下さい。

Copyrightについて

「nishi-shinjuku.net」の部分に当社ウェブサイトへの新規ウィンドウへのリンクが必要ですが、アンダーラインやロールオーバーの装飾を付けないで下さい。

JavaScriptについて

基本的にJavaScriptを新たに作る必要はありません。
案件により、「jQuery lightBox」などを使用します。

ゆらぎについて

ゆらぎがある単語は統一して下さい。
特に「お問合せ」という言葉は、「お問い合わせ」「お問い合せ」「お問合わせ」とバラバラに使われがちなので、全て「お問合せ」として下さい。また画像テキストに使用する場合においても同様に「お問合せ」と統一して下さい。

電話番号、ファックス番号について

下記の例のように電話番号とファックス番号が縦に並ぶ場合、等倍フォントのクラスを使用して文字幅が上下で揃うようにして下さい。

http://www.internet-ads.org/

必ず、「TEL」と「FAX」と表記して下さい。

半角・全角について

数字・アルファベットは基本的に半角を使用して下さい。どうしても文章の流れとして全角を使いたい場合は、「一つ」「二つ」または、「ひとつ」「ふたつ」というように漢字を使用して下さい。

ソーシャルリンク・ソーシャルカウンターについて

テンプレートのコードを参考に、ソーシャルリンク・ソーシャルカウンターを載せてください。
当社でソースの内容を書き換えていますので注意してください。

Copyright©2013 nishishinjuku.net. Powered by nishi-shinjuku.net.