～コーディングガイドライン～

CSSファイルの分割

標準テンプレートではCSSファイルはコンパイル時に「style.css」に統一されるようになっています。
よって、以下のような場合以外はCSSファイルは1つにまとめることとします。

• 標準テンプレート更新前から継続して対応している案件
• クライアントからCSSファイルを分割するように指示があった場合

テンプレート更新前は、サイト共通のcommon.cssとページごとのCSSファイルに分割して制作していました。
そのようなサイトの更新作業などの場合は旧テンプレートの仕様に従ってください。

また、先方レギュレーションを適用する案件など、クライアントからファイルの分割に関して指示があるケースがあります。
その場合はそちらのルールを優先してください。

なお、旧テンプレート準拠のソースでも、CSSシグネチャを使用している場合はページ個別のCSSファイルが存在しないので、間違わないように注意してください。

SCSSファイルの分割

標準テンプレートに基づき、SCSSファイルは以下の様に分割して制作します。

[scss]
  ├ style.scss----------：分割されたSCSSファイルを統合する役目を持ちます
  │
  ├ [0_base]------------：スタイルの基本設定を記述したファイルを格納するディレクトリです
  │  ├ _develop.scss----：開発用のスタイルを記述するファイルです
  │  ├ _mixin.scss------：Sassのミックスインを記述するファイルです
  │  ├ _reset.scss------：スタイルのリセットやノーマライズをするファイルです
  │  ├ _utility.scss----：微調整用のクラスなどを定義するファイルです
  │  └ _vars.scss-------：変数設定用のファイルです
  │
  ├ [1_layout]----------：全体のレイアウトに関するスタイルを記述したファイルを格納するディレクトリです
  │  ├ _breadcrumb.scss-：パンくずリストのスタイルを記述するファイルです
  │  ├ _footer.scss-----：フッターのスタイルを記述するファイルです
  │  ├ _header.scss-----：ヘッダーのスタイルを記述するファイルです
  │  ├ _layout.scss-----：全体のレイアウトのスタイルを記述するファイルです
  │  └ _side.scss-------：サイドバーのスタイルを記述するファイルです
  │
  ├ [2_component]-------：各種コンポーネントのスタイルを記述したファイルを格納するディレクトリです
  │  ├ _01_btn.scss-----：ボタンのスタイルを記述するファイルです
  │  ├ _02_title.scss---：タイトル(見出し)のスタイルを記述するファイルです
  │  ├ _03_icon.scss----：アイコンのスタイルを記述するファイルです
  │  ├ _04_form.scss----：フォーム関連のスタイルを記述するファイルです
  │  ├ _05_text.scss----：テキストのスタイルを記述するファイルです
  │  ├ _06_navi.scss----：ナビゲーションのスタイルを記述するファイルです
  │  ├ _07_img.scss-----：画像のスタイルを記述するファイルです
  │  ├ _08_list.scss----：リストのスタイルを記述するファイルです
  │  ├ _09_table.scss---：テーブルのスタイルを記述するファイルです
  │  ├ _10_line.scss----：区切り線のスタイルを記述するファイルです
  │  ├ _11_video.scss---：ビデオのスタイルを記述するファイルです
  │  ├ _12_slide.scss---：スライドのスタイルを記述するファイルです
  │  └ _99_other.scss---：その他のスタイルを記述するファイルです
  │
  └ [3_project]---------：各ページ独自のスタイルを記述したファイルを格納するディレクトリです
     ├ _index.scss------：トップページのスタイルを記述するファイルです
     └ _about.scss------：aboutページのスタイルを記述するファイルです

ID・Classの使い分け

アンカーリンクの対象となる要素を除き、原則としてClassのみを使用してコーディングしてください。
アンカーリンクの対象となる要素に関しても、通常通りにClassでスタイルを付与した後に、アンカーリンク用としてIDを付与して下さい。

セレクタの書き方

• セレクタにIDを使用しない
• 全称セレクタは使用しない
• 要素セレクタは必要性がなければ使用しない
• 抽象化したセレクタを先に記述し、個別のセレクタなどは抽象化したセレクタの後に記述する
• HTMLに出てくるコンテンツの順番とセレクタの順番を同じにする

調整用Classについて

調整用Classとは、.mb0 { margin-bottom: 0; }や.taCenter { text-align: center; }のような、単一のプロパティを持つ汎用的なClassのことで、このようなClassの使用は極力避けるべきです。

