コーディング規約<Logic+A design & smile-media>

最終更新日　2023年11月30日

この文書の背景

この文書は、Logic+A design が制作・運用時のHTMLやCSSの書式とスタイルのルールを定義するものです。

WEB全体のルール

ページURL・SSL

プロトコルの記述

URLの記述時、プロトコルは「**https:**」で記述する。 ※hrefへの記述時は原則プロトコルは記述しないが、絶対パス記述が必須な箇所はhttps://にして記述する

<!-- NG -->
http://logic-a.com/about

<!-- OK -->
https://logic-a.com/about
/about

常時SSL

http://〜　にはアクセスできないように、同URLの　https://〜　にリダイレクトさせる。リダイレクトは **301リダイレクト** であれば、htaccessでもPHPでもOKとする。

ファイル・ディレクトリの命名規則

HTMLファイル、ディレクトリ、画像ファイル及びCSS（ID及びCLASSセレクタ）の名前の付け方は以下を基本ルールとします。 - 半角英数字のみを使用。 - 機種依存文字の使用禁止。 - 全角スペース、半角スペースの使用禁止。 - 「¥」,「/」,「*」,「:」,「?」,「<」,「>」,「|」,「＄」これらの文字の使用禁止。 - 場所と役割を分けて、繋ぎは「-」（ハイフン）を使う - 単語をつなぐときは「_」（アンダーバー）を使う - 単語はなるべく省略しないが、一般的な範囲であればOK

HTML・PHPファイル名（WordPress以外）

- 基本的にそのファイルのページタイトルを英語化し、ディレクトリ名にする。ファイルは「index.html（もしくは index.php）」とする - 同ディレクトリに複数ファイルを配置する場合はメインページを「index.html」にし、サブページはそのページ内容を表すファイル名にする

/* NG: イベント情報 */
/event.html

/* OK: イベント情報 */
/event/index.html
/* OK: 同ページ複数ファイル時 */
/event/map.html
/* OK: 同ページ複数ファイル時（同じような形のページが複数個ある場合） */
/event/map01.html
/event/map02.html

画像

画像名には「場所」と「役割」をつける

- 名称と役割を分けて、繋ぎは「-」（ハイフン）を使う - 単語をつなぐときは「_」（アンダーバー）を使う

<!-- 場所と役割を - で繋ぐ -->
header-bg

<!-- 単語を _ で繋ぐ -->
header_nav-bg.svg

「場所」の規則

- 「場所」は使用箇所や適用ルールの判断が出来る英単語を利用する。 - 大きな場所と、その中の詳細な場所、の2箇所まで記載OK。その場合はアンダーバー（_）で繋ぐ

<!-- 例 -->
header
header_nav
button
main
event_title

「役割」の規則

「役割」は、場所が同じときに用途が分かるように記述する。

<!-- 例 -->
header-bg
event_title-line
button-arrow
button-arrow_reverse

数字

頻繁に使われる（またはその可能性のある）ものには「個性」の後に数字（Number）を記述して対応する。「種類」＋「個性」のあとにナンバリングを付ける。種類だけにナンバリングするなど画像内容が不明瞭になる命名は禁止。

<!-- NG -->
pic01.jpg, pic02.jpg //内容が想像できない

<!-- OK -->
btn_close01.gif //「種類」＋「個性」の後に「数字」
idx_pic_pickup_ucj2018_conan_t.jpg //最後にティザーを表す t
idx_pic_pickup_ucj2018_conan_fix.jpg //最後にFIX版を表す fix

容量

不必要に高解像度にせず、同コンテンツ内と変わらない容量まで圧縮を行う。（目安 100KB以下に）パスとして利用できるもの（ロゴや文字データなど）は極力 svg で書き出すパス利用できないもの（写真など）はWebPで書き出す。 WebP非対応ブラウザ用で、PNG or JPG でも書き出す。　⇒ 背景透過しないなど、PNGにする必要のないケースでは極力JPGで書き出す。

作業環境

ファイルアップロード

開発環境には「Prepros」を使うテスト環境へは開発環境データを別途FTPソフトを利用してアップする。（その際はテスト環境の利用ルールに従う）

バックアップ・バージョン管理

