More than 1 year has passed since last update.

「今日から携わる」コーディングガイドライン。社内でレギュレーション・規約などの基本ルールを共有して、納品レベルを底上げしよう！

Last updated at 2024-02-08Posted at 2018-11-18

多人数でのコーディングや、作業する人によってコーディングの納品レベルを下げないためにもガイドラインを作って統一しましょう！

1.基本仕様

対応ブラウザ

IE11
Firefox最新
Google Chrome最新
Safari最新

ディレクトリ階層

ディレクトリ見本

public
├── assets
│   ├── css
│   ├── img
│   └── js
├── inc
│   ├── header.html
│   └── footer.html
├── index.html
├── service
│   ├── index.html
│   └── detail.html
├── faq.html
├── company.html
├── contact
    ├── index.html
    ├── confirm.html
    └── thanks.html

※画像・CSS・JSなど、html文書以外のファイルは「assets」フォルダに格納する

2.HTML仕様

書式設定

HTML5で記述
文字コードはUTF-8（BOMなし）を使用
*インデントは半角スペース4つ

注意点

文章の構造と装飾を分けることを徹底して、インラインにて装飾をしない
文章の階層構造（アウトライン）を意識して、且つ、論理マークアップを行う
画像にはalt属性を指定する
バリデーターのツールを使用してチェックする
実体参照をせずに、特殊文字を使用

外部参照の方法

▼推奨

html

<link rel = "stylesheet" href = "/assets/css/main.css" >
<script src = "/assets/js/script.js" > </ script>

▼非推奨

html

<link rel = "stylesheet" href = "/assets/css/main.css" type = "text / css" >
<script src = "/assets/js/script.js" type = "text / javascript" > </ script>

HTML引用符

属性値を引用するときは、二重引用符を使用

html

<p class="text">テキスト</p>

3.CSS仕様

CSSは、装飾（スキン）と構造（ストラクチャー）を分けて設計する
CSS設計には「SMACSS」と「OOCSS」を使い、意味のあるクラス名にする
装飾にはID名を禁止とし、クラス名のみをつかう

単位・表記

*フォントの単位はrem（例：1.8rem）
*line-heightには単位をつけない（例：1.6）
カラーコードは可能であれば、3文字の16進表記を使用

命名規則

CSSのクラス名には、ハイフン（hoge-main）を使用する
camel（hogeMain）やsnake（hoge_main）は使わないこと

ステートクラス

.is-open     // 開き中
.is-active   // 選択中
.is-focus    // フォーカス中
.is-disabled // 非活性中
.is-touched  // タップ中

ディレクトリ見本

public
└── assets
    └── scss
        ├── base
        │ ├── _base.scss
        │ └── _utility.scss
        │ └── _theme.scss
        │ └── _js_slick.scss
        │ └── _reset.scss
        ├── layout
        │ ├── _contents.scss
        │ ├── _header.scss
        │ └── _footer.scss
        └── module
          ├── _btn.scss
          └── _nav.scss