自分の参照用に
全共通事項
- リンクを読み込むときはできるだけ’https’を利用する(httpsの省略もだめ)
- インデントはスペース2つにする Tabキー使わない
- 全てのコードは小文字で書く。大文字NG (cssの色指定特に注意)
- htmlのテキスト(pタグ内に書くやつとか)の行末に余分な空白く付けない
- TODOコメントつけるとき,
- ‘TODO’キーワードだけを使う。#TODOとか@TODOとか他の記号付けない
HTMLを書くときの注意点
- <!DOCTYPE html>つけること
- void要素は/で閉じない <br />とか
- 目的に応じたhtmlタグを使用する ex)見出しにはh要素、アンカーにはa要素
W3C HTML validatorなどのツールを使用してテストする - メデイアについて必ず他のアクセスを提供する。視覚障害のあるユーザーにも分かりやすくするために(imgタグにはalt属性も書いとくなど)
- html、css, scripファイルは別のファイルに書くこと。htmlからcssやscriptへのリンクはなるべく減らせるよう1つにまとめること。 (htmlファイルの修正コストの方が大きいため)
- utf-8において特殊文字の実体参照はなるべく少なくする。HTMLで特別な意味を持つ”<“や “>や “&”には使用する
特殊文字変換サイトhttps://tech-unlimited.com/escape.html - https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission
- stylesheetとscriptを読み込むとき、linkタグのtype属性は省略する
- class=””とかには、必ずダブルクォーテーションを使う
- (任意)あまりにも長いコードは改行する
ex)一つのpタグにclassがたくさんついていたり他属性もついていて長いとき - (任意)タグを省略する 省略できるタグの種類
CSS を書くときの注意点
- 全体に共通すること
- 適切なcssを書く。W3C CSS validatorなどのツールを使用してテストする
- コメントはブロックコメント(/* */)でなくラインコメント(//)を使う
- セレクタを指定するとき、
- タイプセレクタはできるだけ使わない。ex) ul#idname やdiv.errなど
- class, id名の単語と単語の間は必ずハイフン(-)で区切る
※2つの単語を区切らずに繋げてはいけない。(キャメルケース、スネークケースNG) - id属性は使わない
- プロパティを指定するとき、
- アルファベット順に書く(prefixは例外)
- セレクタ、コロンの後ろにスペースを一つ入れる
//NG
.class{
color:#ccc;
}
//OK
.class {
color: #ccc;
}
- 複数のセレクタを指定するとき、改行する
h1, h2{
...
}
//OK
h1,
h2 {
...
}
- ルールとルールの間は1行開ける
a {
...
}
.btn {
...
}
- 属性セレクタやプロパティ値の引用符にはシングルウクォーテーション(’)を使う。URIにはクォーテーションを付けない。
/* Not recommended */
@import url("https://www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
/* Recommended */
@import url(https://www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}
- ショートハンドプロパティを使う 参照ショートカット
- 0の後に単位は不要 NG) 0px
- 小数点の初めの数字は省略する ex) .8s
- 色指定 できれば3文字に省略する ex) #eebbcc → #ebc
- borderがないスタイルにはnoneでなく0を使う ex) border: 0;
SCSSの注意点
- 変数の名前にはダッシュ(-)を使用する(キャメルケースやスネークケースNG)
例外として、接頭辞として同じファイル内でのみ使われる変数はOK ex)$_my-variable - プロパティを書く順番
- 通常のプロパティ
- @include
- ネスト(ネストされたスタイルを宣言する前に1行空ける)
- @extendはあまり使わない。特にネストしてるときは注意。後々セレクタの順番を変更してしまい問題になるリスクあり。
- ネストは2階層までに収める
- 決してIDセレクタはネストさせてはいけない!絶対に