バージョン管理にはGitを使用。その他データ共有などではDropboxやGoogleDriveを使用。極力、時限式サービス（Firestorageなど）は使わない。

開発環境（サーバー）

開発環境は logic-test.group ドメインで発行したサブドメインを使用。

コーディング（書式）ルール（ファイル形式問わず）

エンコード

通常ページの文字コード

エンコードはUTF-8を使う。

<!-- HTML -->
<meta charset="UTF-8">

<!-- CSS -->
@charset "UTF-8";

コード圧縮

コードの品質が維持される場合に限り、難読化、最小化、コンパイルするのは自由ですが、更新性の高いファイルは難読化、最小化、コンパイルは不可とします。

<!-- OK例 -->
外部プラグインファイル、コンパイルしたCSSファイル、プラグイン化した自作JavaScript、など

SCSSコンパイル

SCSSは原則 Prepros を使用。（LPなどHTML案件でもPreprosを使用してください）設定内容は別途「Prepros設定」を参照ください。

リンク(aタグ)、パス(src)の記述

原則は相対パスで記述し、絶対パス、ルートパスは使用NG （CSSも同様）ただし外部サイトへのリンクのみ絶対パスOKですが、その場合は必ず別タブ対策をすること。

<!-- NG -->
 <a href="/test/index.html">テスト一覧</a>
 
 <!-- OK -->
 <a href="./test/index.html">テスト一覧</a>

 <!-- 別タブ対策 -->
 <a href="https://test-test.com" target="_blank" rel="noopener noreferrer"></a>

コードの書き方

インデント

インデントにはタブ（Tab）を使用する。半角スペースを使ったり、タブとスペースを混在させるのはNG。 ※WebReleaceやハブシステムなどによって動的に生成される箇所についてはこの限りではありません

大文字/小文字

小文字のみ使用する。alt属性など、値が文字列の場合は除く。

<!-- NG -->
<A HREF="TEST.png">Home</A>

<!-- OK -->
<a href="test.png" alt="USJ">Home</a>

IDとクラスの命名

誰がみても知ってる（認知できる）英単語を使う ⭕️　OK例 ⇒ header、header_title、contact　など ❌️　NG例 ⇒ a01、h-ttl　ct　など何を表しているか分からないものや人によって解釈が変わるもの）単数形にする ※ 単数と複数が混ざると、複数形を使うべきときかどうかの判断でヒューマンエラーがおきます ❌️　NG例 ⇒ images、shops、contents　などなるべく省略しない例）❌️　socialNetworkService ⇒ ⭕️　sns, social 例）❌️　telephone ⇒ ⭕️　tel 例）🔺　mainVisual ⇒ ⭕　mv ※ 【例外】省略しないと冗長になるときや、省略したほうが一般的で全員の共通理解が得られた場合は省略してもOK

文末のスペース

文末のスペースは削除する。

<!-- NG -->
<p>◯◯の最新ニュースをお届けします </p>

<!-- OK -->
<p>◯◯の最新ニュースをお届けします</p>

箇条書き、注釈

句点

箇条書き、注釈は文末の句点は削除する。文章中の句点は使用してOK。 ※デザインデータや提供された原稿資料があればそちらに従う

<!-- NG -->
<p>※画像はイメージです。</p>

<!-- OK -->
<p>※画像はイメージです</p>

箇条書き、注釈は文末の句点は削除する。文章中の句点は使用してOK。 ※デザインデータや提供された原稿資料があればそちらに従う

2行以上になる場合は行頭文字（・、※、● など）がある1行目以外は1文字分空ける。その際は必ずCSSを使用する。

<!-- NG -->
・アトラクションへの食べ物、飲み物の持ち込みを
お断りします

<!-- OK -->
・アトラクションへの食べ物、飲み物の持ち込みを
　お断りします

<!-- CSS例 -->
li {
        padding-left: 1em;
        text-indent: -1em;
}

メタルール

必要に応じてコードの説明を記述する。全てに必須ではない。後日復旧する可能性の高いコンテンツを削除する場合や、ルーチンで修正が入るのが確定しているコンテンツはあらかじめコメントアウトしておく。 **（未公開情報を含む場合はコメントにも残さず、ソース上から未公開情報含む部分を削除してから公開する）**

