HTMLとCSSを使用したWebサイト制作を行う際、事前に策定する事項をまとめました。
1. 対象ブラウザを決める
動作を保証するブラウザを取り決める。
基本的にはシェア率を元に考えていく。
ブラウザの国内シェア率：
Browser Market Share Japan | StatCounter Global Stats
例
下記ブラウザの各最新版に対応する。
- Google Chrome
- Safari
- Firefox
- Microsoft Edge
IE10以前について
サポートが切れているため対応しない。
IE11について
基本的には対応しないが、ターゲットユーザーによっては配慮が必要になる。
参考記事：
IEでWebサイトが崩れる？大手サイトも切り離したIEとどう付き合うか | Digital Solution Media
2. 対象OSを決める
動作を保証するOSを取り決める。
基本的にはシェア率を元に考えていく。
Windowsのバージョン国内シェア率：
Desktop Windows Version Market Share Japan | StatCounter Global Stats
macOSのバージョン国内シェア率：
Desktop macOS Version Market Share Japan | StatCounter Global Stats
iOSのバージョン国内シェア率：
Mobile & Tablet iOS Version Market Share Japan | StatCounter Global Stats
Androidのバージョン国内シェア率：
Mobile & Tablet Android Version Market Share Japan | StatCounter Global Stats
例
- Windows：10.x 以降に対応
- macOS：10.13 以降に対応
- iOS：12.x 以降に対応
- Android：6.x 以降に対応
3. レスポンシブ対応について
ブレイクポイントを検討する
スタイル切り替えの基準点となるブレイクポイントを取り決める。
基本的にはシェア率を元に考えていく。
デバイス幅の国内シェア率：
Screen Resolution Stats Japan | StatCounter Global Stats
「デスクトップ vs モバイル vs タブレット」の国内シェア率：
Desktop vs Mobile vs Tablet Market Share Japan | StatCounter Global Stats
参考記事：
- 【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ
- レスポンシブWebデザインのブレークポイントの決め方｜コンテンツ・デバイスベースの利点・欠点まとめ | Ozlink LAB | マーケティングエージェンシー 株式会社Oz link（オズ・リンク）
- レスポンシブサイト用ブレイクポイント考察！時代に適するサイズとは？│CSS│SYMMETRIC Web開発ブログ
メディアクエリの記述方法
CSSで記述
.foo { display: none; }
@media (min-width: 769px) {
.foo { display: block; }
}
SCSSで記述 & メディアクエリ用Mixinの sass-mq を使用
$mq-breakpoints: (
desktop: 769px
);
@import 'mq';
.foo {
display: none;
@include mq(desktop) {
display: block;
}
}
上記のようにセレクタベースでメディアクエリを記述した場合、生成されるCSS内で同じサイズのメディアクエリが散らばってしまうため、CSS MQPacker などのツールを利用してまとめる必要がある。
From:
@media (min-width: 769px) {
.foo { display: block; }
}
@media (min-width: 769px) {
.bar { display: block; }
}
@media (min-width: 769px) {
.baz { display: block; }
}
To:
@media (min-width: 769px) {
.foo { display: block; }
.bar { display: block; }
.baz { display: block; }
}
4. その他策定事項
全体
| 例 | 候補 | |
|---|---|---|
| パッケージマネージャー | Yarn、npm | |
| タスクランナー | Gulp、npm scripts | |
| コードの命名規則 | BEMの命名規則を利用する | ケバブケース(ab-cd) スネークケース(ab_cd) キャメルケース(abCd) パスカルケース(AbCd) |
| ファイルの命名規則 | 小文字のアルファベット、数字、ハイフンで構成する | |
| インデント | 半角スペース2つ | |
| Retina対応 | モバイルデバイスのみ対応する | |
| アクセシビリティ方針 | WCAG 2.0のレベルAに準拠する 参考情報： アクセシビリティ指針 ｜ ソフトバンク ウェブアクセシビリティ方針 - 企業情報 - ヤフー株式会社 Web Content Accessibility Guidelines - Wikipedia WCAG 2.0 達成方法集 |
CSS
| 例 | 候補 | |
|---|---|---|
| メタ言語 |
Sass(SCSS) LESS Stylus |
|
| CSS設計 | OOCSSとSMACSSを組み合わせて使用する |
BEM OOCSS SMACSS FLOCSS |
| スタイルガイドジェネレーター |
Fractal kss-node SC5 Style Guide Generator |
|
| Linter |
Stylelint CSSLint(古い) |
|
| コードフォーマッター |
Prettier CSScomb |
|
| CSSリセット | ベースにNormalize.cssを使用し、部分的に手動でリセットする 参考記事： 最近のWebページ用にCSSリセットの効果的な使い方、Normalize CSSとReset CSSそれぞれの利点を取り入れる ｜ コリス |
Normalize.css Eric Meyer’s CSS Reset Reboot.css sanitize.css |
| 値の単位 | emとremを使用し、pxは使用しない。また、0には単位をつけない。 NG： margin: 0pxOK： margin: 0
|
|
| ベンダープレフィックス | 手動では付与せず、autoprefixerを使用する | |
| IDセレクタ | 詳細度が上がるため使用しない | |
| !important | 原則禁止とするが、mb-10 などのユーティリティクラスにおいては許可する |
|
| ネスト | 極力浅くする。3回までは許容する NG： .foo .bar .baz .qux { ... }OK： .foo .bar .baz { ... }
|
|
| メディアクエリ | モバイルファーストとし、min-widthのみを利用する NG： @media (max-width: 768px) { モバイル用にスタイルを打ち消しor定義 } OK： @media (min-width: 769px) { デスクトップ用にスタイルを打ち消しor定義 }
|
HTML
| 例 | 候補 | |
|---|---|---|
| パス | 相対パス 絶対パス ルート相対パス |
|
| JSのフック | 出来るだけIDを用い、js- プレフィックスを含める。また、ケバブケース(ab-cd)で命名するNG： <p class="modalWindow">... OK： <p id="js-modal-window">...
|
|
| 空要素の閉じスラッシュ | 閉じない NG： <br /> OK： <br>
|