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

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

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

対応ブラウザについて

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版では、キービジュアルとバルーンポップアップを大きな画面に対応している部分が違っています。
つまり、画像やバルーンポップアップのサイズ指定以外の部分は、ほぼ共通で使えるようにしています。

各テンプレートの違い

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

日本語テンプレートと英語テンプレートの異なる点は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 入力画面
inquiry_thanks.html 送信後画面

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

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

entry.html,view.html

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

ファイル名 内容
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を使用して、ベースのフォントサイズを設定していますので下を参考に「%」で設定して下さい。

ピクセル パーセンテージ デモ
10px 77% 10px abc あいうえお
11px 85% 11px abc あいうえお
12px 93% 12px abc あいうえお
13px 100% 13px abc あいうえお
14px 108% 14px abc あいうえお
15px 116% 15px abc あいうえお
16px 123.1% 16px abc あいうえお
17px 131% 17px abc あいうえお
18px 138.5% 18px abc あいうえお
19px 146.5% 19px abc あいうえお
20px 153.9% 20px abc あいうえお
21px 161.6% 21px abc あいうえお
22px 167% 22px abc あいうえお
23px 174% 23px abc あいうえお
24px 182% 24px abc あいうえお
25px 189% 25px abc あいうえお
26px 197% 26px abc あいうえお

特定のタグについて

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

  • 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」と表記して下さい。

半角・全角について

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

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

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