最近のCSS、全然追えてなかった。ここ1〜2年で使えるようになった機能10選
この記事では、2024〜2025年にかけて主要ブラウザで使えるようになったCSS（一部HTML）の機能を10個紹介します。「昔はセレクターとか頑張って追いかけてたけど、最近は全然追えてない」という方を対象としています。 それぞれの機能について、目的・できること・昔のやり方・注意点をまとめました。コードを見ながら「こんなの使えるようになったのか」と感じてもらえたら嬉しいです。 1. CSS Nesting（ネイティブCSSネスト） 目的 SassやLESSなどのプリプロセッサなしで、CSSにネスト（入れ子）構造を書けるようにすることです。 できること セレクターを親子関係で入れ子にして記述できます。& を使って親セレクターを参照します。 .card { padding: 1rem; background: #fff; & .title { font-size: 1.25rem; font-w
デザイナー不要論の正体｜坪田 朋
「デザイナー不要論」がまた燃えている。 AIがUIをつくれる、ロゴも生成できる、コードも書ける。だったらデザイナーはいらないんじゃないか。 SNSでは定期的にこの話題が燃えて、「デザインはそんな単純じゃない」と反論もあれば、「もうFigma触らなくても画面つくれる」と煽る声もあり、毎回それなりに盛り上がるけど、結論は出ないまま次の話題に流れていく。 最近この不安を相談されることが増えたので、同じ不安を感じてきた当事者として、いま何が起きているかを僕なりに言語化してみた。 Claude Codeを使って圧倒されたこと僕はビジネス価値やユーザーニーズを理解してUIデザインに落とし込むのが得意だけど、クエリを書いてユーザー行動を分析する仕事はアナリストほど得意ではなかった。 それ以外でも苦手分野の作業があれば、重要だとわかっているのに腰が重くて後回しにしていたこともあった。 それが今では、自然言
天気予報つき時計 by ritsuka
[5:4] 短期予報のみ [5:4] 短期予報と週間予報（デザインA） [5:4] 短期予報と週間予報（デザインB） [16:9] 短期予報のみ [スマホ横長全画面] 短期予報のみ
Claude Code を安全に使おう【社内勉強会スライド】 | DevelopersIO
社内のチームメンバー(クラウド事業本部コンサルティング部)向けに 「 Claude Code を安全に使おう勉強会 」を開催しました。 Claude Code をセキュアに使う上での、 基本的な考え方や権限/サンドボックス機能の紹介、簡単なデモを実施しました。 DevelopersIO向けに調整したスライドを掲載します。 以下勉強会で連携した設定サンプルです。 Claude Code を安全に使おう勉強会: 補足資料 - Gist スライドの内容:テキスト情報を以降に記載します。参考になれば幸いです。 イントロ 勉強会の目的やアジェンダ、スコープについて話します。 勉強会の目的 Claude Code (に限らず、AIエージェント) はとても便利です。 しかしリスクもあり、暴走もします。 この勉強会では、 Claude Codeが適切な範囲で適切に動けるような、 ガードレールの敷き方 を学
Claude Code を Level 5 まで育てたら、開発が「指示と確認だけ」になった — 実ファイル構成で解説 - Qiita
この記事は約5分で読めます。 筆者プロフィール: ソフトウェアエンジニア。「知った気にならない。いつまでも学び続ける」を信条に、業務と個人開発の両輪で技術を磨いています。AI 駆動開発で複数の個人開発アプリを構築・運用中。 👉 ポートフォリオ: 筆者ホームページ Claude Code を使い始めたけど、毎回同じ指示を書いていませんか？ CLAUDE.md・Skills・Hooks・Agents の 5 段階で「育てる」ことで、人間の作業は「指示と確認だけ」になります。この記事では、実際のファイル構成とコードを添えて、その全過程をお見せします。 「AI にコードを書かせている」と「AI と開発している」は違う Claude Code を導入した当初、私は毎回こんなプロンプトを書いていました。
書類を撮影→テキストを抽出して「メモ」に保存。iPhoneの「ショートカット」便利レシピ。Apple Intelligenceのアクションを活用しよう– iPhone AI Hack 第3回
iOS 26で登場した、「ショートカット」のApple Intelligenceのアクション 病院の明細や荷物の送り状、買い物のレシートや領収書など、デジタル化が進んだ現代でも、まだ紙で受け取るものは少なくありません。きちんと保存している人もいる一方で、つい山積みにしてしまったり、受け取ってすぐ、あるいは一定期間が過ぎたあとに処分してしまったりする人も多いのではないでしょうか。 しかし、そのようにしていると、ふと「あれ、どこの病院だっけ？ いつ送ったんだっけ？ いくらだったっけ？」と思ったときに、確認に時間がかかったり、処分してしまってわからなくなることがあります。とはいえ、こうした事態を避けるために、紙の情報をいちいち書き留めたり、デジタル化して保存したりするのは面倒です。 そこでおすすめしたいのが、Apple Intelligenceの活用です。iPhoneに標準搭載されている「ショー
中学校での議論紛糾をまとめた次女らの提案。「意見を通したい時に持ち点を消費する」仕組み｜レバテックLAB - レバテックLAB
しんざき システムエンジニア、PM、ケーナ奏者、三児の父。南米民族音楽の演奏が趣味。仕事・育児・演奏活動の傍ら、レトロゲーム雑記ブログ「不倒城」を20年程運営している。 @shinzaki ブログ：「不倒城」 こんにちは、しんざきです。あっという間にお花見の季節も過ぎてしまいましたね。 今回、私は何も口出ししていないのですが、娘の話を聞いていたら面白いなーと思ったので書かせてください。この記事で書きたいことは、大体以下のようなことです。 以上です。よろしくお願いします。 さて、書きたいことは最初に全部書いてしまったので、後はざっくばらんにいきましょう。 次女が中学校で苦戦した「誰も意見をゆずらない」グループワーク 長女次女は中学生なのですが、授業以外の活動についても重視している学校らしく、毎年様々なイベントが開催されます。 先日は発表コンクールのようなものがありました。班ごとに発表テーマと
令和8年度東京大学学部入学式 祝辞（劇作家・演出家・役者 野田 秀樹 様） | 東京大学
令和8年度東京大学学部入学式 祝辞 東京大学への入学おめでとうございます。私は劇作家、演出家、そして舞台役者をやっています野田秀樹と申します。およそ半世紀前、50年くらい前ですね、本大学の文科一類に入学しながら、演劇の沼に嵌りこみ、六年かけて中退した人間です。そんな本校中退者にこの晴れがましい入学式でお祝いの言葉を述べさせるという大学側の大英断が意味するものは、入学したばかりの皆さんに中退してもいいんだぞ～と言うメッセージではありません。安心して下さい。恐らく私に、お祝いに面白い作り話の一つでもしてやってくれ、みたいなことなのかと思っています。 そこで優秀な頭脳を持つ皆さんの脳内の記憶のようなものについてお話しすることにいたします。ただ私は脳学者ではないので、話はめちゃくちゃです。 今日ここにいる3000人近い東大生は、それぞれ違う場所に生まれ育ってこの武道館に集って来ています。どれだけ似
デザインシステムを丸ごと Skills にする
デザインシステムを Skills にしたら使いやすくなった サイボウズのプロダクトである kintone では、社内向けに kintone Design System と呼ばれるデザインシステムが提供されています。 AI Agent を用いた開発向けに、このデザインシステムの Skills 化を試みたところ、提供側・利用側ともに非常に取り回しやすい形となったため、事例として紹介します。 デザインシステム x MCP デザインシステムをコーディング用の AI Agent から活用する際、一例としては MCP の提供が挙げられます。 一時期話題になった印象で、個人的にも、以下の記事を参考にさせて頂いた記憶があります。 なぜ MCP が効いたか デザインシステム x MCP のパターンが普及した際の背景事情として、エージェントにナレッジを与える方法は限られていた、ということが挙げられます。 AG
AIのお世話が辛いのでUsecase Design Docを書く - CADDi Tech Blog
はじめに 何が辛かったのか 毎回詳細なプロンプトを書くのが辛い AIエージェントのタスク完了まで面倒を見るのが辛い これらを並列で実行しているのが辛い 解決方針 詳細な設計ドキュメントの作り込み Usecase Design Doc 細かい実装指示・計画・実行をAIエージェントに委譲 タスクの分割方針 AIエージェントへの実装委譲 AIのお世話からの解放 - 得られた成果 開発速度の向上 PRレビュー自体の認知負荷の軽減 現在直面している課題 設計書の細かい誤りの増幅 設計とPRレビューのボトルネック化 まとめ はじめに こんにちは。CADDi Quoteのサーバーサイドの開発を担当しています、majimacchoです。私たちのチームでは全員がAIエージェントを活用して実装しPR作成まで行なっています。 私自身を含め、全く自分でコードを書かなくなったメンバーもいます。AIエージェントを使っ
公園のローラー滑り台を子どもと一緒に15回すべった結果思い知らされた話「もう何も感じない」共感の声続々
瑛(あきら) @akiakiakira117 これ途中ローラーなくて、鉄板のとことかあったりする滑り台あって、真夏は尻が痛いし熱いしで一回で尻がﾀﾋぬ。 x.com/chiyuca919/sta… 2026-04-07 06:12:31
10万円、3万円、1万円以下の炊飯器と土鍋でそれぞれ炊いた米を食べ比べてみた結果…「土鍋ダントツ一位」「やっぱ土鍋かぁ～」
逸般人（いつぱんじん） @tachi_tuteto_ @alpina_channel このポストより前の流れが分からないまま、まぜっ返すと あとはあれかな、 家庭用精米器で玄米を精米したての米か、そこらのスーパーで精米済みで売ってたものかの比較がないですかね (注意！ネタです) 2026-04-06 06:52:48
CSSのlinear()でUIが軽快になる! スプリングアニメーション活用術13選 - ICS MEDIA
CSSのlinear()関数を使うと動きの自由度が高まります。バネのような動きをするスプリングアニメーションもlinear()で実現できることのひとつ。これを使うと、UIにイキイキとした躍動感を加えられ、ユーザーに軽快な印象や心地よいフィードバックを与えることができます。 linear()で作った動きはCSSトランジションやCSSアニメーションに利用します。ウェブページのどの部品にも使いやすく、ボタンやタブ、トグルスイッチのような小さなUIを心地よく見せたいときに便利です。 この記事では次の内容を紹介します。 スプリングアニメーションを適用したUI演出 linear()の値を調整する方法 スプリングアニメーションのニーズの高まり 汎用的なUI スプリングアニメーションを使ったオリジナルのデモを紹介していきます。まずは小さな部品に役立つ例をみていきましょう。 セグメントボタン セグメントボタ
ホルムズ通航料1バレル1ドルか 5段階の友好度で条件変動 | NEWSjp
【イスタンブール共同】米ブルームバーグ通信は1日、イランが事実上封鎖するホルムズ海峡を巡り、通航料として原油1バレル当たり1ドル（約160円）程度を人民元か暗号資産（仮想通貨）で徴収していると報じた。船舶に「友好国」の国旗を掲げて指定航路を通航するよう要求。イランは国を5段階に分類しており、友好度に応じて条件が変動する可能性がある。 VLCCと呼ばれる大型のタンカーは通常、約200万バレルの積載能力を持つ。 20隻の海峡通航をイランに認められたパキスタン政府が、大手取引業者に、船籍をパキスタンに変えて同国旗を掲げるよう持ちかけていたという。パキスタン籍の船舶はペルシャ湾内に数隻しかなかった。パキスタンは米イランの戦闘終結に向けた仲介役を担っている。 通航には、船籍や目的地などの情報をイラン革命防衛隊とつながりのある仲介業者に提供する必要がある。審査の後、通航料の協議が始まる。支払いが終われ
CSSのデバッグやスキルアップに役立つ！ グラデーションや背景など複雑に記述されたCSSを読みやすくし、デバッグ・編集できる無料ツール -bg.layers
CSSで装飾したテキストやボタンのデバッグは、各プロパティやその値もそれほど複雑なCSSではないので簡単です。 下記のようにレイヤーが重なったグラデーションのデバッグはどうでしょうか。CSSもかなり複雑で、コードを見ただけでデバッグするのはかなり難しいと思います。そんな複雑なCSSでも簡単にデバッグ・編集できる無料ツールを紹介します。 bg.layers bg.layers -GitHub bg.layersは、CSSで実装された背景レイヤーをデバッグ・編集するためのオンラインツールです。backgroundをはじめ、background-image, background-color, background-positionなど、background-*プロパティの挙動を確認し、各レイヤーを確認したり、レイヤーの順番を変更・非表示にしたり、編集したCSSをコピーすることもできます。
Claude Code のベストプラクティス - Claude Code Docs
環境設定から並列セッションでのスケーリングまで、Claude Code を最大限に活用するためのヒントとパターン。 Claude Code は agentic coding 環境です。質問に答えて待つチャットボットとは異なり、Claude Code はファイルを読み取り、コマンドを実行し、変更を加え、あなたが見守ったり、方向を変えたり、完全に任せたりしながら、自律的に問題を解決できます。 これはあなたの作業方法を変えます。自分でコードを書いて Claude にレビューしてもらう代わりに、やりたいことを説明すると Claude がそれをどのように構築するかを考え出します。Claude は探索し、計画し、実装します。 しかし、この自律性にも学習曲線があります。Claude は理解する必要がある特定の制約の中で動作します。 このガイドでは、Anthropic の内部チームと、様々なコードベース、
CSS Responsive Rules
css-responsive.md CSS Responsive Rules 目的 レスポンシブ実装の判断基準を明確にし、不要なブレイクポイントとコード量を最小化する。 CSS はブラウザへの「提案」であり、厳密な命令ではない。ブラウザに委ねられる仕事は委ねる。 基本方針: エスカレーション順序 レスポンシブ対応は以下の優先順序で検討する。上位で解決できるなら下位は使わない。 すべての要素がレスポンシブである必要はない。最初に「そもそもレスポンシブにすべきか」を判断する。 0. 静的（Static） 本質的に固定サイズの要素はレスポンシブにしない。 タグ・バッジ・ラベルなど、内容量が少なく固定的な小さな要素 アイコン（1em でフォントサイズに追従するだけで十分） 装飾的なボーダーや区切り線 固定サイズのアバターやロゴマーク これらに clamp() やクエリを適用するのは過剰であり、コー
イラつくバルーンを滅ぼそう - Object.create(null)
みなさんにもマウスホバーで表示されるバルーン内のリンクが開けなくてイラついた経験があるかと思います. リンクにカーソルを移動しようとすると閉じてしまうバルーン 丁寧に吹き出しの三角形の部分を通ったときだけリンクに辿り着ける. イライラ棒か? こんな体験は今すぐ滅ぼしましょう. Web なら floating-ui を使うと, そもそものバルーン自体の実装も簡単にできますし, この問題への対策も 1 行で済みます. 対策 1. バルーンが閉じるのを遅延させる リンクにカーソルを合わせようとするとマウスホバーが外れ, その瞬間にバルーンが閉じてしまうのが問題の原因です. ということで, 素朴にはバルーンが閉じるまでに遅延を入れてあげると良いですね. floating-ui での実装では delay を追加するだけです. // ... const hover = useHover(context
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Notion | Where teams and agents work together
Claude Code 完全リファレンス — 全機能網羅+意外と知らない便利機能トップ10 - Qiita