よくあるのが同じ種類のタグが連続するコンテンツの最後の要素に対して下マージンを消すために.mb0と指定している場合です。
この場合はコンテンツの最後なので.lastChildというクラスを付けた方が適切ですし、Classさえついていれば複数のプロパティを指定でき、他の箇所でも使用できるため汎用性があります。

調整用Classの使用が許容されるケースとしては、表の中でセル別にテキスト位置を指定したいときや、フォーム要素の幅で例外を指定したいときなど、限定的な状況です。
理想としてはこういった部分にもClassを付ける方が適切と考えられますが、Classの個数が多くなりがちで、それぞれに適切に命名していると時間がかかってしまううえに、Classを指定しても単一のプロパティしか指定しないことが多いので、微調整用クラスを使っている状態と大差がないため、許容範囲とします。

JPEG・PNG・GIFの使い分け

JPEG

写真などのフルカラーの画像や、グラデーションがかかっている等、色数が多い画像に使用してください。

PNG-32(24)

透過色がある画像に使用してください。
ファイルサイズが肥大化しがちなので、極力使わずに済むようにスライスを工夫してください。

PNG-8

256色に収まるイラスト・ボタン・アイコンなどに使用してください。

GIF

GIFアニメーションにのみ使用してください。

Fireworks・Photoshop（Illustrator）での書き出し設定

Fireworks

JPEGの設定

PNGの設定

GIFの設定

Photoshop（Illustrator）

JPEGの設定

PNGの設定

GIFの設定

Viewportの設定

テンプレートで使用している以下の設定を標準としますが、案件の仕様によっては変更して使用してください。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

width

Viewportの横幅を指定する
初期値は960pxで200px～10000pxまで指定できる
device-widthを指定するとデバイスの幅をwidthとして使用する

initial-scale

表示倍率の初期値
初期値は1

minimum-scale

最小表示倍率
初期値は0.25で0より大きく10未満の値が指定できる

maximum-scale

最大表示倍率
初期値は1.6で0より大きく10未満の値が指定できる

user-scalable

ユーザーのズーム操作の許可
初期値はyesでyes/no、もしくは1/0で指定できる

コーディングする順番

CSS3が浸透するまではレイアウトの自由度が低いSPからコーディングするべきとされていましたが、現状(2018/05現在)ではほとんどのブラウザでCSS3が使用できるようになっているため、PCとSPのどちらからコーディングするかは大きな問題ではなくなりました。
ただし、本当に自由にコーディングしてしまうと、PC版が基準になっている箇所とSP版が基準になっている箇所が混在してしまうことも考えられるため、案件ごとに基準になるデバイスをきちんと設定することが重要です。

レスポンシブコーディングに慣れていない場合、SP版からコーディングしたほうが効率よく対応できるケースが多いので、SP版のデザインが存在している案件ではSP版からコーディングすることを推奨します。

ブレイクポイントの目安・書き方

昨今のブレイクポイントの設定は非常に複雑です。
以前は端末種別毎の境界がぼんやりと存在していたので、スマートフォンとタブレットの境界は736px程度、タブレットとPCの境界は1000px程度と目安を定めることができました

しかし、現在(2018/05)は様々なデバイスが存在しているので、解像度も様々です。
特にモバイル端末では、タブレット並みの解像度を持つスマートフォンやスマートフォン並にコンパクトなタブレットなども存在するので、端末種別毎といったシンプルなブレイクポイントの設定ができなくなってきています。
端末種別に惑わされず、「どの解像度範囲のときにどのデザインを再現させるか」をクライアント、もしくはデザイナー・ディレクターと相談し、案件ごとのブレイクポイントを適切に設定してください。
ブレイクポイントの再設定によるスタイルの再調整には、想像している以上の時間が必要になります。
本来必要のない作業に多くの時間を費やすことになってしまうので、ブレイクポイントの設定は作業前に必ず確認しておきましょう。

ブレイクポイントとして設定されうると考えられる値を以下に挙げるので、設定の際の参考にしてください。

768px

比較的新しい端末であればSP/TBの境目になるので、ほぼすべてのスマートフォンをカバーできる値
ただし、例外としてiPhone Xの横持ちで画面をフルに使う設定だと範囲外になる
また、小さめのタブレットの縦持ちはこの範囲に含まれてしまう

