はなゐ

フリーランスのマークアップ・フロントエンドエンジニア / とにかくコードを書くのが大好き！ / 1児の子育て奮闘中 / ひろクリギルド @HiroCreGuild 運営

[はなゐ @87oui]

ウェブサイトをAstroでリニューアルしました！ サイコー！の日かつとても縁起のいい日に公開できてよかったです。ひそかにファンだった知人イラストレーターさんにイラストを描いてもらい、見よう見まねで動かしてみました。かなりシンプルなサイトですが見てねー！
https://t.co/W0AC339TTU

[＠IT - アットマーク・アイティ @atmark_it]

BacklogをCLIから操作　ヌーラボ開発者が「bee」をOSSで公開
https://t.co/kunQKkFmg5

[はなゐ @87oui]

今までTypeScriptでinterfaceとtypeどっち使えばいいんだっけ…？と雰囲気で使っていたので改めて調べた📝
interfaceは複数回宣言できて全部マージされてしまうので可読性が下がる可能性がある。typeはそれがなく、かつ&でつなげば異なる型を組み合わせて使えるので、普通に使う分にはtypeが良さげ

[たけた/モンブラン @monbraninc]

【WORKS】
くまWEBさんのコーポレートサイトを制作しました。
「コーダーってヒーローだ！」をコンセプトに、ロゴやキャラクター、漫画まで、遊び心いっぱいの世界観に仕上げています。
https://t.co/R6GsQuOOMc

[長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro @hiro_ghap1]

CSSのclamp()で、タイポグラフィとSpacingのFluid Scaleをまとめて作れるジェネレーターを作りました。

最小・最大の画面幅を決めるだけで、実際の見た目とCSSを確認できます。

中間サイズをリニアに確認できるジェネレーターってなかなか無い（と思う）ので、ぜひ使ってみてください！

[長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro @hiro_ghap1]

はみ出てる犯人は、お前だー！

100vw、Flexのmin-width、長いURL、固定幅画像、絶対配置。
Viewportからはみ出したよくある原因を検出し、要素と超過量を表示するHorizontal Overflow Finderです。

ブックマークに登録して自分のサイトですぐに試せます（ブックマークレット）。

[はなゐ @87oui]

returnキーでグループ（フレーム）内の全ての要素を選択、shift + returnキーで親グループ（フレーム）を選択、これめっちゃ便利！ もっと早く知りたかった😂 #ひろクリギルド #Figma

[はなゐ @87oui]

ローカルで作ったデザインを別の共有デザインへコピペするとスタイルやコンポーネントのリンクが切れてしまうので危険😱 #ひろクリギルド #Figma

[はなゐ @87oui]

「見出しに使われとる色ならそらprimaryよ！ そんなん決まりや！」
「俺もそう思うてんけどな、同じ色やのにHEXで指定されとんねん」
「ほな違うか…」
#ひろクリギルド #Figma

[マスベ サチ @masube_sachi]

いよいよ本日開催🎉
Friends of Figma Osaka Leader として活動されているお二人に、デザイナー・コーダー双方の視点から

✅ 権限問題、どうすればいい？
✅ 申し送りはどうやって伝える？
✅ 役立つFigmaアプデ情報も！

など、「これが知りたかった」ポイントを教えていただける2時間です！

[はなゐ @87oui]

#ひろクリギルド Figmaオンライン勉強会、このあとすぐ！ 私も参加してモリモリ学ぶぞ〜

[ひろしまクリエイターズギルド（ひろクリギルド） @HiroCreGuild]

＼今夜20時スタート！／
お申し込みは本日23:59まで！

Figmaを「なんとなく使う」から、
実装に必要な情報を「読み取れる」へ。
コーダーが知っておきたいFigmaの基本と、デザイナーが知っておきたい“意図が伝わるデータ”の作り方を学びます。

今夜見られなくても、アーカイブ視聴OK！
本当に価値あるセミナーなので、全てのコーダー＆デザイナーにご受講いただきたい❤️‍🔥
見逃す🖐️は ないですよ〜！！！

▼詳細・お申し込み
https://t.co/icnibBjaEu

#ひろクリギルド #Figma #フロントエンド #デザイナー

[ひろしまクリエイターズギルド（ひろクリギルド） @HiroCreGuild]

＼今夜20時スタート！／
お申し込みは本日23:59まで！

Figmaを「なんとなく使う」から、
実装に必要な情報を「読み取れる」へ。
コーダーが知っておきたいFigmaの基本と、デザイナーが知っておきたい“意図が伝わるデータ”の作り方を学びます。

今夜見られなくても、アーカイブ視聴OK！
本当に価値あるセミナーなので、全てのコーダー＆デザイナーにご受講いただきたい❤️‍🔥
見逃す🖐️は ないですよ〜！！！

▼詳細・お申し込み
https://t.co/icnibBjaEu

#ひろクリギルド #Figma #フロントエンド #デザイナー

[TAK @tak_dcxi]

海外のCSS強い人に伝えて褒められたテクニックがあるんですが、`border-radius: calc(sign(100lvw - 100%) * 40px)`のように border-radius を定義すると要素が画面いっぱいのときに角丸を消すというものがあります。

[はなゐ @87oui]

@ymnk4919 それじゃあ二割蕎麦だよ！😂

[はなゐ @87oui]

書いてて思ったけどHTML手打ちってなんか蕎麦やうどんみたいだね

[関山翔太｜薬事のラストワンマイル @shotasekiyama]

特商法のダークパターン規制案、通販事業者は要チェックです。最終確認画面に表示すべき内容自体は既に義務化されていますが、今回さらに「表示方法」まで規制するというもの。購入完了後のアップセルについても、変更前後の内容を対照させる等して、変更箇所を明示することを義務付ける方向で検討中。通販事業者は今後、UI・購入導線の見直しも必要になりそうです。

[スドー🍞 @stdaux]

HTML職人の朝は早い。ひとつひとつ精魂こめてタグを手打ちするため，早朝から沐浴潔斎して精神集中をはかるのだ。

[はなゐ @87oui]

HTML手打ちから管理画面を使ったノーコードになり、AIを使って管理画面すら不要になる時代か〜…

[おざけん @ozaken_AI]

私のサイトを作り直しました。
https://t.co/FBbqdwT6S8

これまで STUDIO で運用していたものを、Astro + microCMS + Cloudflare Pages に移しました。

見た目より先に決めたのは「更新が止まらないこと」。

正直なところ、登壇やメディア掲載の報告をサイトに上げるのを、ずっと後回しにしていました。管理画面を開くのが億劫、というだけの理由です。

なので今回は、そこを一番に作りました。

「◯◯に登壇しました、上げといて」とClaude Codeに伝えるだけで、GitHub Actions が microCMS に登録して、Webhook が Cloudflare を叩いて、数分でサイトに出る。管理画面を開かなくてよくなりました。

デザインは墨色と、大きな明朝で組んでいます。
よければ覗いてみてください。

[にしはら フロントエンドエンジニア@z-index完全に理解した @crayfisher_zari]

ついにFirefoxも先週text-boxに対応したので、全モダンブラザでCSSの上下余白トリミングが使えるようになりました。

普及率の問題は少し残りますが、約2年半前にFigmaに搭載されても実用上難ありだったこの機能が日の目を見るときがきました。

[トミナガハルキ | フリーランス歴10年な人 @asobodesign]

ダークパターンが注目を集めているので、ご家族で「ダークパターンって何？」が楽しく学べるサイトを作ってみました。ダークパターンの屋台を巡って・見破り、スタンプを集めよう！
https://t.co/CBnpi3WhPm