Reactで大量描画しても60fps出すためのパフォーマンスチューニング術 - SmartHR Tech Blog
こんにちは、SmartHRでプロダクトエンジニアをやっている @Tokky0425 です。 みなさんは普段組織で働いていますか？僕は組織で働いています。 組織で働くにあたって便利なもの、ありますよね。そう、組織図です。 SmartHR にも組織図の機能があるのですが、部署数や従業員数が多いとブラウザ上での操作が重くなってしまうという問題がありました。 最近「数万人規模の組織図での 60fps」を目指してこの組織図機能の描画パフォーマンス改善を行ったので、その中で実践したフロントエンド開発における大量描画処理の Tips を共有します。(React を前提としています) そもそも問題はどこにあるのか 最近まで、SmartHRの組織図機能は数万人規模の企業で十分に使えるような作りになっていませんでした。というのも、対象従業員数が数万人を超えてくると、いろんな操作が著しく重くなり、実用に耐える操
はじめに 今回は、現代のWEB開発で最も使用されている言語/フレームワークであるTypeScript/React/Next.jsについて学ぶために、私がおすすめしたい学習資料についてご紹介したいと思います。 非常に有用で、初心者から中級者、上級者まで幅広い層に向けた内容が含まれていますので、時間を見つけて是非読んでみてください。 ※TypeScript/React/Next.jsって何？という方のために、簡単に以下にそれぞれご説明いたします。 TypeScript Microsoftが開発した、JavaScriptを拡張したプログラミング言語。JavaScriptに比べ、型安全性の向上によるエラーの早期発見や、型注釈でコードの意図を明確にすることによる可読性/メンテナンス性の向上が期待できる。現代のWEB開発においては、ほとんどの開発者がJavaScriptからTypeScriptへ移行し
MCPを最大限に活用した次世代のWebアプリ開発 Next.js、Honoは Context7 MCP 最新のコードやスニペット デザインを v0やReaddy(=AIデザイン生成Webサービス)で作成。 フロントエンドを Figma MCP 画面デザイン等 バックエンドを Supabase MCP DB操作等 資料を filesystem MCP 指定したフォルダに資料や1ファイル化したファイルの読み込み テストをPlaywright MCP 自然言語でのテストコードの自動生成 Git管理を GitHub MCP GitHubの自動操作等 保守運用を Raygun MCP でエラーの自動追跡 サブスクライブを Stripe MCP Stripeでの実装 多様なAIモデルを GitHub Copilot Agent mode、Claude Sonnet 3.5 3.7、GPT-4oでコード
HTMLとCSSで勉強すべきことがしっかりまとめられている、アクセシビリティやパフォーマンスを考慮した実装を学べる良書 -モダンHTML＆CSS 現場の新標準ガイド
※本ページは、アフィリエイト広告を利用しています。 最新のHTMLとCSSをしっかり学びたい人にお勧めの解説書を紹介します。 HTMLとCSSの最新の仕様に基づき、必要な知識を身につけ、アクセシビリティやパフォーマンスに考慮した実践的なテクニックをしっかり学べます。Web制作者が持っておいて間違いのない一冊です。 HTMLとCSSは機能が増えて自由度が高くなった分、複雑化しています。またアクセシビリティについての需要もかなり高まっています。 著者はHTMLやCSSをはじめ、JavaScriptの解説書などWeb制作系の解説書で、はずれ無しのエビスコム様。ていねいで詳しい解説は分かりやすく、実践的なサンプルもたくさんあるので、かなり役立つと思います。 本書は最新のHTMLとCSSの仕様に基づいて、アクセシビリティやパフォーマンスにも注目したセマンティックな実装をていねいに詳しく解説した解説書
こんにちは、小田（@linyows）です。さくらインターネットは、リモートワーク中心の勤務スタイルなので、日々、自宅の自室で作業しています。できるだけ快適に働けるよう、仕事部屋の環境にはこだわっています。最近は、好みのフレグランスとして「檜オイル」にすっかりハマっていて、香りの力に助けられています。 さて、今回は私たちさくらインターネット研究所が取り組んだブログサイトの全面リニューアルについてご紹介します。2024年3月12日に公開した新サイトの裏側では、課題整理からブランド設計、データ移行、実装まで、さまざまなチャレンジがありました。この記事では、なぜリニューアルしたのか、どう実現したのか、どんな工夫をしたのかを余すところなくお伝えします。 なぜリニューアルが必要だったのか？研究所では、これまでWordPressを使ってブログを運用していましたが、以下のような課題が浮かび上がっていました
チーム全員がオーナーシップを発揮してページ表示速度を4倍にした話 - DMM Developers Blog
はじめに 我々が抱えていた課題 表示速度改善プロジェクト プロジェクトのスタート Catchpoint Chromeの開発者ツール ページ表示速度の高速化に向けた取り組み １）CSS、JavaScriptの外部ファイル化 ２）EmotionからCSS Modulesへの移行 ３）スクリプトの読み込み条件変更および遅延読み込み プロジェクトの成果 難しかったこと/どのように乗り越えたか 漠然とした不安に立ち向かう力 開発チーム間の連携とエンジニアの主体性 ミッションの異なる組織を納得させるコミュニケーション 成功要因：オーナーシップの重要性 オーナーシップを発揮するチーム作り チーム内で階層を作らず、情報差分もゼロに 小さい成功体験の積み重ね まとめ はじめに EXNOAプラットフォーム戦略室の小林です。 250タイトル以上のゲームを配信するプラットフォーム「DMM GAMES」でPMをして
テキストをキレイに折り返す「text-wrap: pretty」を使うべき理由をSafariのWebkit開発チームが公式で解説
iPhoneやiPad、Macでインターネットを楽しむためのウェブブラウザがSafariで、このSafariの開発中のテクノロジーをいち早く試すことができるプレビュー版が「Safari Technology Preview」です。このSafari Technology Previewにテキストを適切な文字数で折り返す「text-wrap: pretty」が導入されたのですが、その理由をWebkit開発チームが解説しています。 Better typography with text-wrap pretty | WebKit https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/ 「text-wrap」はCSSの一括指定プロパティで、要素の中のテキストを折り返す方法を制御するものです。この中でも「text-w
Update 1.99.1: The update addresses these security issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the March 2025 release of Visual Studio Code. There are many updates in this version that we hope you'll like, some of the key highlights include: Agent mode Agent mode is available in VS Code Stable. Enable it by setting chat.agent.en
バクラク事業部Platform Engineering部SREグループの id:itkq です。先日「春のLT祭り！」と題してエンジニアLT会を実施しました。その様子をレポートします。 エンジニアLT会とは LayerXではおよそ3ヶ月に1回のペースで、有志によるエンジニアLT会を開催しています。技術の幅を広げること・事業部を超えた交流を目的としています。 基本的に「技術の話」以上のテーマの縛りはなく、今回もフリースタイルでした。オフラインの会場を用意しつつ、オンライン同時配信も行っています。 また、いくらかの予算を確保しており、軽食とドリンクを用意しつつゆるりとした雰囲気で進行しています。 会の雰囲気 バクラク事業部、FinTech事業部 (MDM)、AI・LLM事業部のすべての事業部からエンジニアが参加してくれました。オフラインが総勢30名程度、オンラインが10名程度、発表者は20名程
みなさんこんにちは。calloc134 です。今回も面白いものを作ったので是非宣伝させてください。 日本のインターネット文化を形作った 2 ちゃんねるスタイルの掲示板を、令和最新の技術スタックで再構築してみました。 今回は、そんな掲示板「VakKarma」について解説していきます。 はじめに スレッドフロート型掲示板とは スレッドフロート型掲示板は、2 ちゃんねるや 5 ちゃんねるなどでおなじみの掲示板スタイルです。 新しい投稿（レス）が付いたスレッドが、自動的に掲示板の一覧の最上位に浮上（フロート）する仕組みを持つ電子掲示板です。 スレッドフロート型掲示板（スレッドフロートがたけいじばん）とは、最新のコメント投稿がなされたスレッドがその掲示板のスレッド群の最上位に表示される機能を持つ電子掲示板を指す。フローティングスレッド型掲示板とも言う。 (https://ja.wikipedia.o
※本ページは、アフィリエイト広告を利用しています。 Amazonで、先週末からKindleセールが開催しています！ 今回のセールは出版社合同で、Webや紙のデザイン、HTML/CSSなどWeb制作の解説書、ディレクション...記事の続きを読む
はじめに みなさんはカルーセルを作りたいと思ったことはありますか？ 今までは、ライブラリーを使ったりしても、アクセシビリティの担保ができてなかったり、 少し複雑なJSを書かなくちゃいけなかったりと、カルーセルを自作するのは大変でした。 しかし、Chrome 135 以降では、CSS Overflow Module Level 5 が適応され、CSSだけで、カルーセルが作れるようになりました。 そのため、この記事では、CSSだけでカルーセルを作る方法を紹介しようと思います。 CSSだけで作るカルーセル カルーセルのコンテナを作る まずは、このようにカルーセルのコンテナをつくります。 <ul class="carousel"> <li class="carousel-item">1</li> <li class="carousel-item">2</li> <li class="carouse
サイトを爆速に！LCP改善でGoogleに愛されるコアウェブバイタル向上の具体的な実現方法 | マーケティング | ブログ | 東京のWeb制作会社・ホームページ制作｜QUOITWORKS Inc.（株式会社クオートワークス）
クオートワークスのブログ 東京のWeb制作会社 株式会社クオートワークスのブログです。ここではWeb制作におけるノウハウやナレッジ、ビジネスに関する覚書などまとめて発信しております。 はじめに Webサイトの運営や制作に携わっていると、「コアウェブバイタル」や「LCP」といった言葉によく遭遇します。 しかし、その内容や重要性について知っている方は多くないのではないでしょうか？ 私もそうだったのですが、実際にWebサイトのパフォーマンスを改善するという機会があり、改めて詳しく調べてみたので、この記事でまとめてみたいと思います！ 今回の記事では、Webサイトのパフォーマンスはもちろん、SEOにも影響を与える重要な指標であるLCPについて深掘っていきたいと思います。 エンジニアの方はもちろん、企業のWeb担当者の方にも業務で参考にして頂けるようにまとめましたのでぜひご覧ください！ 第1章：サイト
Support for text-wrap: pretty just shipped in Safari Technology Preview, bringing an unprecedented level of polish to typography on the web. Let’s take a look at what the WebKit version of pretty does — it’s probably a lot more than you expect. Then, we’ll compare it to balance and the other text-wrap values to better understand when to use which one. Ideas of what makes for “good” typography are
本記事では、これらの新機能を中心に、InputManJSの検証機能を紹介していきます。 開発環境 開発環境としては、VSCode（Visual Studio Code）をインストールしておきます。そのあと、VSCodeにHTTPサーバを提供する拡張機能Live Serverをインストールします。本記事のサンプルではHTTPサーバは必須ではありませんが、ホットリロードなどが利用できるので、インストールしておくと便利です。 サンプルフォームの準備 本記事のサンプルは、HTML、CSS、JavaScriptのファイルからなるシンプルな構成なので、適当な作業フォルダを作成してそこにファイルを配置していきます。まずは、index.htmlファイルを、以下のリストの内容で作業フォルダに作成します。InputManJSを利用するにはいくつかの方法がありますが、本記事ではCDN（Content Deliv
【実践解説】Html Css Javascript Projects - Web開発で開発効率を劇的に向上 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 【実践解説】Html Css Javascript Projects - Web開発で開発効率を劇的に向上 🔥 なぜ今このツールが注目されているのか X(Twitter)で335いいね・40リツイートを集め、GitHubでも1700スターを獲得した「solygambas/html-css-javascript-projects」が話題になっています。私も実際に3週間使ってみたところ、作業時間が約35%削減され、驚くほどの効果を実感しました！このツールがなぜ開発者コミュニティで急速に広まっているのか、その理由と活用法を徹底解説します。
SEO監査に有効な「Googlebotブラウザ」の必要性（前編） | Moz - SEOとインバウンドマーケティングの実践情報
自分のウェブサイトをGooglebotに適切にクロールしてもらい、インデックス化してもらうのに苦労していないだろうか。テクニカルSEOの担当者にとって、（特にJavaScriptを多用しているサイトにおける）レンダリングの問題は、検索順位の低下やコンテンツの非表示につながることもある。 そのような場合に必要なのが、Chrome（またはChrome Canary）を使ってGooglebotをエミュレートすることだ。この方法では、ユーザーが閲覧する内容と検索エンジンが閲覧する内容の違いを明らかにして、サイトを想定通りに動作させられる。 Googlebotを偽装するかどうかにかかわらず、特定のテストブラウザを使えば、テクニカル監査の効率と精度が向上する。 このガイドでは、 手元で使えるGooglebotブラウザの作り方（Chrome利用）レンダリング問題のトラブルシューティングSEO監査の改善方
RailsアプリケーションをWebAssembly化してブラウザ内で実行する（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Ruby on Rails on WebAssembly: a guide to full-stack in‑browser action—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2025/02/18 原著者: Vladimir Dementyev（首席バックエンドエンジニア）、Travis Turner（技術記事編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita ブラウザだけで完全なブログ機能を実行できるとしたらどうなるか、想像してみてください。フロント
Xで「Chrome 135からCSSだけでカルーセルを実装できる」という投稿を見かけたので実際に試してみました。 Chrome for DevelopersでもCSS を使用したカルーセルとして紹介されていました。 この記事によるとCSS Overflow Module Level 5の機能として、スクロールを操作するボタンやマーカーが実装できるようになったとのこと。これを使えばJavaScriptなしのCSSだけでカルーセルが実装できるみたいです。 完成形 最初に最終的に作成したカルーセルを置いておきます。すべてJavaScriptなしで実装されています。（Google Chromeの135以降で確認してください） Xで動画も投稿しているので、動きだけだったらこちらでも確認できます。 基本的な実装 元記事ではリッチなサンプルが紹介されていますが、実装が紹介されているのは基本的な部分だった
Quasar Alphaとは？謎の高性能モデルがステルス登場して世界中で話題に｜まさお@未経験からプロまでAI活用
2025年4月初旬、OpenRouterというLLMプラットフォームに突如現れた新モデル「Quasar Alpha（クエーサー・アルファ）」。 プレスリリースや大々的な告知もない“ステルス公開”という形ながら、一部の開発者コミュニティを中心に「異例の高性能モデルが現れた」と大きな話題になっています。 本記事では、このQuasar Alphaがいかに注目されているのか、その性能や背景、噂される正体などの最新情報をわかりやすくまとめます。 ステルス公開？Quasar Alphaの概要Quasar Alphaは、OpenRouterが「パートナー研究所のプレリリース長文コンテキストモデル」として公開したAIモデルです。 なんといっても特徴は、なんと1,000,000トークン（英単語換算で数十万語～百数十万語クラス）の超長文コンテキストを扱えるという圧倒的なスケーラビリティ。 桁外れの入力ウィンド
Google Chrome 136、23年来のプライバシー脆弱性「ブラウザ履歴スニッフィング」をついに修正へ - イノベトピア
Google Chrome 136、23年来のプライバシー脆弱性「ブラウザ履歴スニッフィング」をついに修正へ Last Updated on 2025-04-08 07:48 by admin Googleは2025年4月23日にリリース予定のChrome 136で、23年間存在していたブラウザ履歴スニッフィングと呼ばれるサイドチャネル攻撃の脆弱性を修正する。この機能はすでに4月3日にChromeベータチャンネルにリリースされている。 この攻撃手法は、ウェブページ上のリンクの色を読み取ることで、ユーザーが過去に特定のページを訪問したかどうかを判別するものである。CSSの:visited疑似クラスを利用し、訪問済みリンクに特定の色（通常は紫色）を適用する仕組みを悪用している。 この問題は2000年にプリンストン大学のEdward FeltenとMichael Schneiderによる「Tim
Expert used ChatGPT-4o to create a replica of his passport in just 5 minutes bypassing KYC
The US Treasury’s OCC disclosed an undetected major email breach for over a year | U.S. CISA adds Gladinet CentreStack and ZTA Microsoft Windows Common Log File System (CLFS) Driver flaws to its Known Exploited Vulnerabilities catalog | WhatsApp fixed a spoofing flaw that could enable Remote Code Execution | Everest ransomware group’s Tor leak site offline after a defacement | Google fixed two act
Senior Developer Skills in the AI Age: Leveraging Experience for Better Results • Manuel Kießling
The Log Book of Manuel Kießling Covers topics on architecting, building, deploying and running software and systems for the web based on open source tools with lean methodologies. Abstract Embedded into powerful IDEs like Cursor, large-language models are now able to act as effective Coding Assistants that can significantly enhance the output and abilities of professional software engineering team
Amazon Web Services ブログ Amplify Hosting がスキュー保護を発表 Web アプリケーションの開発とデプロイにおける一般的な課題は、クライアントとサーバーリソース間のバージョンのずれです。2025 年 3 月 13 日、AWS Amplify Hosting にデプロイされたアプリケーション向けのデプロイメントスキュー保護機能（更新期間中の新旧バージョン混在時のシステム安定性を確保する機能）を発表できることを嬉しく思います。この機能は、アプリケーションのデプロイ中にエンドユーザーがシームレスな体験を得られるよう支援します。 課題 現代の Web アプリケーションは、多数の静的アセットとサーバーサイドコンポーネントからなる複雑なシステムであり、これらすべてが連携して動作する必要があります。1 時間に複数回のデプロイが一般的となっている世界では、バージョンの互
PyScriptを使うと、ブラウザ上で手軽にPythonを実行できる。JavaScriptを使わなくても、大抵のことがPythonだけで実現できる。図形の描画ができるのでゲームも開発できる。ライフゲームを実装してみて、使い方を確認してみよう。 PyScriptでライフゲームを作ってみよう PyScriptとは何だろう？ PyScriptとは、Pythonをブラウザ上で直接実行できるようにしたフレームワークだ。HTMLに<script type="py">…</script>と記述するだけで、Pythonをブラウザで動かすことができる。 本連載の110回目(https://news.mynavi.jp/techplus/article/zeropython-110/)でも、簡単にPyScriptについて紹介したが、その後も順調にバージョンアップを重ねている。仕組み的には、PythonをWeb
2025年版・ブログを書く環境を一新してみた（主にVS Code＋Copilot） - かたくりかたこりかたつむり
今までブログを書くのは以下の記事の通り、主にDynalist・補助でTyporaを使っていた。 katakurikatakori.hatenablog.com ただ「ライティングでも生成AIを使う機会が増えてきたし、そろそろ環境を変えてえなー」と思って、いい機会なので一新してみた。 結論から先に書くと、以下のラインナップになった。 Dynalist（アウトライナー）：メモをなぐり書き VS Code（IDE）：Github Copilotでライティング補助、Typora拡張でMarkdownを書く ※特に断りなく書いてるけどWin環境です 選ばれたのはVS Codeでした Typoraがなきゃヤダヤダヤダ 書き方の大まかな流れ モバイル環境での執筆 まとめ 選ばれたのはVS Codeでした code.visualstudio.com というわけで、Visual Studio Code（VS
【Azure】App Service on Linuxで応答時のコンテンツ圧縮をカスタマイズして性能を高める（NGINX編）
Webサーバの性能を高める手段の一つとして、応答時のコンテンツ圧縮が挙げられる。クライアントに応答を返す際にコンテンツを圧縮することで、ネットワーク帯域の消費を抑えたり、応答時間を短縮したり、といった効果が期待できる。 Azureの「App Service on Linux」でも、デフォルトで「GZIP」による圧縮が「オン」なっている。ただ、圧縮されるのはHTMLだけで、圧縮率も最小レベルに限定されている。 そこで本Tech TIPSでは、Webサーバの構築／運用担当者を対象として、App Service内蔵のNGINXの設定を変更することで、コンテンツのGZIP圧縮をカスタマイズして、より性能を高める方法を紹介しよう。App Serviceの機能なので追加コストは不要だ。 App Service内蔵のNGINXの設定変更については、「【Azure】App ServiceのWebサーバ『N
Safari Technology Preview Release 216 is now available for download for macOS Sequoia and macOS Sonoma. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update. This release includes WebKit changes between: 291468@main…292534@main Accessibility Resolved Issues Fixed presentational images with empty alt attributes to be ignored b
雨の日の釣り師-5310
2025.04.09 06:09 更新 ・ Classic "Il était un roi de Thule - Faust , Jewel aria - Darina Takova , O Dieu! que je de bijoux !、・ Jazz Archie Shepp - Damn If I Know (The Stroller)、・ Pops Sina (Soumbouya) · Salif Keïta、・ African ♫ VIVIANE CHIDID - PAS LE CHOIX (Official Video)、 お気に入り マルチ検索、ﾄﾞﾒｲﾝ内検索7 俳句 哲学者・小説家の箴言 X.cpm ＧＡＭＥ : Puzzle、ジグソーパズル、絵合わせ、2、ギリシャのネコ、離島の猫、アドリア地方のネコ、マヨルカ島のネコ、5並べ、ハノイの塔、ゲーム1、テ
雨の日の釣り師-5311
2025.04.10 07:01 更新 ・ Classic Márquez: Danzón Nr. 2 ∙ hr-Sinfonieorchester ∙ Andrés Orozco-Estrada、・ Jazz Enrico Rava and Ran Blake : Laura - Vertigo mix、・ Pops Moussolou By Salif Keita OFFICIAL VIDEO、・ African ♫ Viviane Chidid - No Stress (Clip Officiel)、 お気に入り マルチ検索、ﾄﾞﾒｲﾝ内検索7 俳句 哲学者・小説家の箴言 X.cpm ＧＡＭＥ : Puzzle、ジグソーパズル、絵合わせ、2、ギリシャのネコ、離島の猫、アドリア地方のネコ、マヨルカ島のネコ、5並べ、ハノイの塔、ゲーム1、テトリス2 2025年度のカレン
2024年 Webシステム技術選定
自社にある3年ほど開発したノーコードシステムをリアルなコードにフルリプレイスするにあたって、システムおよび Web アプリの構成を検討したのでその結論と検討過程。 今後新しく入ってくるメンバー向けに ADR 的なものがあると良いと思うので記録しておく（半年ほど開発してみて振り返り、アップデートもかけたいと思う）。 まとめ アーキテクチャ GraphQL API でフロントエンドとバックエンドを分割 バックエンドとフロントエンドで TypeScript を採用 全体をモノレポで管理する バックエンドもフロントエンドもサーバーは同一プロセスで動かし、同時にデプロイする サーバーを全て Vercel に乗せることでブランチごとに環境を作れるようにする データベースもブランチ機能のあるサーバーレスを使う（予定） 決済システムと認証システムは外部化 フロントエンド UI ライブラリは React を
雨の日の釣り師-5308
2025.04.07 06:15 更新 ・ Classic Erik Satie ~1889~ Gnossienne n°5、・ Jazz Dizzy Gillespie & John Coltrane, Live at Birdland 1951 - Unknown Radio Broadcast | bernie's bootlegs、・ Pops Chitaunhike · Bhundu Boys、・ African ♫ New Single - ST VALENTIN、 お気に入り マルチ検索、ﾄﾞﾒｲﾝ内検索7 俳句 哲学者・小説家の箴言 X.cpm ＧＡＭＥ : Puzzle、ジグソーパズル、絵合わせ、2、ギリシャのネコ、離島の猫、アドリア地方のネコ、マヨルカ島のネコ、5並べ、ハノイの塔、ゲーム1、テトリス2 2025年度のカレンダー、ご自由に活用あれ！。20
現代のWebに、今もっとも「不要」な技術、HTTP Clock 。 なんと、JavaScript無しで現在時刻を表示しています！ 一体何が起きているのでしょうか。 コアアイデア ¶ 私は、「とあるROM Writerのサポート済み製品一覧ページ 」を眺めていました。 .txt なのに、「じわじわと」読み込まれていくではありませんか。 これ自体はサーバーが遅すぎる事による残念な現象ですが、Webブラウザがレスポンス完了前にレンダリングを開始することを思い出しました。 そこで、「HTMLをストリーミングする」ことを思いつきました。 「HTMLをストリーミングする」とは？ ¶ まず、以下のHTMLを見てください。 <!DOCTYPE HTML> <html> <body> <h1>Hello</h1> <!-- CUT LINE --> <style>h1 { display: none; }<
Tailwind CSS v4.1: Text shadows, masks, and tons more I wasn't sure it would ever happen but we did it — we released a version of Tailwind CSS that includes text-shadow utilities. Tailwind CSS v4.1 is here and it's packed with new utilities, variants, and developer experience improvements that will help you (or your LLM, you coward) build even better interactive experiences. Here's all the best st
雨の日の釣り師-5306
2025.04.05 06:05 更新 ・ Classic 外山／Ｎ響：三善晃：ヴァイオリン協奏曲、・ Jazz Kalaparusha Maurice McIntyre - Forces And Feelings (full album+bonus) 1972、・ Pops Yanoubé · Adama Dramé、・ African ♫ Habib Koité - Batoumambé、 お気に入り マルチ検索、ﾄﾞﾒｲﾝ内検索7 俳句 哲学者・小説家の箴言 X.cpm ＧＡＭＥ : Puzzle、ジグソーパズル、絵合わせ、2、ギリシャのネコ、離島の猫、アドリア地方のネコ、マヨルカ島のネコ、5並べ、ハノイの塔、ゲーム1、テトリス2 2025年度のカレンダー、ご自由に活用あれ！。2025年度カレンダー（html版）、月間カレンダー（JavaScript版）、2025年
ここは エクセルVBA、HTML、CSS(スタイルシート) の設定方法をまとめたページです。 エクセル VBA(excel マクロ)は仕事で、HTML・CSS・CGIは趣味で使っています。 自分でも使いやすくまとめたつもりなので、皆さんのお役にたてれば嬉しいです。 (管理人：犬神犬)
会社と時間に縛られず稼ぐ 「不労所得」を生む3つのスキルと事業アイデア（Forbes JAPAN） - Yahoo!ニュース
次は大きな需要があるあのスキル■2. ウェブデザイン 米労働統計局によると、ウェブデザイナーやウェブ開発者への需要は8％増加しており、他の職種に対する平均的な需要を上回っている。需要が大きいことから、ウェブデザインは非常に有効な不労所得源だ。需要増の背景には、日々多くの個人事業や中小の事業が立ち上げられていることがある。 個人事業主らはウェブサイトやコンバージョン率の高いランディングページ、アプリを必要としている。これらは顧客の獲得と満足度アップの流れを生み出すことに役立つため、個人事業主らは喜んで投資する。 ＜2025年、習得価値のあるウェブデザインとウェブ開発のスキル＞ ・コード不要のウェブデザインツール ・UX・UIデザイン ・Python（パイソン） ・HTML ・CSS ・JavaScript（ジャバスクリプト） ・API統合 ＜ウェブデザイナー向け不労所得アイデア＞ ・ウェブサ
生成AIツールでおすすめのサービスは、画像生成ではAdobe FireflyやStable Diffusion、Midjourney、文章生成ではChatGPTやClaude、Geminiなどです。 本記事では生成AIのおすすめ10選をご紹介するとともに、生成AIのおすすめの活用法や使用時の注意点を詳しく解説します。 生成AIとは、学習済みのデータを基に、新しいコンテンツを生成する人工知能の技術のことです。テキストや画像、音声、プログラムのコードなど幅広いコンテンツを自動的に生成できます。 よく知られている生成AIツールとしては、主にテキストを生成する「ChatGPT」や画像を生成する「DALL-E」などが挙げられ、ビジネスからプライベートまで幅広く利用されています。 生成AIの仕組み 生成AIの基本的な仕組みは、以下のとおりです。 与えられたプロンプト（指示）を解析する 入力されたデー
はじめに 第1章でViteの基本と初期設定を学びました。今回は、Viteのプロジェクト構造を詳しく見て、その仕組みを理解します。Reactを使った簡単なページを作りながら、Viteの特徴を体験します。 目標 Viteのプロジェクト構造を把握する 開発サーバーとビルドプロセスの仕組みを知る 簡単なページを作成する Viteのプロジェクト構造 Viteプロジェクトのデフォルト構造は以下の通り： my-vite-app/ ├── node_modules/ # 依存関係 ├── public/ # 静的ファイル │ └── vite.svg # サンプル画像 ├── src/ # ソースコード │ ├── App.jsx # メインコンポーネント │ ├── main.jsx # アプリのエントリー │ └── index.css # グローバルスタイル ├── index.html # HTM
（＊価格は掲載時のものです。購入時にご確認ください。）
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript/React/Next.jsおすすめ学習資料のご紹介
便利なMCP 2025年4月版 (もう古いコードの提案はしなくなるMCP他) - Qiita
WordPressからNotion + Next.jsへ 研究所ブログを全面リニューアル
March 2025 (version 1.99)
春のLT祭り！を開催しました - LayerX エンジニアブログ
最新技術スタックで伝統掲示板を再構築: HonoXでスレッドフロート型掲示板を作った話
Kindle本の特大セールが開催！ Figmaの解説書、UIデザイン、Web制作、ディレクションの良書がたくさん半額です
【CSS】CSSだけで作るカルーセル - Qiita
Better typography with text-wrap pretty
入力フォームの面倒なバリデーションチェックを手早く実装！「InputManJS」の検証機能の活用術
Chrome135の新機能を使ってCSSだけで実装するカルーセルを試してみた
Amplify Hosting がスキュー保護を発表 | Amazon Web Services
ゼロからはじめるPython(126) ブラウザで動くPython「PyScript」でライフゲームを作ってみよう
Release Notes for Safari Technology Preview 216
HTTP Clockを支える技術 ACT.1 - yanorei32の雑記
Tailwind CSS v4.1: Text shadows, masks, and tons more
《VBA・CSS》入門実用Tips集 ＋α
生成AIのおすすめ10選！画像や文章を生成するAIツールの活用法も解説
Viteで始める高速Web開発 | 第2章: プロジェクト構造と仕組み - Qiita
HTML5/CSS3のニュースやTIPSなどのまとめ (2025年4月7日)