CSSの新機能を早く使ってみたいと思うかもしれませんが、その前に古いCSSのメンテナンスをしなくてはと思っている人にお勧めの無料ツールを紹介します。CSSをコピペするだけで、現在では必要のない古いCSSのハックを検出し、W3Cの仕様に準拠したCSSを提案してくれます。 ReliCSS ReliCSSは、古いブラウザ固有のCSSハックを識別し、デベロッパーが現在の仕様に準拠したCSSに置き換えることができるように設計されたCSSハックの検出ツールです。 このツールの目的は、クリーンでメンテナンス性の高いCSSを記述できるよう支援したいと考えたもので、古いCSSとモダンCSSとの間のギャップを埋めることを目指しています。

はじめに モチベーション pnpm が提供するセキュリティ機能 strictDepBuilds allowBuilds trustPolicy trustPolicyExcludeblockExoticSubdeps 実際の移行手順 移行してみての所感 まとめ はじめに こんにちは、クラウドサインでフロントエンドエンジニアをしています篠田 (@tttttt_621_s) です。 普段のソフトウェア開発において、OSS の活用は欠かせません。クラウドサインも多くの OSS に支えられています。 しかし一方で、OSS には一定のリスクもあります。2025 年を振り返ると、npm パッケージにおけるサプライチェーン攻撃がたびたび話題になりました。本記事では、サプライチェーン攻撃への対策の 1 つとして npm から pnpm へ移行した経緯とその過程で得た知見を共有します。 モチベーション

各Skillの詳細解説 1.Playwright Browser Automation 概要 ClaudeがPlaywrightを使用してブラウザ自動化を実行するSkill。事前に用意されたスクリプトに制限されず、ユーザーの要求に応じてカスタムのPlaywrightコードをその場で記述・実行できる。 こんなときに使う Webサイトのテストを行いたいとき ブラウザ操作を自動化したいときフロントエンドのUIテストやデバッグが必要なとき 具体的なユースケース ログインフローのテスト フォーム入力・送信の自動化 レスポンシブデザインの検証(複数ビューポートでのスクリーンショット取得) リンク切れのチェック E2Eテストの実行 使用例 2. prompt-engineering 概要 LLMのパフォーマンス、信頼性、制御性を最大化するための高度なプロンプトエンジニアリング技術を提供するSkill

jQueryの時代 発端は学生時代に遡ります。Web制作の授業で初めてWebに触れたのですが、当時はまだ古き良きjQueryの時代でした。HTML、CSS、JavaScriptの3ファイル構成で、classを介してそれぞれを繋げていくスタイル。私はこれが嫌いでした。 単純に、面倒だったのです。 「関心の分離」というメリットを説かれましたが、気の利いた反論が思いつかず、その場では引き下がりました。しかし、全く納得していませんでした。構造・装飾・振る舞いを分離するという思想は理解できます。ただ、ひとつのボタンの見た目を変えるために3つのファイルを行き来する体験が、本当に「正しい設計」なのか。私にはそうは思えませんでした。Vue.jsとの出会い 社会人2年目で、本格的にフロントエンド開発に携わり始めました。Vue.js(v2)でした。 素晴らしいと思いました。リアクティブがどうとか、仮想DOM

typography.md タイポグラフィ font-familyフォントは Web サイトの印象に直結するため、一概にこれが良いとは言えない。 特にこれと言った指定がされていない場合は font-family: sans-serif のみで良い。Windows 11/10 では 2025 年のアップデートにより Noto Sans JP が標準搭載された。色々と問題があった游ゴシックの呪縛から解放されたのは大きい。Android はメーカーにより削除されている可能性はあるが、そうでない場合は原則的に Noto Sans CJK JP が適用される。Mac/iOS はヒラギノ角ゴ ProN が適用される。 アップデートによるフォントの変更の懸念はあるものの、ディスクリシアの方々は UD デジタル教科書体などの読みやすいフォントを設定している可能性があるため、アクセシビリティの観点で

