制作会社様向け
動きを減らす設定に対応するCSS｜表示が消える例と修正を検証
動きを減らす設定に対応するときは、演出を止めても文章とリンクが残るか確認します。透明な初期状態が残る失敗例とCSSの修正、PC・スマホ幅とキーボードでの試験結果を示します。
GreenCodingのコラム
知りたいことから、
記事を探す。
Web制作の進め方から、公開後の運用、AIの業務活用まで。
読者とジャンルを組み合わせて、いま必要な情報を選べます。
記事を絞り込む
「誰向けか」と「何についてか」を、それぞれ選べます。数字は表示中の読者条件での件数です。
すべての読者 ／ コーディング・表示技術
18 件の記事
1–12 件を表示
制作会社様向け
dialog要素のモーダル実装｜閉じ方とフォーカス復帰を検証
モーダルは、開くだけでなく閉じ方と元の作業位置へ戻る操作まで設計します。dialog要素のコード例と架空画面のPC・スマホ幅での試験から、確認できた動作と追加検収が必要な範囲を示します。
制作会社様向け
リンクとボタンの使い分け｜HTMLの役割とキーボード操作を検証
移動するリンクと、その場で実行するボタンは、見た目ではなく目的で選びます。クリックだけのdivと標準要素を比べ、Tab・Enter・Spaceの操作、開閉状態、PCとスマホ幅をローカルで検証しました。
制作会社様向け
比較表の横スクロール実装｜スマホの見切れとキーボード操作を検証
比較表がスマホで見切れる例を再現し、表だけを横スクロールできるHTML/CSSへ修正します。見出しの対応、フォーカス表示、矢印キーとTabでの操作を確認する手順を示します。
制作会社様向け
固定ヘッダーとページ内リンクの実装｜CSSの余白とキーボード操作を検証
固定ヘッダーで目次の移動先が隠れる問題を、PCとスマホ相当幅で再現しました。CSSの固定値と実寸対応を比べ、見出しの位置・キーボードの操作先・直接リンクを確認する実装例を示します。
制作会社様向け
レスポンシブ画像のsrcset・sizes実装と表示幅の検証
支給画像をPC・スマートフォンへ実装するときは、候補ファイルと実際の表示幅を揃えて指定します。コードとブラウザーの選択結果から、sizesの不一致の直し方を解説します。
制作会社様向け
赤枠だけのフォーム入力エラー表示を直すHTML/JS実装と操作検証
フォームの入力エラーを赤枠だけで終えず、説明文・入力欄との関連付け・戻り先まで実装します。架空フォームの修正前後をPC・390px幅・キーボードで試し、検収項目と未確認の範囲を整理します。
制作会社様向け
長いサービスページの目次とページ内リンク｜項目選びと依頼内容
目次は、読者が探す項目と移動先を決めてから設計します。架空のサービス紹介ページを例に、リンク名、固定ヘッダーとの重なり、スマートフォン表示、キーボード操作の確認を整理します。
制作会社様向け
商品一覧の絞り込み検索｜導入の判断と条件・0件・解除の設計
商品一覧の絞り込みは、点数よりも訪問者が使う条件から判断します。分類リンクで足りる範囲と、条件の組合せ・0件・解除・共有URLまで実装する範囲を、架空の依頼例で整理します。
制作会社様向け
印刷物とWebのフォント利用条件｜ライセンス・代替書体・実装の引き継ぎ
印刷物で使ったフォントが、そのままWeb配信にも使えるとは限りません。提供元、Web利用条件、契約管理者、ウェイト、代替書体、表示確認をまとめた架空の引き継ぎ例を示します。
制作会社様向け
支給画像の代替テキスト（alt）の決め方と役割分担
画像の代替テキストは実装担当だけで決めず、制作側が掲載文脈と画像の役割を整理し、必要な情報を顧客と確認して渡します。装飾・情報・リンク画像の架空の記入例を示します。
制作会社様向け
FAQの開閉デザインを実装担当へ渡す前に｜決めておきたい動作と確認項目
FAQの開閉は、初期状態、同時に開ける数、操作範囲まで伝えると実装の認識をそろえられます。この記事内で触れる架空サンプルと、制作担当へ渡せる仕様メモを紹介します。
記事を読んでも整理しきれないことがあればご相談ください。
いま決まっていることと、迷っていることからお聞かせください。