hタグ内の改行とスクリーンリーダーで快適に読み上げられるための対策
これはなに h1〜h6の中で<br>を使ってレスポンシブ対応の改行を実装していたところ、VoiceOverが同じ見出しの中を移動するたびに「見出し レベルN」を繰り返し読み上げる問題...
0
0
Comment1
56 search resultsShowing 1~20 results
Stocked
You need to log-in
Claude CodeのSkill Creatorを使った感想
はじめに 最近、Claude Codeで繰り返し発生する作業を「Skill」として切り出す機会がいくつかありました。 Skillを作るときに使ったのが、Anthropicが提供している Skil...
9
4
Comment1
テロップ（字幕）の編集作業をClaude Codeのスキルで自動化してみた
これは何 LTの動画編集でPremiere Proを利用しています。 Premiere Proのテロップ（字幕）の編集作業をClaude Codeのスキルに落とし込んだことをまとめました。 背景...
8
1
Comment0
`placeholder` のアクセシビリティ問題、3パターンで整理してみた
これはなに フォームを実装するとき、placeholder 属性に入力例や説明を書いてしまうことが多いと思います。 <input type="text" placeholder="ここにユ...
6
1
Comment0
Figmaでもまだ作れない？CSSの oklch で作る美しいグラデーション
この記事はなに？ グラデーションを作成したとき、両端の色は鮮やかなのに、真ん中だけ灰色っぽく濁ってしまった経験はありませんか？ 特に、「青と黄色」や「赤と緑」といった補色関係（反対色）の色をグラ...
7
1
Comment0
【CSS】Flexboxが思った通りに動かない？ それ「デフォルト値」のせいです（親・子要素の初期値まとめ）
この記事はなに？ CSSでレイアウトを組んでいて、「なんで勝手に縮むの？」「なんで高さがビローンって伸びるの？」と困ったことはありませんか？ それは、Flexboxの 「デフォルト値（初期値）」...
5
0
Comment0
GitHub Projects移行のリアル - Zenhubの機能をどう置き換え、何を諦めたか
なぜ移行したのか 2025年の夏、Zenhub のライセンス更新時期が迫っていました。 以前からコストや運用の二重管理が課題になっており、部長から「GitHub Projects に完全移行でき...
4
0
Comment0
AI実装の手戻りを減らしたい！「Issue作成ペアプロ」でGitHub Copilotのポテンシャルを最大化する
この記事はなに？ AIに実装を任せる際、「要件定義は細かく」「設計はしっかり」と言われることが多いですが、その最適な粒度を掴むのは意外と難しいものです。 簡易的なIssueであっても、指示がふわ...
5
0
Comment0
ブロック要素も垂直方向に中央寄せできる `align-content`
この記事はなに？ インライン要素の垂直方向の配置には vertical-align プロパティが使えますが、ブロック要素には適用できませんでした。 align-content は、 displa...
4
0
Comment0
gap使いすぎ問題？ CSSの余白指定、本当にそれで良いですか？
この記事はなに？ CSS の gap プロパティは、Flexbox や Grid で使える、要素間の余白を指定することができます。 繰り返しの要素や、等間隔のパターンでその利便性を発揮すると思い...
8
1
Comment0
GitHub Copilot を使った Issue 作成機能を使ってみた
この記事はなに 2025年5月19日に、GitHub Copilot を使った Issue 作成機能がパブリックプレビューとして公開されました。 この記事では、GitHub Copilot の ...
8
1
Comment0
【React 19対応】forwardRefはまだ必要？refの新しい渡し方と基本を解説！
この記事はなに？ ref という機能や、forwardRef というコードに遭遇したことはありますか？ これらの機能は、普段のコンポーネント開発ではあまり使わないかもしれませんが、特定の場面で非...
9
1
Comment0
React + Typescriptで特定のセクションに表示される追従要素の実装
この記事はなに？ この記事では、画面の特定の位置に固定表示される追従要素を、React + Typescriptで実装する方法を解説します。 追従要素は、フローティングアイテムや、スティッキーア...
7
0
Comment0
role="presentation"とrole="none" って何？どう使えばいいの？
この記事はなに？ ARIA Authoring Practices Guide (APG)のPractices の中に下記のページがあります。 role="presentation" をあまり扱...
5
0
Comment0
aria-labelの適切な利用について調べてみた
これはなに？ aria-label の使い方についてMDNを読んでいると下記のように記載がありました。 Don't "overuse" aria-label (訳: aria-label を使い...
11
0
Comment0
アクセシビリティに対応したTooltipってどんな作り？ ― 【前編】 Tooltipの基本と挙動
これはなに W3CのARIA Authoring Practices Guide (APG) | Tooltip Pattern を読み解きながら、アクセシビリティに対応したTooltipの実装...
20
15
Comment0
アクセシビリティに対応したTooltipってどんな作り？ ― 【後編】 Tooltipの読み上げ
これはなに この記事は、上記の記事の続きです。 W3CのARIA Authoring Practices Guide (APG) | Tooltip Pattern を読み解きながら、アクセシビ...
8
9
Comment0
Utility Types の Pick と Omit の基本的な使い方と違い
これはなに すでに存在している型を参照して、新規に作成したコンポーネントの型を指定したい場面がありました。 この記事はそのときに使ったTypescript の Utility Types の P...
5
0
Comment0
Elevationを定義しているデザインシステム4つを調べてみた
これはなに 最近業務でElevationについて調べる機会があったので、まとめておきたくて記事化しました。 この記事は私の解釈です。 しっかり理解したいという方は、調査対象のデザインシステムのリ...
6
2
Comment0
aria-currentの値はいくつかあるけれど、それぞれどのUIで使うとよいのか整理してみた
これは何？ ARIA属性には現在選択されている項目を示すものがあります。 タブ（role="tab"）なら、 aria-selectedがあります。 aria-current も選択されている項...
12
2
Comment0
56 search resultsShowing 1~20 results
Qiita is a knowledge sharing service for engineers.
- You can follow users and tags
- You can stock useful information
- You can make edit suggestions for articles