Kento Tazunoki

フロントエンド | 20代 | HTML・Astro・PHP・CSS・JS | 毎日奮闘中

[池田 泰延 @clockmaker]

記事を書きました！ ここ数年のHTML・CSSの進化で、ハンバーガーメニューが作りやすくなっています。

<dialog>タグを中心に、ハンバーガーメニューのモダンな作り方を解説しました。
https://t.co/mbf8SahGiH

[yui540 @yui540]

Webサイトに漫画ビューワーを組み込むことが出来るJS/TSライブラリ「comimi」を公開しました🐇
CSSアニメーションでかわいく動くUIにも注目していただけると嬉しいです🫶

https://t.co/Dz8CVZxK3p

[池田 泰延 @clockmaker]

ICS MEDIAで新しい記事が公開されました。

小さな見づらさを減らすCSSとして、::selection、caret-color、::target-text など、テキスト周りのスタイルを紹介しています。 https://t.co/0NG35d3W04

担当：岩間

[池田 泰延 @clockmaker]

解説は次の記事より。
https://t.co/XFjSxygOhi

ハンバーガーの三本線「≡」を、左側基点でレイアウトを作るとこのミスにおちいりやすいです。

[jhey ʕ•ᴥ•ʔ @jh3yy]

it's a combo of css pow() + clamp() that makes it possible 👨‍🍳

[Una 🇺🇦 @Una]

OoooOOooh! Guess what! As of Chrome 149, shape() works in shape-outside!

So you can really *shape* your UI's 😉*

rect() and xywh() are also supported for shape-outside in Chrome 149

*(just let me have my Mom joke)

[Una 🇺🇦 @Una]

Great post on scroll-driven animation from the web animations master himself, @JoshWComeau

https://t.co/E8Kxgn44om

[TAK @tak_dcxi]

レスポンシブ画像で辛かった sizes 属性を簡潔にできるsizes="auto" がとても良い

☑️ ブラウザが適切な画像候補を選択
☑️ 複雑なsizes 属性を手書きしなくてよくなる
☑️ loading="lazy" と併用が必須
☑️ ファーストビューなど loading="lazy" が不適切な場所では使わない

https://t.co/U5ZUtliwVv

[Manu Arora @mannupaaji]

Use 𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗𝚜 and 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑 to animate theme switches instead of flipping them with a transition

𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝.𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝𝙴𝚕𝚎𝚖𝚎𝚗𝚝.𝚊𝚗𝚒𝚖𝚊𝚝𝚎(
{ 𝚌𝚕𝚒𝚙𝙿𝚊𝚝𝚑: ["𝚒𝚗𝚜𝚎𝚝(𝟶 𝟶 𝟷𝟶𝟶% 𝟶)", "𝚒𝚗𝚜𝚎𝚝(𝟶)"] },
{ 𝚙𝚜𝚎𝚞𝚍𝚘𝙴𝚕𝚎𝚖𝚎𝚗𝚝: "::𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗-𝚗𝚎𝚠(𝚛𝚘𝚘𝚝)", 𝚍𝚞𝚛𝚊𝚝𝚒𝚘𝚗: 𝟼𝟶𝟶 },
),

::𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗-𝚗𝚎𝚠(𝚛𝚘𝚘𝚝) {
𝚊𝚗𝚒𝚖𝚊𝚝𝚒𝚘𝚗: 𝚗𝚘𝚗𝚎;
𝚖𝚒𝚡-𝚋𝚕𝚎𝚗𝚍-𝚖𝚘𝚍𝚎: 𝚗𝚘𝚛𝚖𝚊𝚕;
}

Here the clipPath ensures the transition happens from top to bottom

[Manu Arora @mannupaaji]

You can have different sets of favicons for your website’s light and dark modes