812px

iPhone Xの横持ちで画面をフルに使う設定もカバーする値
ただし、ほとんどのタブレットの縦持ちまではカバーしているが、横持ちは範囲外になる

1280px

ほぼ全てのスマートフォンとタブレットをカバーできる値
ただし、12.9インチ版のiPad Proが例外になる

1366px

12.9インチ版のiPad Proを横持ちまでカバーできる値
現在(2108/05)調査した限りでは例外なくスマートフォンとタブレットをカバーできる

メディアクエリを記述する箇所

旧テンプレートと新テンプレートでルールが異なるので、混在しないように注意してください。

/* 基準となるPC用のスタイル */

@media only screen and (min-width: 768px and max-width: 1280px) {
	/* ※ブレイクポイントを複数設定する場合 */
	/* タブレット用に調整するためのスタイル */
}

@media only screen and (max-width: 767px) {
	/* スマートフォン用に調整するためのスタイル */
}

/* _mixin.scss */
//============================================
// breakpoint
//============================================
@mixin sp {
	@media screen and (max-width: 767px) {
		@content;
	}
}

/* _hogehoge.scss */
.hogehoge {
	@include sp{
		hugahuga: hagehage;
	}
}

画像の切り替え方

Media Queryによる切り替え

要素の出し分けと同様に、専用のクラスを付与して出し分けを行います。

picture・srcsetによる切り替え

HTML5で追加された新要素で表示を切り替えることも可能です。
ブラウザのスクリーン要件(幅・高さ・ピクセル密度等)で判別し、それぞれの要件で異なる画像を読み込ませることができます。
レンダリング時に処理される為、表示しない画像は読み込まれず、処理速度・表示速度の向上も期待できます。
ただし、現状(2018/05)ではIE(11)で対応しておらず、LazyLoadとの相性もよくない(srcset属性に対応していない)ようなので、案件で使用できる方法ではありません。

フルードイメージの作り方

フルードイメージは画像のサイズをブラウザのウィンドウサイズに合わせて表示する方法です。
フルードイメージにする場合にはimgタグのwidth属性とheight属性は必要ではなくなり、CSSで画像サイズを調整します。

/* html */
<img src="img/sample.png" alt="">

/* css */
img {
	max-width: 100%;
	height: auto;
}

Name値の設定

• Name値は項目名を端的に表すユニークなものにしてください。
• ユニークにできない項目は連番を付けてください。
• ○○の住所、××の住所といった項目名の場合はName値にプレフィックスを付けてください。

Labelタグの使い方

• テキストボックスやセレクトボックスでは項目名に使用し、対象となるフォーム要素に付与したIDをfor属性で指定してください。
• チェックボックスやラジオボタンの場合は、項目名ではなくそれぞれのラベルテキストとinput要素をlabelタグで囲ってください。

送信ボタンの作り方

• inputタグを使用しないこと。
• buttonタグを使用し、type属性をsubmitとすること。

フォーム要素に入力されたテキストのフォントサイズと余白について

デザインでの指定がない場合は以下のルールで体裁を整えてください。
※常識的な内容ではありますが、デザインで表現されないことも多く、見落としがちな部分なのでガイドラインとして組み込みます。

• フォントサイズは統一すること。
• 入力されたテキストと入力フィールドの枠が密接しないように数px（2～5px）の余白を空けること

外部ファイル化する箇所

ヘッダー・フッター・サイドバーなど大量のページで同じデザインを使う部位は外部ファイル化してください。

外部ファイルの読み込み方

$_SERVER['DOCUMENT_ROOT']を使用して絶対パスでrequire_onceで読み込んでください。

<?php require_once($_SERVER['DOCUMENT_ROOT'].'/assets/include/header.php'); ?>

外部ファイルを置くディレクトリ

サイト全体で使用するもの

/assets/include/

特定ディレクトリ以下で使用するもの

/assets/include/ディレクトリ名/

画像のまとめ方

スプライト画像は手動で作成しようとすると非常に手間がかかるため、ジェネレータ等を利用して画像を作成して下さい。

画像を配置するフォルダ

CSS Spriteは複数のページで使われるもののため、/img/common/sprite/など、共通画像を格納するディレクトリにスプライト用のディレクトリを作成して配置してください。

WordPress本体のバージョンおよび各プラグインのバージョン

