本文へ移動
cccskills

「action」の検索結果

6,907 件 ・ 関連度順

概要と使いどころ

link-checker

無料日本語概要

ブラウザに表示されるHTMLを基準に、内部・外部リンクやページ内リンクの不備を点検します。404や意図しない転送を見つけ、修正と継続的な監視の導入を支援します。

  • ドキュメントやECサイトのリンク点検
  • 共通部品が出力するリンクのレビュー
  • CI/CDへのリンク自動チェック導入
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

navigation-landmark

無料日本語概要

Webページのナビゲーションを点検し、nav要素や識別ラベル、スキップリンクを使って、スクリーンリーダーで目的の領域へ移動しやすい構造に整えるスキル。

  • メインとフッターの操作性を見直したいとき
  • 複数のナビゲーションを区別したいとき
  • 共通部品が出力するHTMLの点検
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

llm-parsability

無料日本語概要

AIがウェブページの内容を読み取りやすいか、見出しやHTML構造、JavaScriptなしでの本文表示、構造化データを点検し、改善を支援するスキル。

  • AIの回答で参照されるページの点検
  • 見出しや各節を単独で伝わる文にしたいとき
  • JavaScriptなしの本文表示の確認
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

html5-semantic-elements

無料日本語概要

WebページのHTMLを点検し、汎用のdivを内容の役割に合う要素へ置き換える方針を示して、読み上げでの移動や検索エンジンによる構造の理解を支えるスキル。

  • div中心のページ構造を見直したいとき
  • テンプレートや共通部品の出力HTML確認
  • 読み上げで移動しやすい構造にしたいとき
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

invalid-links

無料日本語概要

検索エンジンがたどれないリンクをHTMLから洗い出し、空のhrefやJavaScriptだけの画面遷移を、適切なURLや要素へ修正するスキル。

  • JavaScript中心の画面遷移の点検
  • 動的に生成するリンクを確認したいとき
  • 画面遷移と操作ボタンの使い分け
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

input-types

無料日本語概要

フォームの入力欄に合うHTMLのtype属性とautocomplete属性を点検・修正し、スマートフォンのキーボード表示やブラウザの自動入力を整えるスキル。

  • 既存フォームの入力属性を点検したいとき
  • スマホのメール・電話入力を整えたいとき
  • ブラウザの自動入力を設定したいとき
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

input-image-alt

無料日本語概要

画像を使った入力ボタンのHTMLを点検し、操作の目的を伝える代替テキストの不足を見つけます。検索や送信などの動作が読み上げでも分かるよう、alt属性の修正を支援します。

  • 画像入力ボタンの代替テキスト点検
  • 検索・送信ボタンの説明を整えたいとき
  • 共通の画像ボタン部品のレビュー
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

html-resource-hints

無料日本語概要

HTMLで読み込みの遅い重要リソースを見つけ、フォントや画像の先読み、外部ドメインへの事前接続を見直すスキル。ブラウザに届くマークアップまで確認します。

  • 重要なフォントや画像の先読み確認
  • 外部ドメインへの事前接続の確認
  • 出力されたHTMLのヒント監査
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

direction-attribute

無料日本語概要

アラビア語など右から左へ読む言語や、文字方向が混在する投稿を点検し、HTMLの方向指定と表示・読み上げ順、画面配置の確認や修正を支援するスキル。

  • アラビア語・ヘブライ語ページの点検
  • 文字方向が混在する名前や投稿への対応
  • ナビゲーションやアイコンの左右反転確認
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

focus-styles

無料日本語概要

キーボード操作中の選択位置を示すフォーカス表示を点検し、輪郭線の消失や見切れ、配置ずれを確認して、見やすいCSSへの修正を支援するスキル。

  • キーボード操作の選択位置を確認したいとき
  • 輪郭線を消したCSSの見直し
  • フォーカス枠の見切れや位置ずれの修正
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

file-upload-accessibility

無料日本語概要

ファイル選択欄やドラッグ&ドロップ領域を点検し、ラベル、形式・容量の案内、進捗やエラー通知を改善します。読み上げやキーボードで使えるか確認するスキルです。

  • アップロード欄のラベルと説明の確認
  • ドラッグ操作の代替手段の点検
  • 進捗やエラーの読み上げ改善
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

dom-size

無料日本語概要

Webページを構成するHTML要素の数や入れ子の深さを測定し、不要な囲み要素の削除や長い一覧の表示方式の見直しを通じて、描画負荷の軽減を支援するスキル。

  • ページの描画や操作が遅い原因を調べたいとき
  • HTML要素数と入れ子の深さを測りたいとき
  • 不要な囲み要素を整理したいとき
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

