素人エンジニアの投稿です。
概要
- 気をつけてないと意外とやらない。
- おざなりになりやすいからこそ、他の人との差になる。
- 習慣づければ簡単にできる。
- 自動フォーマットで出来ることはごく一部。
基本
- 属性値は""で囲う。
-
width=100→width="100" - 要素名、属性名は小文字で書く。
-
<P CLASS="SAMPLE">→<p class="sample"> - 終了タグを省略できる要素も、省略せずに記述する。
- Hamlなどを使う場合は、インデントで階層構造を作る仕様のため閉じタグは不要。
HTML
<!-- bad -->
<ul>
<li>テキスト
<li>テキスト
</ul>
<!-- good -->
<ul>
<li>テキスト</li>
<li>テキスト</li>
</ul>
- 空要素につける「/」は不要。
- XHTMLでは文法上必須だったが、どちらでもいいことになった。
- つけるかつけないか、どちらかに揃えるべき。
HTML
<!-- この記述でも問題はない -->
<meta />
<link />
<img />
<input />
<br/>
<br />
<!-- しかし、HTML5では不要 -->
<meta>
<link>
<img>
<input>
<br>
マークアップ
- h1などの見出し要素を適切に使う。
-
strongの多用を避ける。見た目を単に太字にしたいだけならCSSで設定すれば良い。 - 見出しがマークアップできる箇所は
<section>や<article>で囲う。 - 基本的に
<br>を使わない。強制改行の必要がないマークアップにすれば良いため。 - 項目の列挙や箇条書き、一覧のようなコンテンツには
<ul>,<ol>を使う。 - 項目の順序に意味があるものはolを使う（手順など）
- 並べ替えても読み物として成り立つものにはulを使う（買い物リストなど）
- 項目名 - 説明 の関係が連続で並ぶ箇所には
<dl>,<dt>,<dd>を使う。 - 面倒だと思っても、body内にあるすべての要素にクラスを命名する。
- ある要素をピンポイントで指定できることは後々にかけて便利である。
- JSの要素取得用のクラスとCSS用のクラスを分ける。
- JSの要素取得用クラスにはCSS設定を何も設定しない。
画像表示
<img src="image.png" width="100" height="30" alt="Qiita">
- altを入れる。
- width, heightを設定する。その際、
width="100"のようにpxを記述しない。 - 画像ロード前に表示領域を確保できるため、レンダリング時に起こる画面のズレが低減する。
CSS
- 原則としてクラスセレクタを使用する。
- idセレクタを使わない。絶対に使わない。
- 要素セレクタ（タグセレクタ）を使わない。
- クラスセレクタの単独指定を基本とする。
-
ul > li > aのような指定をしない。 - ネストした指定は状態の上書きなど、必要最低限のケースにする。
- できるだけ複雑な指定を使わない。
- 偶数番目・奇数番目を指定する程度。
- クラスの使い回しを避け、違うモジュールに同じ設定がある場合は、カンマ区切りで並列に書く。
.module-sample,
.module-test {
color: #FFFFFF;
background-color: #CCCCCC;
}
-
!importantを使わない。 - クラス単独で指定する限り、CSS設定の上書きは容易にできる。
- 要素を部分的に切り出しても、デザイン設定が適切に当たるような指定にする。
- 移植が簡単になる。
- 隣接セレクタ、間接セレクタを活用する。
- リスト要素の間に罫線を引く、要素間の余白を設定する、など
<ul class="list">
<li class="item"></li>
<li class="item"></li>
</ul>
<dl class="sample-list">
<dt class="sample-head"></dt>
<dd class="sample-desc"></dd>
<dt class="sample-head"></dt>
<dd class="sample-desc"></dd>
</dl>
.item + .item {
border: solid 1px #CCCCCC;
}
.sample-head ~ .sample-head {
margin-top: 10px;
}