このリストは、フロントエンド開発者の長年の経験に基づいており、アドオンは公開ソースから収集されています。
内容
- 頭
- HTML
- フォント
- CSS
- 画像
- Javascript
- 安全性
- 性能
- 在庫状況
- SEO
使い方
ほとんどのプロジェクトでは、チェックリストのすべての項目が必須ですが、一部の項目は省略できます。 たとえば、管理Webアプリの場合、RSSは役に立ちません。
頭
HTMLドキュメントのHeadセクションの要素のリストはGitHubにあります 。
メタタグ
- Doctype ：HTMLファイルのバージョンを示し、 ページの一番最初にあります。 Doctypeは、HTMLの5番目のバージョンを指定する必要があります。
<!-- Doctype HTML5 --> <!doctype html>
HTML5 W3Cページエンコーディング定義 。
次の3つのメタタグ（Charset、X-UA Compatible、およびViewport）は、doctypeの直後にページの上部に配置する必要があります。
- 文字セット ：ドキュメントのエンコード-UTF-8。
<!-- --> <meta charset="utf-8">
- X-UA-Compatible ：Internet Explorerでのページの表示を制御するため、設定する必要があります。
<!-- Internet Explorer --> <meta http-equiv="x-ua-compatible" content="ie=edge"> <a href="https://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx">
Internet Explorerのページ表示の定義 。
- ビューポート ： ビューポートメタタグが正しく設定されています。
<!-- Viewport --> <meta name="viewport" content="width=device-width, initial-s cale=1">
- タイトル ： タイトルタグはすべてのページで使用されます。 Googleはタイトルの長さを計算し、472ピクセルを超えるものを切り捨てます。 タイトルの最適な長さは約55文字です。
<!-- Title --> <title> 65 </title>
HTMLドキュメントのTitleタグはMDNです。
SERP Snippet Generator-Googleが検索結果ページに表示するサイトの説明を作成します（英語テキスト用） 。
- 説明 ：タグ内のサイトの説明は一意であり、150文字を超えません。
<!-- Description --> <meta name="description" content=" 150 ">
HTMLドキュメントのDescriptionタグはMDNです。
- ファビコン：各ファビコンが正しく表示されます。 favicon.icoファイルが1つしかない場合は、サイトのルートディレクトリに配置する必要があります。 この場合、HTMLドキュメントでの参照はオプションです。 ただし、次の例のように、ファビコンへのリンクの方が適切です。 最適な画像フォーマット。 .icoではなくpngです。 解像度-32×32 px。
<!-- --> <link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico"> <!-- --> <link rel="icon" type="image/png" href="https://example.com/favicon.png">
ファビコンジェネレーター-ファビコンを作成します。
RealFaviconGenerator 。
GitHubのお気に入りガイド 。
ファビコン、タッチアイコン、タイルアイコンなど どちらが必要ですか？ -CSSのトリック 。
PNG favicons-カニウス 。
- Appleタッチアイコン ：Appleタッチアイコンは、iOSデバイスで表示するためにインストールされます。 （アイコンがすべてのデバイスで適切に表示されるように、ファイルの解像度は200x200ピクセルにする必要があります）。
<!-- Apple Touch Icon --> <link rel="apple-touch-icon" href="/custom-icon.png">
Webアプリケーションの構成 。
- Windows Tilesは次のようにリストされます。
<!-- Microsoft Tiles -->Browser configuration schema reference <meta name="msapplication-config" content="browserconfig.xml" />
- browserconfig.xmlファイルのxmlマークアップは、例のようになります。
<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="small.png"/> <square150x150logo src="medium.png"/> <wide310x150logo src="wide.png"/> <square310x310logo src="large.png"/> </tile> </msapplication> </browserconfig>
ブラウザー構成スキーマのリファレンス 。
- Canonical属性 ：rel = "canonical"を使用して、コンテンツの重複を避けます。
<!-- --> <link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">
正規のURLを使用する-Search Consoleヘルプ-Googleサポート 。
rel = canonicalの5つのよくある間違い-Googleウェブマスターブログ
HTMLタグ
- lang ： 属性は、現在のHTMLページの言語を示す必要があります。
<html lang="ru">
- 方向 ：テキストの方向は特別なHTMLタグで指定されます。
<html dir="rtl">
dir-HTML-MDN
- 異なる言語のページへのリダイレクト ：rel属性の値はalternateに設定されています。
<link rel="alternate" href="https://es.example.com/" hreflang="es">
- Internet Explorerの条件付きコメント ：必要に応じて設定します。
<!–[if IE]> Internet Explorer <![endif]–>
条件付きコメントについて（Internet Explorer）-MSDN-Microsoft
- RSS ：記事を含むブログやWebサイトを立ち上げる準備をしている場合は、RSSへのリンクを設定することを忘れないでください。
- インラインクリティカルCSS ：クリティカルCSS 定義 -これらは、ページが開いたときにすぐにロードされるスタイルです。 通常、Styleタグを使用してメインCSSファイルに接続します。
GithubのAddy OsmaniによるCritical-重要なCSSの作成を自動化します。
- 正しいCSS呼び出し ：すべてのCSSファイルは、HeadセクションのJavaScriptの前に含める必要があります。 例外はJSファイルです。JSファイルは非同期にロードされ、ページの最上部にあります。
ソーシャルメディアメタタグ
Facebookおよび Twitterの 基本的なメタタグ を 任意のサイトに追加することをお勧めします 。 必要に応じて、他のタグを追加できます 。
- Facebook Open Graph ：Facebook Open Graph（OG）タグが検証、構成され、正しい情報が表示されます。 画像サイズは少なくとも600 x 315 px、できれば1200 x 630 pxである必要があります。
<meta property="og:type" content="website"> <meta property="og:url" content="https://example.com/page.html"> <meta property="og:title" content="Content Title"> <meta property="og:image" content="https://example.com/image.jpg"> <meta property="og:description" content="Description Here"> <meta property="og:site_name" content="Site Name"> <meta property="og:locale" content="en_US">
ウェブマスター向け共有ガイド 。
Facebook OG検証ツールを使用してページを確認します 。
- Twitter Card ：以下の例のように構成する必要があります。
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@site_account"> <meta name="twitter:creator" content="@individual_account"> <meta name="twitter:url" content="https://example.com/page.html"> <meta name="twitter:title" content="Content Title"> <meta name="twitter:description" content=" 200 "> <meta name="twitter:image" content="https://example.com/image.jpg">
カード入門-Twitter開発者 。
Twitterカード検証ツールを使用してサイトを確認します 。
HTML
- HTML5セマンティック要素 ： HTML5要素は適切に使用されます（ヘッダー、セクション、フッター、メイン...）。
HTMLリファレンスは、便利なHTMLガイドです。
- エラーページ ：404および500エラーのページが作成されました。 500エラーのページにはCSSスタイルを含める必要があります（サーバーへの外部呼び出しなし）。
- Noopener ： target = "_ blank"を使用して新しいタブで外部リンクを開く必要がある場合、属性rel = "noopener"を追加します。 これにより、別のサイトのページがフィッシングに使用されている場合、ユーザーデータの盗難を防ぎます。 Firefoxの古いバージョンでは、 rel = "noopener noreferrer"属性を設定します 。
rel = noopenerについて 。
- コメント ：ページを公開する前に、コメントと不要なコードをすべて削除してください。
HTMLレイアウトのテスト
- W3Cバリデーター ：サイトのすべてのページは、W3C Webサイトのバリデーターによってテストされる必要があります。 HTMLコードで検出されないエラーを見つけるのに役立ちます。
W3Cバリデーター 。
- HTMLコードの設計 ： コードの欠陥を修正し、サイズを縮小するには、特別なサービスを使用します。
汚れたマークアップ 。
- ページ上のリンクを確認します 。すべてのリンクが機能しており、ナビゲートするときに404エラーを表示しません。
W3Cリンクチェッカー 。
フォント
- 接続されたフォント形式：WOFF、WOFF2、TTF形式は、すべての最新ブラウザーでサポートされています。
WOFF-Web Open Font Format-Caniuse 。
WOFF 2.0-Web Open Font Format-Caniuse 。
TTF / OTF-TrueTypeおよびOpenTypeフォントのサポート 。
@ font-faceの使用-CSS-Tricks
- フォントの太さ ：2 Mbを超えない。
CSS
CSSチュートリアルとSassガイドをチェックして ください 。多くの主要なフロントエンド開発者は、これらのガイドで説明されているルールに従います。 CSSについてさらに質問がある場合は、 CSSリファレンスで回答を見つけることができます。
- レスポンシブデザイン ：サイトのレイアウトは適応的です。
- CSS印刷 ：印刷ページは各ページに正しく構成されています。
- プリプロセッサ ：ページはCSSプリプロセッサを使用します（ Sassが推奨されます）。
- 一意のID ：ページ上のIDは繰り返されません。
- CSSのリセット ：このページには、デフォルトのブラウザースタイルをリセットするための最新のCSSファイルが含まれています（リセット、正規化、または再起動）。 BootstrapやFoundationなどの多くのCSSフレームワークには、 Normalize.cssファイルが含まれています。
Reset.css
Normalize.css
再起動
- JSプレフィックス ： JSで使用されるすべてのクラスまたはIDはjsで始まり、CSSを介したスタイル設定には使用されません。
<div id="js-slider" class="my-slider"> <!-- Or --> <div id="id-used-by-cms" class="js-slider my-slider">
- HTMLドキュメント内のスタイルタグ：HTMLページ内のスタイルにスタイルタグを使用しないでください。 場合によっては、たとえばスライダーの背景を設定するために使用することが正当化されます。
- ベンダープレフィックス ：CSSベンダープレフィックスは、古いブラウザーとの互換性の問題を解決します。
-webkit-ChromeおよびSafari、
-o-オペラ。
-ms-Internet Explorer;
-moz-Mozilla。
Autoprefixer CSSオンライン 。
性能
- CSSファイルの結合 ：すべてのCSSファイルは1つのファイルに結合されます。 （ HTTP / 2には適していません ）。
- 最適化 ：すべてのCSSファイルが圧縮されます。
- サイトの表示をブロックするCSS ：CSSファイルがコンテンツの表示をブロックしないようにして、ページの読み込み時間を増やします。
フィラメントグループによるloadCSS 。
loadCSSを使用したCSSのプリロードの例 。
- 未使用のCSS ：余分なコードはすべて削除されました。
UnCSSオンライン 。
PurifyCSS
Chrome DevToolsのカバレッジ 。
CSSテスト
- Stylelint ：すべてのCSSおよびSCSSファイルがエラーなしで。
CSS linterであるstylelint 。
Sassガイドライン 。
- レスポンシブデザイン ：サイトページのアクセス許可がテストされます：320 px、768 px、1024 px（サイトの目的に応じて他の解像度で確認することもできます）。
- CSS Validator ：CSSファイル内のすべてのエラーを見つけて修正しました。
CSSバリデーター
- ブラウザー ：サイトページは一般的なブラウザー（Safari、Firefox、Chrome、Internet Explorer）でテストされています。
- モバイルブラウザ ：サイトはモバイルブラウザ（Chrome、Safariなど）でテストされています。
- OS ：このサイトは一般的なオペレーティングシステム（Windows、Android、iOS、MacOS）でテストされています
- 完璧なピクセル ：ページは可能な限り正確にレイアウトされます。 もちろん、100％ではありませんが、テンプレートに固執する必要があります。
Pixel Perfect-Chrome拡張機能 。
- 読み方向 ：プロジェクトが左から右に読む言語（左から右-LTR）だけでなく、右から左に読む言語（右から左-RTL）もサポートする必要がある場合、サポートするかどうかを確認する必要があります。彼らのサイト。
RTL対応のWebアプリとWebサイトの構築：パート1-Mozilla Hacks
RTL対応のWebアプリとWebサイトの構築：パート2-Mozilla Hacks
画像
画像の最適化を理解するには、Eddie Ozmani（Addy Osmani）による書籍Essential Image Optimization （英語）を参照してください。
- 最適化 ：すべての画像は、ブラウザーでの表示用に最適化されます。 WebP形式は、メインページなどの重要なページで使用できます。
Imagemin
ImageOptimで画像を無料で最適化できます 。
- Picture / Srcset ： picture / srcset属性は、特定の画面解像度（サイズ）で最適な画像を表示するために使用されます。
srcsetを使用してレスポンシブイメージを構築する方法 。
- Retina ： Retinaディスプレイで適切に表示するには、すべての画像の解像度が2倍または3倍でなければなりません。
- スプライトファイル ：サイト上の小さな画像が1つのスプライトファイルに結合されます。 これは、小さな写真で構成される大きな画像です。 これらがアイコンの場合、それらを組み合わせてSVG形式のスプライトイメージにすることができます。
- 幅と高さ ：必要な画像サイズが事前にわかっている場合は、img属性で幅と高さを指定する必要があります。
- 画像の説明 ：すべてのimg画像は、alt属性の単語で説明する必要があります。
<img alt=' '>
代替テキスト：究極のガイド 。
- 画像の読み込みの遅延 ：サイトは、画像がすぐに読み込まれるのではなく、サイトがスクロールするように設定されます。
Javascript
- 別個のファイルのJavaScriptコード ：HTML文書に埋め込みJSコードがあってはなりません。 コードへのファイルへのリンクを提供することをお勧めします。
- マージ ：JavaScriptファイルは1つにマージされます。
- 最適化 ：すべてのJavaScriptファイルが最小化されます（名前にサフィックス.minを追加できます）。
リソースの縮小（HTML、CSS、およびJavaScript） 。
- JavaScriptセキュリティ ：
JavaScriptを使用した安全なアプリケーションを開発するためのガイドライン 。
- Asyncまたはdefer ：JavaScriptファイルは、async属性を使用して非同期でロードされるか、defer属性を使用します。defer属性は、ページが完全にロードされた後にのみスクリプトを実行します。
Render-Blocking JavaScriptを削除します 。
- Modernizr ：特定の機能をサイトに追加する必要がある場合は、Modernizr JSライブラリを使用できます。 ユーザーのブラウザがサポートするHTML、CSS、JS機能を決定します。
Modernizr 。
JavaScriptテスト
- ESLint ：ESLintでJavaSriptコードがチェックされ、バグが修正されました。
ESLint-JavaScriptおよびJSX用のプラグ可能なリンティングユーティリティ 。
安全性
サイトを確認する
securityheaders.io -HTTPセキュリティヘッダーをチェックします。
Mozillaによる天文台 -セキュリティの弱点を示します。
ASafaWeb-ASP.NET Webサイト用の自動セキュリティアナライザー 。
- HTTPS ：HTTPSは、すべてのページだけでなく、外部要素（プラグイン、画像）でも使用されます。
暗号化-無料のSSL / TLS証明書
無料のSSLサーバーテスト 。
厳格なトランスポートセキュリティ 。
- HTTP Strict Transport Security（HSTS） ：HTTPSを介した接続を強制するようにHSTSを構成しました。
HSTSプリロードのステータスと適格性を確認します。
HTTP厳格なトランスポートセキュリティチートシート-OWASP 。
トランスポートレイヤー保護チートシート-OWASP 。
- クロスサイトリクエストフォージェリ（CSRF） ： CSRFを防ぐには、サイトまたはアプリケーションからサーバーリクエストが送信されていることを確認する必要があります。
クロスサイトリクエストフォージェリ（CSRF）防止チートシート-OWASP
- クロスサイトスクリプティング（XSS） ：ページまたはサイトにXSSリクエストがないようにする必要があります。
XSS（クロスサイトスクリプティング）防止チートシート-OWASP
DOMベースのXSS防止チートシート-OWASP 。
- コンテンツタイプオプション ：Google ChromeおよびInternet Explorerでは、MIMEスニッフィング攻撃の試行と、サーバーで宣言されたさまざまなタイプのMIMEタイプの置換を防ぎます。
X-Content-Type-Options-Scott Helme 。
- X-Frame-Options（XFO） ：ウェブサイトの訪問者はクリックジャッキングから保護されています。
Xフレームオプション-Scott Helme 。
RFC7034-HTTPヘッダーフィールドX-Frame-Options
性能
- ページの重量 ：各ページの重量は最大500 Kbです。
ウェブサイトページ分析 。
サイズ制限：Webを軽くします。
- 最適化 ：HTMLコードを最小化しました。
W3Cバリデーター 。
- 遅延読み込み ：サイトのレビュー時間を短縮するために、ページがスクロールされるときに画像、スクリプト、CSSスタイルが読み込まれます。
- Cookiesサイズ ： Cookiesを使用する場合、各ファイルのサイズが4096バイト以下であり、ファイルの総数が20を超えないことを確認します。
Cookie仕様：RFC 6265
クッキー
ブラウザのCookieの制限 。
- サードパーティのコンポーネント ：サードパーティのiframeと外部JSスクリプト（共有ボタンなど）は、可能な場合は静的要素に置き換えられます。 これにより、外部APIの呼び出し回数が制限され、サードパーティのサービスからサイト上のユーザーのアクションが秘密になります。
シンプルな共有ボタンジェネレーター 。
お問い合わせ
以下のテクニックの説明 。
- DNS-prefetch ：他のサイトのDNSロード時間は、 dns-prefetchで予測ページを使用することにより短縮されます。
<link rel="dns-prefetch" href="https://example.com">
- 事前接続 ：ダウンタイム中にpreconnectを使用して、DNSルックアップ、すぐに必要になるサービスとのTCPおよびTLS接続が事前に行われます。
<link rel="preconnect" href="https://example.com">
- プリフェッチ ：すぐに必要となるリソース（遅延読み込みを伴う画像など）は事前にブラウザーによってダウンロードされ、 prefetchを使用してキャッシュに入れられます。
<link rel="prefetch" href="image.png">
- プリロード ：現在のページに必要なリソース（たとえば、Bodyタグの最後のスクリプト）は、次を使用してダウンロードできます。
プリロード 。
<link rel="preload" href="app.js">
prefetchとpreloadの違い 。
性能試験
- Google PageSpeed ：サイトのすべてのページ（ホームページだけでなく）がGoogle PageSpeedでテストされ、100点のうち少なくとも90点を獲得しました。
Google PageSpeed 。
Googleでモバイル速度をテストします 。
WebPagetest-ウェブサイトのパフォーマンスと最適化のテスト 。
在庫状況
Rob DodsonのA11ycastsプレイリストをチェックしてください。
- プログレッシブエンハンスメント ：ナビゲーションや検索などのほとんどのサイト機能は、JavaScriptをオフにして動作するはずです。
Chrome開発者ツールでJavaScriptを有効/無効にします 。
- 色のコントラスト ：サイトの色のコントラストは、WCAG AA標準（モバイル-AAA）に準拠しています。
コントラスト比 。
見出し
- H1 ：すべてのページに、タイトルで指定されたサイト名とは異なるH1見出しがあります。
- 見出し ：見出しはH1からH6までの正しい順序で使用されます。
見出しとランドマークが非常に重要な理由-A11ycasts＃18 。
ランドマーク
- ロールバナー ： ロール=「バナー」属性がヘッダータグに指定されます。
- ロールナビゲーション ：Navの場合、 role = "navigation"属性。
- ロールmain ：Mainには、属性role = "main"が指定されています。
ARIAランドマークを使用してページの領域を識別します 。
意味論
- HTML5ではさまざまなタイプの入力が使用されました 。これは、モバイルデバイスにとって重要です。入力データのタイプが異なると、キーボードの外観が異なるためです。
モバイル入力タイプ 。
フォーム
- ラベル ：フォーム要素内の個々の入力に関連付けられます。 ラベルを表示できない場合は、aria-labelを使用します。
aria-label属性-MDNを使用します 。
可用性テスト
- アクセシビリティテストの標準 ：WAVEを使用してページをテストします。
ウェーブテスト 。
- キーボードナビゲーション ： キーボードのみを使用してサイトを確認します。 サイト上のすべての要素を使用できるようにする必要があります。
- スクリーンリーダー ：サイトのすべてのページは、情報を読み取るためのプログラム（VoiceOver、ChromeVox、NVDAまたはLynx）で動作する必要があります。
- フォーカス ：要素のフォーカスが無効になっている場合、CSSに表示される状態に置き換えられます。
フォーカスの管理-A11ycast＃22 。
SEO
- Google Analytics ：Google Analyticsがインストールされ、正常に機能しています。
- 見出し ： 見出しのテキストは、現在のページの情報を理解するのに役立ちます。
- sitemap.xml ：sitemap.xmlサイトマップが作成され、Google Search Console（Google Webmaster Tools）に送信されました。
- robots.txt ： robots.txtファイルはサイトページをブロックしません。
Google Robots Testing Toolで robots.txtを確認してください 。
- 構造化データ ：検索ボットがページ上の情報を理解するのに役立ちます。 したがって、ページをテストし、エラーがないようにする必要があります。
構造化データの紹介-検索-Google Developers 。
構造化データテストツールでサイトをチェックアウトします。
データを構造化するためのクラスの完全なリストは、 Schema.orgにあります。
- HTMLサイトマップ ：動作し、サイトのフッターで利用できます。
サイトマップのガイドライン-Googleサポート 。
サイトマップジェネレーター 。
編集者から
トピックに関するオンラインNetologyコース：
- コース「 HTMLレイアウト：最初から最初のレイアウトまで 」;
- コース「 アダプティブおよびモバイルレイアウト 」。
- 職業「 フロントエンド開発者 」。
- 職業「 ウェブ開発者 」。
- 初心者向けの無料のHTMLおよびCSSをゼロから作成するコース。