【宣伝】日本語Webサイトを意識したモダンリセットCSS「kiso.css」をリリースしました。その名が示すように、Webサイト構築の「基礎」として機能します。 他のリセットCSSとの差別点や独自のサポートに関しては投稿した記事にて解説しています。 https://t.co/OnJJjwXIwj

dialogやpopoverはトップレイヤーに位置するからz-indexの指定は不要、というのは将来的な話で、アニメーションを伴う場合は現状Chrome系以外はtransitionのoverlayが非サポートだからz-index指定しとかないと閉じる際のアニメーションに他の要素が重なって不具合が発生する可能性がある

“The dichotomy has never been more clear, that you have one side that wants to fundamentally transform one of the greatest blessings that God has given his children, and that is this country.” - Charlie Kirk

✏️ #QuickTips ホバー時に背面をスライド表示するボタン 疑似要素やbackground-positionなどをtransitionさせる実装が多いが、今回はカスタムプロパティを対象 中央テキスト右にアイコンみたいなボタンで疑似要素が足りないケースで使いやすい 角度の変更が容易なのも利点 https://t.co/iBbRgPG83x

#朝までマークアップの3回目はJavaScript特集で開催します。 （いつもより少し短め） - 鹿野 壮／Ubie @tonkotsuboy_com - TAK @tak_dcxi - タムショー／ましじめ @tamshow_ - 長谷川 広武／HAMWORKS @h2ham - 半田 惇志／フリーランス @assialiholic - 綿貫 佳祐／Qiita/エイチームライフデザイン

✏️ #QuickTips セクション内の背景画像を追従させる方法 ✅️コンテンツのラッパーと背景とするimg要素をgridで重ねる ✅️高さをmin(100%, 100lvh)とし、画面の高さよりコンテンツが少ない場合は画像はセクションいっぱいとなり、多い場合は画面いっぱいになる https://t.co/16aOdpZGt8

📢プロポーザル採択結果のお知らせ📢 お待たせしました！ 多数の応募の中から採択するプロポーザルを決定いたしました！ 採択者の方には8/24(日)までにメールの送信を持ってご連絡いたします。 メールを受信後、Slackへの参加をお願いいたします！ #fec_kansai https://t.co/RyJUbuKgRs

よく見たら、 「切り欠きのために、親と同じ背景色のやつを上に重ねる」のに background-color: inherit; を使ってるやん！これは知らなかった

Blink: Intent to Ship: Range syntax for style container queries and if() https://t.co/5ckI6A871T

Amboy’s own Alvin Cailan just dropped a “Touchdown Chicken Dip” that goes crazy on a Wheat Thin. Pull up to Family Style Food Fest LA on 9/13 to try this and four more custom recipes. Sponsored by @WheatThins

✏️ #QuickTips グラデーションのアニメーションを利用したカード @\propertyを利用することでグラデーション内の<angle>や<color>をアニメーションさせる keyframesでグラデーションを回転 ホバー時にグラデーションの透過値を変更 filter:blur()を使って影を作成する https://t.co/axGdn5XRpY

WYSIWYGエディタを通して自動で書かれるhtml部分だからこその問題だね。cssも雑な指定ではあるけれど、どっちかっていうと、WYSIWYGエディタの作法をなんとかしたいなあ。一人でhtml/css書いてるから分かんないけど、チームで開発すると、あり得ないhtmlを書き始める人が現れるのかな。

これ、font-size:150%が連鎖して生じてる現象だけど、極端な例ではあるものの原則的には子要素のfont-sizeにemとか%を指定すると単位の連鎖が生まれて制御が分かりにくくなるから避けた方がいい

デジタル庁デザインシステムはアップデート情報をキャッチしておくべし。最新版ではHTML版のコードスニペットを公開。より開発・導入しやすくなってます。あとはサイト内検索も追加されより便利に。 https://t.co/E1vMYRrCUR https://t.co/6tkRb5d0Si

Claude Codeアホになりすぎてハゲそう

Retail visibility matters. Home Depot processed nearly 400M online orders last year. Evolve from $SNES is now in the mix. https://t.co/aUzTB8r7DN

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

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

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

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

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

Protecting sensitive content is more complex than ever. Box Shield Pro uses AI to automate classification, detect ransomware, and speed up threat response—helping you stay secure without slowing down work.

✏️ #QuickTips 1分もかからないメインビジュアルをギザギザに加工する実装 Use: CSS Generators https://t.co/zkKtXgUrLN Sample: https://t.co/FUCFEN6hSM

凄すぎる…🤯 border-image単体ではダメで、conic-gradientとの組み合わせが必要。 どうやってこのアイディアに辿り着くんだろう…

✏️ #QuickTips たった1行で背景色を画面いっぱいにするCSS 横スクロールなし Sample: https://t.co/FJ45U3Eg3c