focus-order

無料日本語概要

キーボードのTab操作で移る順番が画面の並びと合っているかを点検し、HTMLの要素順やダイアログ開閉時のフォーカス移動の修正を支援するスキル。

  • ページのTab移動順の点検
  • ダイアログ開閉時のフォーカス確認
  • HTMLの要素順とtabindexの見直し
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

defer-async

無料日本語概要

Webページのスクリプト読み込みを点検し、defer・async・type=moduleの使い分けと修正を支援します。ブラウザに届くHTMLまで確認します。

  • ページ表示を遅らせるタグの点検
  • スクリプトの読み込み方式を選びたいとき
  • 共通部品が出力するHTMLのレビュー
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

favicons

無料日本語概要

ブラウザのタブやスマートフォンのホーム画面に使うサイトアイコンを点検し、端末に応じた形式・サイズの生成からHTMLやPWAの設定まで支援するスキル。

  • タブやブックマーク用アイコンの準備
  • モバイルのホーム画面用アイコン設定
  • PWAのアイコン設定を確認したいとき
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

focus-management

無料日本語概要

モーダルの開閉や画面遷移で、キーボードの操作対象が適切に移るかを点検するスキル。フォーカスの移動・復帰を見直し、動的な画面で操作位置を見失う問題を改善します。

  • モーダル開閉時のフォーカス確認
  • SPAの画面遷移後の操作位置確認
  • 動的更新時のキーボード操作改善
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

contract-testing

無料日本語概要

フロントエンドがAPIに期待する応答を契約としてテストにまとめ、Pactでバックエンドとの整合性を検証し、別々に変更・デプロイする際の確認を支援するスキル。

  • フロントエンドとAPIの整合性テスト導入
  • サービスを個別にデプロイできるか確認
  • 遅いE2Eテストの一部を置き換えたいとき
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

charset

無料日本語概要

ブラウザーに届くHTMLの文字コード宣言を点検し、UTF-8の指定漏れや配置の問題を見つけ、日本語や特殊文字の文字化けを防ぐために修正するスキル。

  • 日本語や特殊文字の文字化け調査
  • 公開前の文字コード宣言の確認
  • 共通テンプレートのHTML出力点検
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

css-minification

無料日本語概要

本番配信するCSSの空白やコメントを削ってファイルを小さくするために、圧縮の適用状況やビルド設定を点検し、画面幅ごとの表示も確認するスキル。

  • 本番CSSの圧縮状況の確認
  • ビルド工程に圧縮を追加したいとき
  • PostCSSの出力を見直したいとき
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

css-custom-properties

無料日本語概要

CSSに散らばる色・余白・文字サイズの指定を見つけ、共通のCSSカスタムプロパティへ整理します。テーマ変更や画面幅ごとの表示を確認しながら修正を提案します。

  • 重複する色や余白の整理
  • ブランド変更に向けたCSS整備
  • ダークモード用の値の見直し
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

color-oklch

無料日本語概要

CSSの配色定義を点検し、色の明るさを人の見え方に合わせて調整できるoklch()を使って、統一感のある濃淡やダークモードの配色を整えるスキル。

  • CSSの共通配色を整理したいとき
  • 見た目の明るさがそろう濃淡の作成
  • ダークモードやホバー色の設計
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

breadcrumb-navigation

無料日本語概要

パンくずリストのHTML構造と現在地の指定を点検し、サイトの階層を画面読み上げでも理解できるよう、適切な要素とARIA属性を整えるスキル。

  • パンくずの読み上げ対応を点検したいとき
  • 共通部品が出力するHTMLの確認
  • 構造化データと表示内容の整合確認
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

code-splitting

無料日本語概要

大きなJavaScriptの配信ファイルを点検し、初期表示に不要な機能やライブラリを必要な場面で読み込む形へ分割して、読み込み待ちの表示も整えるスキル。

  • 大きなJavaScriptの分割候補を探す
  • グラフやエディターの読み込みを遅らせる
  • ページごとの読み込みコードの点検
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

css-print

無料日本語概要

Webページを紙に印刷したときの読みやすさを点検し、印刷用CSSを整えます。ナビや広告の非表示、文字サイズ、改ページ、外部リンクのURL表示を確認します。

  • Webページを紙で読みやすくしたいとき
  • 印刷時にナビや広告を隠したいとき
  • 印刷の文字・改ページ・URL表示の調整
thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新