データツールナビ

分野別ガイド

ページのマークアップと見た目の道具ガイド

ページ内リンクのリンク切れ、CSS の未使用クラスの候補、favicon の sizes の書式、ボタンの押下領域の寸法、文字色のコントラスト比。1 ページ単位で確かめる点検です。 ページのマークアップと見た目に分類した5件のWeb・データの道具の内容と出典をまとめました。出典は4の発行元の公表ページ7件です。

  • 5Web・データの道具
  • 7出典
  • 0出典から掲載の値

ページのマークアップと見た目のWeb・データの道具

一覧で見る

各道具で調べられること

各道具の内容の要約と、登録している出典の件数です(各道具の定義データから)。

ページのマークアップと見た目の道具一覧
道具内容出典
CSS の未使用クラス候補の棚卸しCSS と HTML を貼り付けると、CSS に書かれたクラスセレクタを数え、HTML の class 属性に出てこない「未使用の候補」と、@media の min-width・m…1 件
favicon のサイズの点検ページの head にある link 要素を貼り付けると、rel="icon" や apple-touch-icon の sizes の書式、正方形か、8x8 以上か、48x48 …2 件
ページ内リンクのリンク切れ確認貼り付けた HTML にあるページ内リンク(href="#…")を、同じ HTML の id と a 要素の name に WHATWG HTML のフラグメントの規則で照合し、飛…2 件
ボタンの押下領域の寸法チェックボタンやリンクの位置と大きさを 1 行ずつ入力すると、WCAG 2.2 の達成基準 2.5.8(ターゲットのサイズ・最小)の 24×24 CSS ピクセルを満たすか、小さい場合は直…1 件
文字色のコントラスト比の計算文字色と背景色(#rrggbb・#rgb・rgb())と文字の大きさを入力すると、WCAG 2.2 の相対輝度の式でコントラスト比を計算し、達成基準 1.4.3 の 4.5:1(通…1 件

各道具で解説している項目

各道具のページでは、次の項目を解説しています。

根拠にしている出典

この分野では、ツールごとに別々の公表ページを出典にしています(複数のツールで共通の出典はありません)。

www.w3.org(3 件)

html.spec.whatwg.org(2 件)

developer.mozilla.org(1 件)

developers.google.com(1 件)

出典から掲載している値

この分野のツールには、公的な出典から取り込んだ固定値の登録がありません(入力された数値だけで計算するツールです)。

関係する場面と分野

この分野のツールが入っている作業:

同じ発行元の出典を使うほかの分野:

ご利用上の注意

本サイトは、個別の事情についての判断や助言をするものではありません。各道具の結果は、入力した内容をもとにした機械的な判定です。認証情報や個人情報を含むデータは伏せてから使い、本番へ反映する前に実際の環境でも確かめてください。各道具が示す注意は次のとおりです。

  • CSS の未使用クラス候補の棚卸し: 結果は候補です。削除する前に、ビルド後の全ページとスクリプトで使われていないことを確認してください。
  • favicon のサイズの点検: 結果は仕様とガイドラインの文面にもとづく点検で、Google 検索に favicon が表示されることを保証するものではありません(ガイドラインを満たしても表示は保証されないと明記されています)。
  • ページ内リンクのリンク切れ確認: 結果は貼り付けた HTML の文字列だけにもとづく照合です。実際のブラウザでリンクを押して、飛び先を目で確かめてください。
  • ボタンの押下領域の寸法チェック: 結果は機械的に判定できる規則だけにもとづく目安で、アクセシビリティの達成基準に「適合している」ことを示すものではありません。適合の判断には、実際の画面での確認と専門家のレビューが必要です。
  • 文字色のコントラスト比の計算: 結果は機械的に判定できる規則だけにもとづく目安で、アクセシビリティの達成基準に「適合している」ことを示すものではありません。適合の判断には、実際の画面での確認と専門家のレビューが必要です。

全Web・データの道具の注意は ご利用上の注意 にまとめています。