- iOS safari
- Android
- Edge (windows10)
- IE11
- chrome
- Firefox
- safari
スペース2個
UTF-8
- SP→デフォルト2倍サイズで書き出し
- PC→そのままで書き出し
- html : 各閉じタグの終わりに挿入する
- CSS : 上部などに必要に応じて挿入する
[種別]-[名前]_[連番].[拡張子]
例 : btn-submit_01.svg
BEM(MindBEMding)なども利用可能。以下の方法は一例
[ページ名/モジュール名]-[名前]_[連番]
[ページ名/モジュール名]-[名前]_[状態]
例 : header-gnav_01
例 : header-btn_primary
例外 : 現在位置表示の.currentなどは単一で使って良い
画像ディレクトリ : img
CSSディレクトリ : css
JSディレクトリ : js
ページごとのディレクトリは [ページ名] のディレクトリとし、index.html を入れる
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ページのタイトル</title>
<meta name="description" content="ページの内容を説明する文章">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="CSSファイルのパス">
<script src="JavaScriptファイルのパス"></script>
</head>
モバイルファーストとして記述する。
SP表示のスタイルをまず記述し、PC表示をメディアクエリで記述する
CSSのセレクタ名はclassのみ使用
※idセレクタを使う場合はJS用、ページ内リンク用のみ許可
子孫セレクタ：可能
例 ： header .header-gnav a
benderprefixは、ブラウザの主要バージョンで不要になっているのなら入れない
img {
max-width: 100%;
}
「セレクタ名」「半角スペース」「ブレース」
「インデント」「プロパティ」「コロン」「半角スペース」「値」「セミコロン」
「ブレース」
とする
最終行のプロパティの値のうしろにもセミコロンを付与する
SCSSで圧縮する場合はこの限りではない
各章ごとに別のリセット系CSSを採用可能
以下のブレークポイントから１〜2つほど利用する
- 'sm-min': 'screen and (min-width: 576px)',
- 'sm-max': 'screen and (max-width: 575px)',
- 'md-min': 'screen and (min-width: 768px)',
- 'md-max': 'screen and (max-width: 767px)',
- 'lg-min': 'screen and (min-width: 992px)',
- 'lg-max': 'screen and (max-width: 991px)',
- 'xl-min': 'screen and (min-width: 1131px)',
- 'xl-max': 'screen and (max-width: 1130px)',
Bootstrapのver4を参考にしています。
SCSSを採用する章では、各スタイルの同じネスト内に記述
SASS構文ではなくSCSSで記述する
jQueryを利用可能