You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
備考: Webフォントを使用すると、スタイルが適用されていないテキストが表示される現象(FFlash Of Unstyled Text)や フォントがロードされるまで表示されない現象(Flash of Invisible Text)が発生する可能性があります。フォールバックフォントを使用するか、ウェブフォントローダーを使用して動作を制御することを検討してください。
Third party components: 外部の JS に依存するサードパーティの iframe やコンポーネントは(例えばソーシャル共有ボタン)、可能な限りスタティックなコンポーネントに置き換えられるべきである。これによって外部 API の呼び出しに制限を与えることができ、ユーザーのプライバシーを保護することができる。
<!-- Example: Pagination link tags for page 2 of a paginated list --><linkrel="prev" href="https://example.com/?page=1"><linkrel="next" href="https://example.com/?page=3">
Front-End Checklist
The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your site / HTML page to production.
フロントエンドチェックリストは、みなさんがウェブサイトや HTML ページを本番環境で公開する前に確認するべきあらゆる項目を網羅したリストです。
これは、フロントエンド開発者たちの数年に及ぶ経験にもとづいており、さらに他のオープンソースのチェックリストの内容も追加されています。
目次
利用方法
フロントエンドチェックリストのすべての項目は大半のプロジェクトで必要とされていますが、いくつかの項目は省略できますし、必須でもありません。(たとえば管理用のウェブアプリケーションの場合は、RSSは必要ないでしょう。)私たちは三段階で重要度を評価しています。
チェックリストのいくつかのリソースでは、絵文字を使ってコンテンツの種類を理解したり、ヘルプを見つけやすいようにしています。
Head
Meta タグ
次の3つの Meta タグ(Charset、X-UA、Viewport)は、
<head>
の先頭にあるべきです。favicon.ico
しかない場合、それはあなたのサイトのルートに設置されている。通常はマークアップは必要ない。しかしながら、以下の例のようにリンクをはることがまだ有効である。昨今では、PNG フォーマット が.ico
フォーマットよりも推奨されている。(サイズ: 32x32px)browserconfig.xml の必要最小限の構成は以下:
rel="canonical"
を使用している。HTML タグ
lang
属性が記述されている。dir
属性が<html>
タグに指定されている。(これは他の HTML タグ上でも使用可能である。)<style></style>
の間に記述されている。(圧縮されている)<head>
内でいかなる JavaScript よりも先に読み込まれている。 (JS ファイルが時々非同期にあなたのページのトップに読み込まれる場合を除く。)ソーシャル
Facebook OG と Twitter Cards は、すべてのウェブサイトに強く推奨します。 その他のソーシャルメディア用のタグは、特定の対象をターゲットとする際に、より確実に表示されるようになるでしょう。
⬆ トップに戻る
HTML
ベストプラクティス
target="_blank"
で外部リンクを使用する際には、rel="noopener"
属性をつけて Tabnabbing 脆弱性を防ぐこと。もしあなたが古いバージョンの Firefox をサポートする必要があるなら、rel="noopener noreferrer"
を使用すること。HTML のテスト
⬆ トップに戻る
ウェブフォント
⬆ トップに戻る
CSS
<style>
による内部 CSS やインラインスタイルを使用することを避け、正当な理由でのみ使用する。(例: スライダー用の背景画像や CSS クリティカルなど)パフォーマンス
CSS のテスト
⬆ トップに戻る
画像
ベストプラクティス
picture/srcset
によって現在のビューポートに最も適切なイメージを提供する。<img>
は、height
とwidth
が指定されている。(px
または%
を指定しない。)<img>
は Alt テキストが代替テキストとして指定されていること。⬆ トップに戻る
JavaScript
ベストプラクティス
.min.js
という拡張子を使用できる。)async
属性を使用して非同期で読み込まれるか、defer
属性を使用して遅延実行されている。<html>
の class を追加することができる。JavaScript テスティング
⬆ トップに戻る
セキュリティ
ウェブサイトをスキャンして確認する
ベストプラクティス
X-Content-Type-Options
ヘッダーによって、Google Chrome や Internet Explorer の mime-sniff による Content-Type に一致しない動作を防止する。⬆ トップに戻る
パフォーマンス
ベストプラクティス
HTTP リクエストの最適化
dns-prefetch
を使用して、アイドル時間中に名前解決を行う。preconnect
を使用してアイドル時間中に事前に行われている。prefetch
を使用してアイドル時間中にリクエストを行なっている。<body>
の最後に設置されているスクリプトなど)にはpreload
を使用している。パフォーマンステスト
⬆ トップに戻る
アクセシビリティ
ベストプラクティス
見出し
ランドマーク
<header>
にはrole="banner"
がある。<nav>
にはrole="navigation"
がある。<main>
にはrole="main"
がある。セマンティック
input
タイプが使用されている: これは、キーパッドやウィジェットが様々なタイプにカスタマイズされるモバイルデバイスでは特に重要である。フォーム
label
は、それぞれのフォーム要素に関連づけられている。もしlabel
を表示できない場合にはaria-label
を使用する。アクセシビリティテスト
⬆ トップに戻る
SEO
sitemap.xml
が存在しており Google Search Console に登録されている。(旧 Google Webmaster Tools)robots.txt
によってブロックされていないこと。rel="prev"
andrel="next"
to indicate paginated content.⬆ トップに戻る
License
The text was updated successfully, but these errors were encountered: