はてなブックマーク

これは何 自分の所属しているグループではスクラムを導入しているのですが、ある時メンバー間で業務を調整するためのコミュニケーションをもっと取っていきたいよねという話になりました。 具体的には、「重いレビューと重いタスクが重なってしまって余裕がない」、「ミーティングが多くて時間が足りない」、「体調不良で思うように働けない」などなどの個別の事情をもっと共有しあってチームで調整したいよねという内容です。 元々グループで毎日朝会を実施していて、そこに「困ったこと」を書くセクションを設けてはいました。 しかし、ちょっとした困りごとは「頑張ればなんとかなるし..」「わざわざ共有するほどでもないかな」といった感じで共有されづらい状況でした。 そんな時に以前『カイゼン・ジャーニー』で読んだ「ファイブフィンガー」を思い出し、チームに導入してみたら、些細な困り事が共有されるようになりました。 ファイブフィンガー

はじめに 偶然フォーカスできないリンクを見つけて原因を調べたところ、aタグにdisplay: contentsが指定されていたのが原因だったのでその備忘録です。 なぜdisplay: contentsを指定するとフォーカスができなくなるのか そもそも、display: contentsとは、ボックスツリーを生成するかどうかを指定するプロパティです。 display: contentsが指定された要素は、表示はされるけどボックスツリー上では無視されるようになります。 このdisplay: contentsにはアクセシビリティ上のバグが複数報告されており、この挙動もその1つと思われます。 報告されているバグは、display: contentsが指定されている要素のroleがアクセシビリティツリー上で無視されるようになるというものです。 実際にdisplay: contentsを指定したリンク

はじめに この記事を書いた時点では、Subgridのサポートされているブラウザが限られていましたが、2024年3月現在では主要なブラウザでサポートがされています。 そのため、方法③ Subgridを使うがおすすめの方法です。 "subgrid" | Can I use... Support tables for HTML5, CSS3, etc これは何 Webを作っている際に、「見た目はテーブルレイアウトを使って組むと楽そう」だけど、「実際にはテーブルではない」要素を作りたいことがちょこちょことあります。 以下のようなUIです。 こうした要素をtable要素を使ってデザインしてしまうと、支援技術を使用しているユーザーが意味を適切に理解できなかったり、テーブルを読み取る操作が複雑なために内容を読み取れないことがあります。 こうした時にtable要素を使わずにマークアップ・スタイリングする方

はじめに この記事は、アクセシビリティ Advent Calendar 2022の参加記事です。 アクセシビリティツリーとは アクセシビリティツリーは別名アクセシビリティオブジェクトモデルとも呼ばれ、DOMツリーに基づいて生成されるスクリーンリーダーなどの支援技術に使用される情報です。 つまり、アクセシビリティツリーを確認することで、どのような情報が支援技術に提供されているかがわかり、アクセシビリティ対応に役立ちます。 See the Pen Untitled by かべちよ (@kabechiyo13) on CodePen. 例えば、アイコンにMaterial Symbolsを使用したこのボタンをアクセシビリティツリーで見てみると以下のように表示されます。 ボタンのラベルとして表示している「送信する」のテキストだけでなく、Material Symbolsはアイコンフォントのため、アイコ

これは何 備忘録も兼ねて、PCのセットアップで自分のやることをまとめてみました。 随時更新していく予定です。 VS Code VS Codeの環境設定 setting.jsonに下記を追加します。 内容はコメントで書いているので、詳細は省きます。 { "editor.fontSize": 12, // フォントサイズを変更 "editor.guides.bracketPairs": true, // 対応している括弧にガイドを表示する "editor.minimap.renderCharacters": false, // ミニマップに実際の文字を表示しない "editor.renderControlCharacters": true, // 制御文字を表示する "editor.renderLineHighlight": "all", // 現在の選択行をハイライトする "editor.r

概要 要はこんな感じのUI🔽 を実装したい時のCSSの書き方です。 方法① gridを使う header、main、footer要素を用意する bodyにdisplay: gridとgrid-template-rows: auto 1fr autoを指定する main部分に1frを指定することで、flexboxの時と同じくコンテンツの高さを伸ばしてフッターが画面下部に固定されるようになり、コンテンツ部分が画面内に収まらない時は合わせて下に移動します。 多分この方法が一番シンプル 参考 🔽 See the Pen gridを使って使ってフッターを下部固定する by かべちよ (@kabechiyo13) on CodePen. 方法② flex-grow を使う header、main、footer要素を用意する bodyにdisplay: flexとflex-direction: co

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

これは何 Qiitaが主催するエンジニア向けカンファレンスの「Qiita Conference 2022」のファーストビューのアニメーションを作成した際、Figmaで動画のラフを作成したのがとても便利だったのでその内容を紹介します。 Figmaで動画ラフを作るメリット 手軽に作れる なんといっても、手軽さが魅力です。 Frameを複数作って「Smart Animate」で繋げると、Frameの間の動きを補完してくれるので、動画作りに慣れていない人でもパラパラ漫画を作る容量でサクサク作れます。 また、Frameをコピーすれば同じファイル内でさまざまなパターンを作成していけるので、アイデアの検討もしやすいです。 実際に絵コンテを作成していたときは、こんな感じで複数案を並べて作っていました🔽 レビューしやすい 通常の絵コンテよりも動きがイメージしやすいのでレビューしやすく、作ってみてから「なん

アイコンを使う時のポイント できるだけアイコンだけでなくラベルをつける テキストではなくアイコンを使うと、スペースを削減できます。 また、アイコンのような視覚要素は直感的に機能を理解できます。 一方で、テキストラベルなしのアイコンにはいくつか課題があります。 例えばマイクのアイコンとマイクに取り消し線があるアイコンがある時、「今の状態を表している」のか「起こるアクションの内容を表している」のか判断がつきません。 しかし、「ミュートを解除する」「ミュートにする」というラベルをそれぞれ付け加えれば何が起こるかすぐに理解できます。 また、アイコンの意味を理解できたとしても「これはどういう意味だろう」「きっとこうだろう」と考える負荷がかかります。 他にも、形状が似ているアイコンを見間違えやすかったりアイコンの意味を推測するのが苦手な人もいます。 ラベルを付加することでこうした課題を解決できます。

これは何 CSS Advent Calendar 2022の参加記事です！ CSSでテキストの折り返し指定をする時に毎回「結局何を指定すればいいんだっけ..」と悩むので、折り返し指定について改めて調べてまとめました。 そもそもなぜ折り返し指定が必要なのか ボックスやブラウザサイズに対して溢れるようなテキストがある時に、表示崩れの原因になるためです。 例えば横幅375pxのスマートフォンでサイトを閲覧していて、それよりも長いテキストが折り返されずに表示された場合、不要な横スクロールが発生したりテキスト全体を表示させるために画面が小さく表示されてしまうことがあります。 そのため、ブラウザのデフォルトの改行規則では改行されないテキストが入り得る箇所には折り返しの指定をする必要があります。 デフォルトの改行規則 では、デフォルトの改行規則ではテキストの折り返しがどのようになるのかを見ていきます。