webサイト制作を行う際、事前に策定すべき事項

HTMLとCSSを使用したWebサイト制作を行う際、事前に策定する事項をまとめました。

# 1. 対象ブラウザを決める

動作を保証するブラウザを取り決める。
基本的にはシェア率を元に考えていく。

ブラウザの国内シェア率：
[Browser Market Share Japan | StatCounter Global Stats](https://gs.statcounter.com/browser-market-share/all/japan#monthly-201910-202010-bar)

## 例

下記ブラウザの各最新版に対応する。

- Google Chrome
- Safari
- Firefox
- Microsoft Edge

## IE10以前について

サポートが切れているため対応しない。

## IE11について

基本的には対応しないが、ターゲットユーザーによっては配慮が必要になる。

参考記事：
[IEでWebサイトが崩れる？大手サイトも切り離したIEとどう付き合うか | Digital Solution Media](https://www.urban-project.jp/blog/recommended/348/)

# 2. 対象OSを決める

動作を保証するOSを取り決める。
基本的にはシェア率を元に考えていく。

Windowsのバージョン国内シェア率：
[Desktop Windows Version Market Share Japan | StatCounter Global Stats](https://gs.statcounter.com/windows-version-market-share/desktop/japan/#monthly-201910-202010-bar)

macOSのバージョン国内シェア率：
[Desktop macOS Version Market Share Japan | StatCounter Global Stats](https://gs.statcounter.com/os-version-market-share/macos/desktop/japan#monthly-201910-202010-bar)

iOSのバージョン国内シェア率：
[Mobile & Tablet iOS Version Market Share Japan | StatCounter Global Stats](https://gs.statcounter.com/os-version-market-share/ios/mobile-tablet/japan#monthly-201910-202010-bar)

Androidのバージョン国内シェア率：
[Mobile & Tablet Android Version Market Share Japan | StatCounter Global Stats](https://gs.statcounter.com/os-version-market-share/android/mobile-tablet/japan#monthly-201910-202010-bar)

## 例

- Windows：10.x 以降に対応
- macOS：10.13 以降に対応
- iOS：12.x 以降に対応
- Android：6.x 以降に対応

# 3. レスポンシブ対応について

## ブレイクポイントを検討する

スタイル切り替えの基準点となるブレイクポイントを取り決める。
基本的にはシェア率を元に考えていく。

デバイス幅の国内シェア率：
[Screen Resolution Stats Japan | StatCounter Global Stats](https://gs.statcounter.com/screen-resolution-stats/all/japan/#monthly-201910-202010-bar)

「デスクトップ vs モバイル vs タブレット」の国内シェア率：
[Desktop vs Mobile vs Tablet Market Share Japan | StatCounter Global Stats](https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/japan)

参考記事：

- [【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった\[2019最新版\] - webのあれこれ](https://hashimotosan.hatenablog.jp/entry/2019/05/28/164834)
- [レスポンシブWebデザインのブレークポイントの決め方｜コンテンツ・デバイスベースの利点・欠点まとめ | Ozlink LAB | マーケティングエージェンシー 株式会社Oz link（オズ・リンク）](https://www.ozlink.co.jp/lab/638/)
- [レスポンシブサイト用ブレイクポイント考察！時代に適するサイズとは？│CSS│SYMMETRIC Web開発ブログ](https://www.site-convert.com/archives/1595)

## メディアクエリの記述方法

### CSSで記述

```css
.foo { display: none; }

@media (min-width: 769px) {
  .foo { display: block; }
}
```

### [SCSS](https://sass-lang.com/documentation)で記述 & メディアクエリ用Mixinの [sass-mq](https://github.com/sass-mq/sass-mq) を使用

```scss
$mq-breakpoints: (
  desktop: 769px
);

@import 'mq';

.foo {
  display: none;

  @include mq(desktop) {
    display: block;
  }
}
```

- [sass-mq/sass-mq - GitHub](https://github.com/sass-mq/sass-mq)

上記のようにセレクタベースでメディアクエリを記述した場合、生成されるCSS内で同じサイズのメディアクエリが散らばってしまうため、[CSS MQPacker](https://github.com/hail2u/node-css-mqpacker) などのツールを利用してまとめる必要がある。

From:

```css
@media (min-width: 769px) {
  .foo { display: block; }
}
@media (min-width: 769px) {
  .bar { display: block; }
}
@media (min-width: 769px) {
  .baz { display: block; }
}
```

To:

```css
@media (min-width: 769px) {
  .foo { display: block; }
  .bar { display: block; }
  .baz { display: block; }
}
```

# 4. その他策定事項

## 全体

||例|候補|
|---|---|---|
|パッケージマネージャー||[Yarn](https://classic.yarnpkg.com/ja/)、[npm](https://www.npmjs.com/)|
|タスクランナー||[Gulp](https://gulpjs.com/)、npm scripts|
|コードの命名規則|[BEM](http://bem.info/)の命名規則を利用する|ケバブケース(ab-cd)<br>スネークケース(ab_cd)<br>キャメルケース(abCd)<br>パスカルケース(AbCd)|
|ファイルの命名規則|小文字のアルファベット、数字、ハイフンで構成する|
|インデント|半角スペース2つ|
|Retina対応|モバイルデバイスのみ対応する|
|アクセシビリティ方針|WCAG 2.0のレベルAに準拠する<br>参考情報：<br>[アクセシビリティ指針 ｜ ソフトバンク](https://www.softbank.jp/help/sitepolicy/accessibility/)<br>[ウェブアクセシビリティ方針 - 企業情報 - ヤフー株式会社](https://about.yahoo.co.jp/common/accessibility/)<br>[Web Content Accessibility Guidelines - Wikipedia](https://ja.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines)<br>[WCAG 2.0 達成方法集](https://waic.jp/docs/WCAG-TECHS/Overview.html)|

## CSS

||例|候補|
|---|---|---|
|メタ言語||[Sass(SCSS)](https://sass-lang.com/documentation)<br>[LESS](http://lesscss.org/)<br>[Stylus](https://stylus-lang.com/)|
|CSS設計|OOCSSとSMACSSを組み合わせて使用する|[BEM](http://bem.info/)<br>OOCSS<br>[SMACSS](http://smacss.com/ja)<br>[FLOCSS](https://github.com/hiloki/flocss)|
|スタイルガイドジェネレーター||[Fractal](https://fractal.build/)<br>[kss-node](https://github.com/kss-node/kss-node)<br>[SC5 Style Guide Generator](https://styleguide.sc5.io/)|
|Linter||[Stylelint](https://github.com/stylelint/stylelint)<br>[CSSLint](https://github.com/CSSLint/csslint)(古い)|
|コードフォーマッター||[Prettier](https://prettier.io/docs/en/)<br>[CSScomb](https://github.com/csscomb/csscomb.js)|
|CSSリセット|ベースにNormalize.cssを使用し、部分的に手動でリセットする<br>参考記事：<br>[最近のWebページ用にCSSリセットの効果的な使い方、Normalize CSSとReset CSSそれぞれの利点を取り入れる ｜ コリス](https://coliss.com/articles/build-websites/operation/css/normalize-css-or-css-reset.html)|[Normalize.css](https://github.com/necolas/normalize.css/)<br>[Eric Meyer’s CSS Reset](https://meyerweb.com/eric/tools/css/reset/)<br>[Reboot.css](https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-reboot.css)<br>[sanitize.css](https://csstools.github.io/sanitize.css/)|
|値の単位|emとremを使用し、pxは使用しない。また、0には単位をつけない。<br>NG：`margin: 0px`<br>OK：`margin: 0`|
|ベンダープレフィックス|手動では付与せず、[autoprefixer](https://github.com/postcss/autoprefixer)を使用する|
|IDセレクタ|詳細度が上がるため使用しない|
|!important|原則禁止とするが、`mb-10` などのユーティリティクラスにおいては許可する|
|ネスト|極力浅くする。3回までは許容する<br>NG：`.foo .bar .baz .qux { ... }`<br>OK：`.foo .bar .baz { ... }`|
|メディアクエリ|モバイルファーストとし、min-widthのみを利用する<br>NG：`@media (max-width: 768px) { モバイル用にスタイルを打ち消しor定義 }` <br>OK：`@media (min-width: 769px) { デスクトップ用にスタイルを打ち消しor定義 }`|

## HTML

||例|候補|
|---|---|---|
|パス||相対パス<br>絶対パス<br>ルート相対パス|
|JSのフック|出来るだけIDを用い、`js-` プレフィックスを含める。また、ケバブケース(ab-cd)で命名する<br>NG：`<p class="modalWindow">...` <br>OK：`<p id="js-modal-window">...`|
|空要素の閉じスラッシュ|閉じない<br>NG：`<br />` <br>OK：`<br>`|