<!-- HTMLコメント -->
/*-----  CSS・JSコメント  -----*/
// JSコメント

<!-- NG（非公開情報などが入ったままコメントアウト） -->
<!--<iframe src="https://www.youtube.com/embed/U-8fyGfy9jk"></iframe>-->

HTMLルール

HTMLメタルール（head、meta）

ドキュメントタイプ

W3Cの仕様に準拠したHTML5準拠のソースコードで記述する。以下で始まる形式で書く。

<!DOCTYPE html>
<html lang="ja">

titleタグ

titleタグには決まった形式で入れ込む。ページ名、カテゴリー名を縦線（｜）で区切り、サイト名を入れる。

命名規則：
「ページ名」｜「カテゴリー名」｜ユニバーサル・スタジオ・ジャパン™｜USJ
※下2つは固定

type属性

CSSとJavaScriptのtype属性は省略する。 HTML5ではデフォルトの言語として解釈されるため。

<!-- NG -->
<link rel="stylesheet" href="http://www.usj.co.jp/css/style.css" type="text/css">

<!-- OK -->
<link rel="stylesheet" href="http://www.usj.co.jp/css/style.css">


<!-- NG -->
<script src="http://www.usj.co.jp/js/script.js" type="text/javascript"></script>

<!-- OK -->
<script src="http://www.usj.co.jp/js/script.js"></script>

計測タグ（GTM）

