早く廃業させてみろ 待ってるぞ

✏️ #QuickTips 数行で実現できる、画像に画像で穴を空けるCSS

安野さん当確おめでとうございます

コンテナクエリの台頭によりブレイクポイントが一定になることはもうなく〜

✏️ #QuickTips カードの背面に単色のオーバーレイを敷くCSS 疑似要素でやるより`box-shadow`を利用するのが早い shadow分のズラしはグリッドアイテムに`margin`を使用する 位置調整と配色はカスタムプロパティで汎用性を持たせる codepen.io/tak-dcxi/pen/q…

Tailwind、インラインscopeと組み合わせて見た目の部分だけユーティリティで表現するって使い方なら許容できるようになってきた。レイアウトは💩なのでインラインscopeで書かせてくださいというお気持ち

✏️ #QuickTips 横並びのニュースリストを実装する 各アイテムの位置を揃えるためにflexではなくsubgridを使用する 日付部分は内在的な最大幅に設定し、カテゴリ部分はfit-content(10rem)で10remを上限にしつつ内在的なサイズを幅とする fit-content()関数はマイナーだけど便利なので覚えておくと良い

✏️ #QuickTips CSSのみの画像無限ループ ✅️画像は数だけ複製 ✅️data-directionでループの方向を決定 ✅️CSS変数で汎用性を持たせる ✅️translateの計算式は要素幅×要素数 + gap×要素数。守らないとループ終わりにガタつく ✅️prefers-reduced-motionで酔いへ配慮 codepen.io/tak-dcxi/pen/M…

✏️ #QuickTips たった1行で背景色を画面いっぱいにするCSS 横スクロールなし Sample: codepen.io/tak-dcxi/pen/m…

select要素がリッチになったのは喜ばしいけど、おそらく再び「select要素を選択した瞬間に別のページに移動」っていう実装が増える予感がする。 ダメだからね！ ページ移動は完全に「コンテキストの変化」に該当するからWCAG 2.2「達成基準 3.2.2 入力時」に抵触するぜ！ waic.jp/translations/W…

✏️ #QuickTips 1分もかからないメインビジュアルをギザギザに加工する実装 Use: CSS Generators css-generators.com/custom-borders/ Sample: codepen.io/tak-dcxi/pen/o…

CSSのif()がアカン理由、便利すぎて歯止め効かなくなるから

✏️ #QuickTips 画像に影をつける実装方法 `box-shadow`は単色の影しか付与できないので、同じ画像を2枚重ねて背面の画像に`filter: blur()`を指定する こうすることで画像にブラーが掛かった影を取り入れることができる codepen.io/tak-dcxi/pen/J…

✏️ #QuickTips 2分で分かる天地左右中央寄せ block→grid→flexの順 アイテムが複数の場合は`justify-items:center+align-content:center`もしくは`place-content: center`が良い 前者は内容を全てfit-contentにし、後者は最も大きいものに幅を合わせる