<𝚕𝚒𝚗𝚔 𝚛𝚎𝚕="𝚒𝚌𝚘𝚗" 𝚑𝚛𝚎𝚏="/𝚏𝚊𝚟𝚒𝚌𝚘𝚗-𝚕𝚒𝚐𝚑𝚝.𝚜𝚟𝚐" 𝚖𝚎𝚍𝚒𝚊="(𝚙𝚛𝚎𝚏𝚎𝚛𝚜-𝚌𝚘𝚕𝚘𝚛-𝚜𝚌𝚑𝚎𝚖𝚎: 𝚕𝚒𝚐𝚑𝚝)" />
<𝚕𝚒𝚗𝚔 𝚛𝚎𝚕="𝚒𝚌𝚘𝚗" 𝚑𝚛𝚎𝚏="/𝚏𝚊𝚟𝚒𝚌𝚘𝚗-𝚍𝚊𝚛𝚔.𝚜𝚟𝚐" 𝚖𝚎𝚍𝚒𝚊="(𝚙𝚛𝚎𝚏𝚎𝚛𝚜-𝚌𝚘𝚕𝚘𝚛-𝚜𝚌𝚑𝚎𝚖𝚎: 𝚍𝚊𝚛𝚔)" />

[TAK @tak_dcxi]

注釈などで２行目以降を字下げする実装、text-indent の hanging キーワードが全コアブラウザでサポートされたのでこちらを使用してください。

[転スラ「まおりゅう」公式 @tensura_m_game]

／
毎日その場で当たる🎯
キャンペーン【1日目】
＼

新たに★7キャラクターが登場！
まおりゅう 4.5周年記念🎉

1⃣@tensura_m_game をフォロー
2⃣本投稿をリポスト
3⃣ゲームアプリ内で結果を確認

最大3万円分のえらべるPayを
合計2,000名様にプレゼント🎁

[IP @ipwanciu]

Today I learned you can `safely` align the items in an element. 👇

That will prevent content from going off the screen where a user can't scroll to it.

[ろびー【CSS小技✨】 @Robby_WebDesign]

CSS小技✨
ついにCSSだけで「理想の改行」が完成する💻

❌ 以前：単語が泣き別れ、ガタガタな行末
✅ 2026：text-wrapとauto-phraseの合わせ技

見出しはbalance、本文はpretty。
さらに文節を認識して改行位置を自動最適化🎶
この1pxのこだわりがUXを劇的に変える📱

#CSS #Codejump

[鹿野 壮 Takeshi Kano @tonkotsuboy_com]

👴Voltaはもう非推奨👴
Node.js, npm, yarn等のバージョンマネージャーで人気だったVolta。多くのプロジェクトで使われているが、現在は非推奨でメンテナンスされておらず、開発者自身も使ってない。
移行先として推奨されてるのはmise。

https://t.co/ucXs11KcVr

#インターネット老人会

[池田 泰延 @clockmaker]

フロント界隈ではReact不要論で盛り上がっているようですが、ICS MEDIAでタイムリーに新しい記事が公開されました！

Web Componentsの魅力を紹介。普通のHTMLでも使えるし、ReactやVue.jsでも横断してコンポーネントを使えます。
https://t.co/D3lfosnvlL

担当： @northprint

[池田 泰延 @clockmaker]

CSSの新しいcorner-shapeが便利。
border-radiusの角っちょの形状の自由度があがります。

[TAK @tak_dcxi]

CSSのみで作成する動くドーナツグラフ

全コアブラウザ対応
https://t.co/8QA55MewrO

Chromeオンリー
https://t.co/NN4yiw4K0w

ChromeはスタイルクエリのRange Syntaxや高度なattr()関数により値の受け渡しが簡略化される
Safariはkeyframesの count up が動作しない💩 動かなくても見れるから妥協

[池田 泰延 @clockmaker]

ICS MEDIAで新しい記事が公開されました。

複数のブラウザで自動的にテストを行うPlaywrightの入門記事です。

Playwrightを使ったことがあるよー、というフロントエンドエンジニアは多いと思いますが、振り返りにどうぞ。
https://t.co/GqD6h8ieeV

担当：川勝

[Shimoda | TANE-be inc. @tane_shimod]

cssだけでできるカードレイアウトが好きすぎて何個も作ってますがw

こんなのもcssだけで実装できます！
大きさや位置を変えるだけでかなり印象が変わるのすごいな🔥

#毎日アニメーション
#TANE_be_animation

https://t.co/ac2LYqsDAj