ただ今御紹介いただきました清水でございます。 今日の講演では、昨今、米中対立や、アメリカとウクライナの資源協定の中で話題になっているレアアースとはどのようなものなのか、また、中国が供給の大半を握っているレアアースのサプライチェーンはどうなっているのか御紹介しながら、外交の材料としてどのように使われているのか、企業にとってどのようなインパクトがあるのかといったことについてもお話ししたいと思います。 私はもともと地質学を専攻していましたので、どちらかというと技術系の人間なのですが、最近は、経済産業省、環境省、外務省、内閣府の委託調査や、自動車、電子機器など製造業のリサーチコンサルティング業務のほか、ISO/TC323(Circular Economy)、ISO/TC298(Rare Earth)などでISOの規格原案作成にも携わっております。 また、資源が限られている日本にとって本当の問題は何

Jujutsu(jj)完全ガイド:Gitを超える次世代バージョン管理システムの実践活用法 はじめに Jujutsu(ジュジュツ、通称jj)は、Googleのエンジニアによって開発された次世代のバージョン管理システムです。「Gitと100%互換性がありながら、より使いやすい」という一見矛盾した目標を見事に実現しています。本記事では、Jujutsuの基本概念から実践的な活用方法、さらにはAIツールとの並列開発まで、包括的に解説します。 目次 なぜJujutsuなのか?5分で分かる革新性 30秒で始めるJujutsu Gitユーザーが最初に知るべき5つの違い 実践:日常開発でのJujutsu活用法 コンフリクト処理の新しい考え方 GitとJujutsuの併用パターンAIツールとの並列開発 アーキテクチャ解説(上級者向け) よくある質問と移行ガイド なぜJujutsuなのか? Gitの問題を解

株式会社ファストコーディング 営業の長谷川です。お客様とお話ししていて気づいたことや、営業現場で見てきたことを書いていっております。 今回のテーマはフロントエンド開発やコーディング代行に限らない話になりますが、「スケジュール遅延」です。お客様からよくこんな質問をいただくんです。「なんでWeb制作ってこんなに遅れるの?」「最初に聞いた納期と全然違うんだけど」って。 正直に申し上げますと、技術的な問題で遅れることは実はあまりないんです。むしろ、遅延の原因の大半は「人間側の事情」なんですよね。今日は、営業として何百件ものプロジェクトを見てきた中で気づいた、スケジュールが遅れる本当の理由をお話しします。 遅延の原因ベスト5まず、営業現場で何度も見てきた遅延の原因トップ5を紹介します。技術的な問題ではなく、すべて「人」が関わる部分です。 承認フローの遅れ – 決裁者への確認待ちが1週間、2週間…素材

CSSにおけるmaskというプロパティによってデザインを実装可能にしてくれたケースが3つありましたので、私見をしたためていきます。 既にCSSのmaskプロパティについてご存知の方はmaskが可能にしてくれるデザインパターンへマスクという行為およびCSSのmaskについてこれから知りたい方は前提知識へ 前提知識 そもそも「マスク」とは 左の画像を、星の形にくり抜きたい。そのくり抜く行為を、この記事内では「マスク」と呼びます。 ※くり抜く行為はクリッピングであり、それを用いてマスクを行うのであればクリッピングマスクなのではないかというもっともな主張があると思いますが、CSSのプロパティ名と統一して呼称するために、この記事内だけではそう呼ぶことにしました。 画像同士を重ねて、「この形にくり抜きたい」という形を「この形に繰り抜かれたい」という画像に対してマスクすると その形にくり抜かれます。

git reset 過去の状態に戻る(履歴を変更する) 用途 現在のブランチの履歴を「やり直し」たいときに使用。 動作 指定したコミットまで履歴を削除したり、ステージングエリアやワークツリーを変更。 種類 --soft: 履歴だけ戻す(ファイルの内容やステージングはそのまま)。 --mixed: 履歴を戻し、ステージングエリアもリセット(デフォルト動作)。 --hard: 履歴、ステージング、作業ディレクトリすべて戻す(変更が完全に消える)。 # HEADを1つ前のコミットに戻す(ファイル内容はそのまま) git reset --soft HEAD~1 ポイント 履歴を修正する際に使うため、チームで共有された履歴には使わない方が良い。 https://www.r-staffing.co.jp/engineer/entry/20191129_1 git revert 用途 過去のコミットを「
TanStack Start は TanStack Router と Vite をベースにしたフルスタックReact フレームワークです。型安全なルーティング、サーバーサイドレンダリング、ストリーミング、サーバー関数、API ルートなどの機能を提供します。この記事では TanStack Start の概要と基本的な使い方を紹介します。 TanStack Start は TanStack Router と Vite をベースにしたフルスタックReact フレームワークです。TanStack Router が提供する型安全なルーティング機能に加えて、サーバーサイドレンダリング(SSR), ストリーミング, サーバー関数,API ルートなどの機能を備えています。この記事では TanStack Start の概要と基本的な使い方を紹介します。TanStack Start はNext.js