body開始タグ直後にGTMタグを入れる。 ※検証にはソースを直に確認するか、「[制作用ブックマークレット一覧](http://dev.usj.co.jp/tci_test/works.html)」などの検証ツールを使用する ※一部海外ページで共通化したタグが読み込まれないケースがあったため外部JSでの共通化はNG。SSIは要相談

計測タグ（YTM）

body閉じタグ直前にYTMタグを入れる。 ※検証にはソースを直に確認するか、「[制作用ブックマークレット一覧](http://dev.usj.co.jp/tci_test/works.html)」などの検証ツールを使用する ※一部海外ページで共通化したタグが読み込まれないケースがあったため外部JSでの共通化はNG。SSIは要相談

HTML書き方

セマンティックに書く

目的に応じてHTMLに意味を付けて記述する。見出しならhx要素、段落ならp要素、アンカーならa要素など目的に応じたHTML要素を使う（「HTMLタグ」という言い方は間違い）。リンクならa要素で書く。onclickのようなJavaScriptな振る舞いのものを要素の属性に入れない。 ※テンプレートにある機能であれば、既設のclassを使う [PCテンプレート](http://www.usj-o.x-perience.jp/_tpl/module.html) [SPテンプレート](http://s.usj-o.x-perience.jp/_tpl/module.html)

<!-- NG -->
<div onclick="remodal();">モーダルを開く</div>

<!-- OK -->
<a href="#remodal">モーダルを開く</a>

全般的な書式

ブロック要素・リスト要素・テーブル要素は改行してから記述し、それらの子要素にはインデントを入れる。横並びリストなど改行による空白が問題になる場合は、li要素をすべて一行で書いてもOK。

<blockquote>
        <p><em>Space</em>, the final frontier.</p>
</blockquote>

<ul>
        <li>Moe</li>
        <li>Larry</li>
        <li>Curly</li>
</ul>

<table>
        <thead>
                <tr>
                        <th scope="col">Income</th>
                        <th scope="col">Taxes</th>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <td>$ 5.00</td>
                        <td>$ 4.50</td>
                </tr>
        </tbody>
</table>

マルチメディア（画像・動画など）の代替コンテンツ（Altなど）

マルチメディアの要素には、代替コンテンツを提供する。画像には、意味のある代替テキストをalt属性として、動画・オーディオコンテンツにはキャプションを記述する。装飾的な用途の場合など意味を持たない画像については、代替テキストは記述せずにalt=""とする。

<!-- NG -->
<img src="logo.png">

<!-- OK -->
<img src="logo.png" alt="ロゴ">
<img src="icon.png" alt="">

特殊文字（実態参照化）

以下の文字は実態参照で記述する。それ以外の特殊文字については適宜対応。

™ -> &trade;
® -> &reg;
© -> &copy;
& -> &amp;
< -> &lt;
> -> &gt;
\ -> ¥ //エンマークは全角(￥)か&yen;

CSSルール

CSS3について

CSS3の利用も認めるが、最低限IE9において要件に見合った表示になるよう配慮を行うものとする。（表示が意図したものから若干崩れても、モダンブラウザと比較して機能や内容（意味）を損なわず、ビジュアル的に耐えうるレベルであれば導入可）

CSSの書き方

プロパティの記述順序

CSSのプロパティの記述順を以下のように定める。 ※下記3つのブロックが確立されていれば、その中でのプロパティの順番は問わない

/* 1．位置関係を定義するプロパティ */
display
position
float
など
/* 2．ボックスモデルを定義するプロパティ */
width、height
margin、padding
border、background
など
/* 3．文字の体裁やフォントを定義するプロパティ */
font
color
text-align
など

プロパティの終端

すべてのプロパティの終端はセミコロンを書くこと。

/* NG */
.test {
	height: 100px
}

/* OK */
.test {
	height: 100px;
}

プロパティ名の終端

すべてのプロパティ名の終端にはコロンの後にスペースを入れること。

/* NG */
h3 {
	font-weight:bold;
}

/* OK */
h3 {
	font-weight: bold;
}

IDやクラス名の区切り文字

IDやクラス名の別々の単語はハイフンで繋ぐ。

/* NG: [demo]と[image]が繋がってる */
.demoimage {}

/* NG: アンダーバーで繋がってる */
.error_status {}

/* OK */
# video-id {}
.harry-potter {}

セレクタとプロパティの分離

別々のセレクタとプロパティは改行して書くこと。

/* NG */
h1, h2, h3 {
	 font-weight: normal; line-height: 1.2;
}

/* OK */
h1,
h2,
h3 {
	font-weight: normal;
	line-height: 1.2;
}

CSSルールの分離

別々のCSSルールは改行して一行間を空けて書く。

html {
	background: #fff;
}

body {
	margin: auto;
	width: 50%;
}

ブロック単位のインデント

その階層がわかるようにブロック単位でコードをインデントする。

@media screen, projection {
	html {
		background: #fff;
		color: #444;
	}
}

ベンダープレフィックス

ベンダープレフィックスを付けるかどうかは下記サイト参照。 [Autoprefixer](https://autoprefixer.github.io/) ※Filter は last 4 version にすること ※ベンダープレフィックスを付ける場合、無印のプロパティより必ず上に記述する

/* NG: 無印よりベンダープレフィックスが下にある */
display:flex;
display:-webkit-box;
display:-ms-flexbox;

/* OK */
display:-webkit-box;
display:-ms-flexbox;
display:flex;

タイプセレクタの記述

IDとクラス名にタイプセレクタは記述しない。 [パフォーマンスを考慮](http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/)して不要な子孫セレクタも避ける。

/* NG */
ul#example {}
div.error {}

/* OK */
# example {}
.error {}

ショートハンドプロパティ

可能な限り[ショートハンド](http://zero.css-happylife.com/basic/shorthand.shtml)でプロパティを書く。

/* NG */
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* OK */
padding: 0 1em 2em;

「0」と単位

値が「0」なら単位を省略する。

margin: 0;
padding: 0;

小数点の頭の「0」

小数点の頭の「0」は省略する。

font-size: .8em;

URI値の引用符

url()での指定において、""（ダブルコーテーション）や''（シングルコーテーション）などのURI値の引用符を省略すること。

@import url(/pc/common/css/base.css);

HEX形式のカラーコード

HEX形式のカラーコードで3文字で表記できるものは3文字にする。

/* NG */
color: #eebbcc;

/* OK */
color: #ebc;

CSSメタルール

セクションのコメント

セクションごとにコメント（任意）を記述する。

/* Header */
# adw-header {}

/* Footer */
# adw-footer {}

/* Gallery */
.adw-gallery {}

CSSのバリデート

可能な限り適切なCSSを記述すること。 CSSバリデーターにバグがある場合や独自の構文を必要としない限りは、ちゃんと書く。 [W3C CSS validator](http://jigsaw.w3.org/css-validator/)などのツールで検証する。

CSSハック

ユーザーエージェント別の対応のためにCSSハックを使う前に別の方法を試してみること。 CSSハックは、ユーザーエージェントごとの違いを吸収するためには簡単で魅力的な方法だが、プロジェクト全体のコードの品質を落とすことにもなるので「最後の手段」として考えること。基本的に利用しないのを原則としますがブラウザのバグによりどうしても必要な場合には利用することを許可する。

JavaScript

基本ルール

JavaScriptは動的な表現が必要な際と、外部APIなどを利用した際、GAなどの計測が必要な際、出し分けの条件分岐時などに使用する。 JavaScriptはできる限り外部ファイル化し、タグ内で読み込ませる。（記述の統一性や管理の面から直前などフッター位置には置かずタグ内で統一）ただし、外部サービスなどの指定されたJavaScriptを利用する際に、読み込みの方法に指定がある場合はそれに従う。（GTMやYTMなど）また、そのページでのみ利用するJavaScriptの場合は、HTMLファイルに直接書き込む。

WordPress

テンプレート

WordPress　トップページ

- トップページは front-page.php に記述する

WordPress　固定ページ

- 共通化・テンプレ化できる固定ページは極力 page.php に記述する - page.php 内でif分岐させてページ固有のコードを書くのはOK - 共通化が難しいデザインの場合は固有の page-xxx.php を作成してOK

WordPress　投稿ページ

- 原則は固定ページと同じ - single.php を原則として、single-xxx.php を適宜発行する

WordPress　一覧ページ

- 原則は固定ページと同じ - archive.php を原則として、archive-xxx.php を適宜発行する - ケースに応じて tag.php や category.php、search.php を発行してOK

それ以外のWordPressテンプレート

- 必ずindex.phpは用意する（内容は可能な限り汎用性が高くなるよう、page.phpなどを流用する） - 404.php も同様に準備する。（内容は index.php を元に、404に該当する内容やトップに戻るリンク、検索窓などを設置する）

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

- メインサイト以外にLPなど別ディレクトリを設置しやすくするため、ルート直下に「wp」フォルダを作成してその中にWordPressをインストールする

コーディング規約<Logic+A design & smile-media>

この文書の背景

WEB全体のルール

ページURL・SSL

プロトコルの記述

常時SSL

ファイル・ディレクトリの命名規則

HTML・PHPファイル名（WordPress以外）

画像

画像名には「場所」と「役割」をつける

「場所」の規則

「役割」の規則

数字

容量

作業環境

ファイルアップロード

バックアップ・バージョン管理

開発環境（サーバー）

コーディング（書式）ルール（ファイル形式問わず）

エンコード

通常ページの文字コード

コード圧縮

SCSSコンパイル

リンク(aタグ)、パス(src)の記述

コードの書き方

インデント

大文字/小文字

IDとクラスの命名

文末のスペース

箇条書き、注釈

句点

箇条書き、注釈は文末の句点は削除する。 文章中の句点は使用してOK。 ※デザインデータや提供された原稿資料があればそちらに従う

メタルール

コメント

HTMLルール

HTMLメタルール（head、meta）

ドキュメントタイプ

titleタグ

type属性

計測タグ（GTM）

計測タグ（YTM）

HTML書き方

セマンティックに書く

全般的な書式

マルチメディア（画像・動画など）の代替コンテンツ（Altなど）

特殊文字（実態参照化）

CSSルール

CSS3について

CSSの書き方

プロパティの記述順序

プロパティの終端

プロパティ名の終端

IDやクラス名の区切り文字

セレクタとプロパティの分離

CSSルールの分離

ブロック単位のインデント

ベンダープレフィックス

タイプセレクタの記述

ショートハンドプロパティ

「0」と単位

小数点の頭の「0」

URI値の引用符

HEX形式のカラーコード

CSSメタルール

セクションのコメント

CSSのバリデート

CSSハック

JavaScript

基本ルール

WordPress

テンプレート

WordPress トップページ

WordPress 固定ページ

WordPress 投稿ページ

WordPress 一覧ページ

それ以外のWordPressテンプレート

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

箇条書き、注釈は文末の句点は削除する。文章中の句点は使用してOK。 ※デザインデータや提供された原稿資料があればそちらに従う

WordPress　トップページ

WordPress　固定ページ

WordPress　投稿ページ

WordPress　一覧ページ