サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
世界禁煙デー
qiita.com/kabechiyo13
これは何 自分の所属しているグループではスクラムを導入しているのですが、ある時メンバー間で業務を調整するためのコミュニケーションをもっと取っていきたいよねという話になりました。 具体的には、「重いレビューと重いタスクが重なってしまって余裕がない」、「ミーティングが多くて時間が足りない」、「体調不良で思うように働けない」などなどの個別の事情をもっと共有しあってチームで調整したいよねという内容です。 元々グループで毎日朝会を実施していて、そこに「困ったこと」を書くセクションを設けてはいました。 しかし、ちょっとした困りごとは「頑張ればなんとかなるし..」「わざわざ共有するほどでもないかな」といった感じで共有されづらい状況でした。 そんな時に以前『カイゼン・ジャーニー』で読んだ「ファイブフィンガー」を思い出し、チームに導入してみたら、些細な困り事が共有されるようになりました。 ファイブフィンガー
【CSS Tips】リンクにフォーカスできないと思ったら、display: contents が原因だったCSSアクセシビリティ はじめに 偶然フォーカスできないリンクを見つけて原因を調べたところ、aタグにdisplay: contentsが指定されていたのが原因だったのでその備忘録です。 なぜdisplay: contentsを指定するとフォーカスができなくなるのか そもそも、display: contentsとは、ボックスツリーを生成するかどうかを指定するプロパティです。 display: contentsが指定された要素は、表示はされるけどボックスツリー上では無視されるようになります。 このdisplay: contentsにはアクセシビリティ上のバグが複数報告されており、この挙動もその1つと思われます。 報告されているバグは、display: contentsが指定されている要素の
はじめに この記事を書いた時点では、Subgridのサポートされているブラウザが限られていましたが、2024年3月現在では主要なブラウザでサポートがされています。 そのため、方法③ Subgridを使うがおすすめの方法です。 "subgrid" | Can I use... Support tables for HTML5, CSS3, etc これは何 Webを作っている際に、「見た目はテーブルレイアウトを使って組むと楽そう」だけど、「実際にはテーブルではない」要素を作りたいことがちょこちょことあります。 以下のようなUIです。 こうした要素をtable要素を使ってデザインしてしまうと、支援技術を使用しているユーザーが意味を適切に理解できなかったり、テーブルを読み取る操作が複雑なために内容を読み取れないことがあります。 テーブル以外でも、基本的に使用するタグは「実現したい見た目」ではなく
これは何 備忘録も兼ねて、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
【CSS Tips】コンテンツが少ない時は下部に固定されて、コンテンツが増えてきたら下に移動するフッターCSSレスポンシブデザイン 概要 要はこんな感じの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 を
これは何 手元に不要なブランチが溜まってきた時に必要なブランチ以外一括で削除したくて色々調べたのですが、そもそもコマンドが全然わからなくて怖かったので調べた記事です。 ということでかなり初心者向けの記事になっております。
これは何 Qiitaが主催するエンジニア向けカンファレンスの「Qiita Conference 2022」のファーストビューのアニメーションを作成した際、Figmaで動画のラフを作成したのがとても便利だったのでその内容を紹介します。 Figmaで動画ラフを作るメリット 手軽に作れる なんといっても、手軽さが魅力です。 Frameを複数作って「Smart Animate」で繋げると、Frameの間の動きを補完してくれるので、動画作りに慣れていない人でもパラパラ漫画を作る容量でサクサク作れます。 また、Frameをコピーすれば同じファイル内でさまざまなパターンを作成していけるので、アイデアの検討もしやすいです。 実際に絵コンテを作成していたときは、こんな感じで複数案を並べて作っていました🔽 レビューしやすい 通常の絵コンテよりも動きがイメージしやすいのでレビューしやすく、作ってみてから「なん
はじめに デザイナー以外の方でも、サイトやアプリを作るためにUIを作成することはよくあると思います。 そんな時に最低限知っておくと良さそうな、アクセシビリティに関するTipsをまとめてみました。 この記事で紹介する以外にも色々とあるとは思うので、是非コメントなどで「これも追加した方がいいんじゃないか」など提案いただけると助かります! この記事ではFigmaなどのデザインツールでUIをデザインする段階を想定しています。 そのため、「ボタンはdivでなくbuttonで実装する」「アイコンフォントにaria-labelをつける」「音声を勝手に再生しない」といった実装段階のポイントは扱いません。 読みやすい文字のサイズや色、フォントを使う 文字サイズ Webサイトやアプリで使われている本文のフォントサイズは14~18pxが多いです。 また、W3Cでは英文の場合18ポイント以上もしくは、14ポイント
<picture> <source srcset="1200px以上で表示する画像" media="(min-width: 1200px)" /> <source srcset="770px以上で表示する画像" media="(min-width: 770px)" /> <img src="上記以外で表示する画像" alt="hogehoge"/> </picture> 画像の下にできる余白を削除する 画像にdisplay: blockを追加する See the Pen Untitled by かべちよ (@kabechiyo13) on CodePen. ボックスにアスペクト比を設定する 画像にaspect-ratioを設定する
このページを最初にブックマークしてみませんか?
『@kabechiyo13のマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く