特に指定がない限り、WordPress本体および各プラグインは最新の安定版を使用します。

インストールディレクトリ

特に指定がない限り、標準のインストールディレクトリはドキュメントルート直下の「wp」とします。

データベーステーブルの接頭辞

デフォルトでは「wp_」となっていますが、このままだと同じ接頭辞の設定で別のWPをインストールした場合、DBが上書きされてしまう可能性があります。
そのため、案件名やドメイン名など、ユニークなものを設定します。

インストール時点でWPが1つしか入らないことになっていたとしても、後に追加される可能性は充分に考えられます。
よって、この設定は必ず守るようにしてください。

テーマの命名規則

案件名やドメインなど、ユニークなものを使用して下さい。

インストール必須のプラグイン

WP Multibyte Patch

WPで日本語などのマルチバイト文字を正しく扱えるようにするためのプラグインです。
WP本体に同梱されているので、必ず有効化してください。

.htaccessについて

.htaccessのパーミッションについて

WordPressではパーマリンクの設定を変更したときなど、一定のタイミングで.htaccessの「# BEGIN WordPress」から「# END WordPress」までがWPによって上書きされてしまいます。
これにより、正常に表示できなくなってしまうことがあるので、パーマリンクの設定が完了した後は.htaccessのパーミッションを「444（読み込みのみ可能）」などに変更し、意図しない書き換えを防ぎます。

ディレクトリのパーミッションについて

ファイルのアップロードフォルダ

標準ではファイルのアップロードフォルダは「/wp/wp-content/uploads/」になりますが、ファイルをアップロードするためにはパーミッションの変更が必要なため、このフォルダのパーミッションを「777（読み込み・書き込み・実行可能）」に設定します。

ファイルデータサイズの削減

レンダリング速度の改善

• CSSファイルを優先して読み込んでください。
• JavaScriptファイルは</body>の直前に読み込むか、非同期で読み込んでください。
• imgタグにはwidthとheightを指定してください。
• CSS SpriteやCSS・JavaScriptファイルの結合を行い、HTTPリクエストを削減してください。
• 別ドメインへのHTTPリクエスト（DNSルックアップ）を削減してください。

リンクテキスト内容ごとの対応の変更

リンクテキストごとに対応可能な方法と不可能なものがあります。
下記を参考に対応してください。

１．リンクテキストが画像、もしくはメールアドレスでないテキスト

メールアドレスが画像、もしくは「お問い合わせはこちら」のような内容のリンクテキストの場合は、
http://mailrobo.7jp.net/mrobo4.htmlやhttp://www.luft.co.jp/cgi/coding.phpの「安全性：高」のようにJavaScriptを使用し対応してください。

２．リンクテキストがメールアドレスの場合

メールアドレスがリンクテキストの場合は、
http://www.luft.co.jp/cgi/coding.phpの「安全性：中」を使用して下さい。

３．JavaScriptで対応が難しい場合

Wordpressに組み込みで対応が難しい場合などは、
http://www.luft.co.jp/cgi/coding.phpの「安全性：低」などを使用しエンティティ化で対応してください。

h1のマークアップについて

h1は「ページの大見出し」という意味合いになるため、基本的にはページ名に当たる文言をh1としてマークアップします。
昔はサイト名（ロゴ）をh1でマークアップしたり、ロゴ上部にSEO目的でキーワードを含めた文言を設置しh1でマークアップする手法が流行りましたが、現在では、SEOのためにh1にキーワードを詰め込むより、本来のタグの意味に従って、ページの大見出しである文言をマークアップすることが効果的です。

リダイレクト

ここではリダイレクトを行うにあたって、SEOの観点でダイレクトの種類と特性を説明し、それぞれの使いどきを示します。

構造化データ

構造化データに対応した記述を行うことで、検索結果画面にリッチスニペットやリッチカードを表示する事ができるようになります。
検索順位に直接影響するものではありませんが、検索結果ページでのクリック率の増加が期待できます。

Googleではパンくずリストやレビュー、商品データといったリッチスニペットに対応しています。
また、構造化データはJSON-LDで記述することとします。

推奨フォント

コーディングに使用するフォントは可読性の観点からプログラミング用フォントを推奨します。
フォントの設定は Preferences -> Settings - User から行うことができます。
プログラミング用フォントの例としては「Source Code Pro」などがあります。