Cursorは12月11日(現地時間)、Cursor Browserの新機能としてビジュアルエディタをリリースした。このエディタは、WebアプリケーションのUI、コードベース、編集ツールを一つのウィンドウで扱えるのが特徴だ。 利用者は、DOMツリー上で要素をドラッグ&ドロップしてレイアウトを変更したり、サイドバーからコンポーネントの状態やプロパティを直接テスト・調整できる。スタイルの変更も、スライダーやカラーパレットなどのビジュアルコントロールでライブに行うことが可能だ。 また、編集したい場所をクリックし、変更内容を記述すると、エージェントが関連コンポーネントを特定して自動的にコードを修正する機能も搭載した。これにより、設計と実装の間の作業のギャップを解消し、より直感的なUI開発を支援する。

グーグルの「Gmail」では2026年1月から、他社メールサービスの受信機能(POP方式)の提供を終了する。タイムリミットまで1ヵ月を切るなか、メールサービスの提供企業では、ユーザーへの案内が続いている。グーグルの「Gmail」では2026年1月から、他社メールサービスの受信機能(POP方式)の提供を終了する。タイムリミットまで1ヵ月を切るなか、メールサービスの提供企業では、ユーザーへの案内が続いている。 最新記事:Gmailで外部メールが受信できなくなる!? 12月中にやるべき対策はこちら レンタルサーバー事業などを手がける「エックスサーバー」は12月5日、サポート情報として本件に関する案内を公開した。 当該ページでは、同社のサービスで作成されたメールアドレスが、Gmail側の仕様変更により、Gmail上で受信できなくなる場合があることに言及。あわせて、自身のメールアドレスが影響を受け

その②:通知をONにする モデルが強化されるにつれて、長時間の作業を自律的に行えるようになっています。その間、人間がずっと見ている必要はないため、作業が終わったら通知で連絡をもらうように設定しましょう。 個人的に参考になったブログはこちらです。 その③:音声入力を活用する 音声入力なら、タイピングの 3 〜 4 倍の情報量を、背景や意図を含めて自然に伝えられます。入力の負担が減って思考に集中できます。 個人的に参考になった動画はこちらです。 2. CLAUDE.md を作成し、育てる CLAUDE.md とは? CLAUDE.md は、Claude にプロジェクトの背景知識(コンテキスト)を持たせるための設定ファイルです。通常、AI は会話のたびにプロジェクトの構成やルール(コーディング規約など)を忘れてしまうため、毎回説明する必要があります。しかし、プロジェクトのルートディレクトリに C

生成AI の活用が急速に普及する一方で、大学生の皆さんからは「正しいAI の使い方をもっと学びたい」「AI にどういう場面で頼ってもいいのかわからない」といった、活用に関する声も寄せられています。 この背景を踏まえ、今年 7 月に学生の皆さんが Gemini をはじめとするAI ツールを最大限活用できるよう、全国の大学生および大学院生を対象とした「GoogleAI 学生アンバサダープログラム」を発表しました。 8 月から全国 200以上の大学から 800 名以上の学生が本プログラムに参加され、AI を安全かつ効果的に活用するスキルを習得し、大学生ならではの活用方法を考え共有されています。 これまでの 4 ヶ月の活動を通して 数百件もの Gemini 活用アイデアが寄せられました。 この度、これらの活用アイデアを一冊のハンドブックとしてまとめました。 ハンドブックのデジタル版は、こ

こんにちは。組織開発室に所属し、組織開発を担当しているてぃーびーです。 Gemini 3.0 および NanoBanana Pro のリリースによって画像生成の質がかなり上がりました。 NanoBanana Pro - Gemini のAI画像生成&写真編集ツール 今までは複雑な図の出力には難があったり、日本語の出力が崩れやすかったのですが、このあたりの質があがり実用レベルで使える範囲が広がってきました。 そこで、この記事では、Gemini の NanoBanana Pro でどの程度の図解が可能か試してみます。 利用方法 Gemini で入力する際に『思考モード』『画像を作成』の両方を選択する。 図解の例 ベン図の作成仕事における Will, Can, Must をベン図にします。 入力
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く