2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【今日から携わる】コーディングチェックリスト。見た目と文章構造だけでなく、コードインデントや使うツールも共有しよう。WEBディレクターにおすすめです!

Last updated at Posted at 2018-11-18

多人数でマークアップを行う案件の場合、htmlのチェックの方法が大事になってきます。
書面や口頭では個人差が出るため、ルール化いたしました。

# 「コーディングWaveチェックガイドライン」

・Wave.1 コーディング時のチェック(各コーダー)
・Wave.2 バリデーション文法チェック(各コーダー、またはメインコーダー)
・Wave.3 ブラウザ・実機検証(ディレクター&コーダー)

Wave.1 コーディング時のチェック(各コーダー)

【チェック】 インデントを揃える(スペース×4)

vscodeの機能でインデントを揃える

VisualStudioCodeに自動整形機能があった
https://qiita.com/maron8676/items/017cd830ab0c5fb8bcac

【チェック】 HTMLのタグの記述ミス

タグの閉じ忘れや、入れ子の間違いが無いかチェックする

HTMLエラーチェッカー

【チェック】 正しいアウトラインがとれているか見出しの文法チェックを行う

見出しタグを使用すると自動で生成される文章の階層構造のアウトラインが正しいかチェックする

HTML5 Outliner

Wave.2 バリデーション文法チェック(メインコーダー)

gitのmasterにmergeする前に、バリデーションの文法チェックを行う。

・画像のaltが入っているか
・使用禁止文字を使ってないか

【チェック】 gulpでバリデーションチェックする

JavaScript、HTML、CSSを簡単にLintできる開発環境を作った
https://qiita.com/muraken720/items/468b9f420ab4c900e241

【gulp】「gulp-htmlhint」でHTMLの文法をチェックする方法をメモメモ
http://bashalog.c-brains.jp/15/10/08-121056.php

[GitHub 奮闘記] gulp で eslint 設定とコード チェック環境の共有
https://qiita.com/ynunokawa/items/5471ff84c83104450ecb

Wave.3 ブラウザ・実機検証(ディレクター&コーダー)

【チェック】 実際に確認する

IE11
IE Edge(最新バージョン)
FireFox(最新バージョン)
Google Chrome(最新バージョン)
Mac Safari(最新バージョン)
iPhone(Safari最新バージョン)
iPad(Safari最新バージョン)
Android(Chrome最新バージョン)

関連

HTML5のアウトラインを極めるための6つのルール
タイトルや見出しの確認など、SEOに便利なブックマークレット
DOEの強み > 凄まじい納品チェック

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?