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

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

## 目次
* [1.基本仕様](#ref01)
* [2.HTML仕様](#ref02)
* [3.CSS仕様](#ref03)


<a id="ref01"></a>
## 1.基本仕様

### 対応ブラウザ
* IE11
* Firefox最新
* Google Chrome最新
* Safari最新


### ディレクトリ階層

```html:ディレクトリ見本
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」フォルダに格納する



<a id="ref02"></a>
## 2.HTML仕様

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

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

### 外部参照の方法
▼推奨

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

▼非推奨

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

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

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

<a id="ref03"></a>
## 3.CSS仕様

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

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

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

```css:ステートクラス
.is-open     // 開き中
.is-active   // 選択中
.is-focus    // フォーカス中
.is-disabled // 非活性中
.is-touched  // タップ中
```


```css:ディレクトリ見本
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
```


### module例（bootstrapを参考）
alert
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254652/412f95b6-2ee2-1592-1548-e7dde1b00641.png)

badge
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254652/199f2991-fe7b-2906-6828-d472991e15c6.png)

breadcrumb
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254652/1c2b2cd6-01b9-feb6-83f5-6de180181147.png)

btn（-link,-request,-clear,-back,-delete）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254652/ec525442-7ff2-53a1-3f54-a3dee53e1d44.png)

card（-img-top,-body,-title,-text）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254652/409da3e0-f081-1a16-3cf1-205cd1b4c218.png)

carousel,slider
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254652/a39d041b-c2c8-763d-6467-435fd6b88bcb.png)

grid
form
image
list
nav
pagination
progress
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254652/e7275c29-d391-11b8-3e1d-14d3934f1707.png)
spinner
table
kv（キービジュアル）

js-toast
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254652/efc0f084-ad1c-962c-9cc8-4a299165b88d.png)

js-tooltip
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254652/507a5141-9e83-d133-efd5-3681d75f4baf.png)

js-modal
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254652/f9d726cf-0470-20e3-d137-cde2a7f03710.png)

js-accordion
js-dropdown

Utility: Border
Utility: Color
Utility: Display
Utility: Flexbox
Utility: Misc
Utility: Positioning
Utility: Sizing
Utility: Spacing
Utility: Text



## 参考
> フロントエンド制作ツール・環境について|lab-bit|CMS|株式会社キュービット
> https://cubit.style/detail/114.html

> HTML,CSS高速コーディングマニュアル【作業環境編】 - Qiita @sawadays0118
> https://qiita.com/sawadays0118/items/68b59c4034b1722ff958