font-size-rem.md font-size には rem を使うべきかどうかについての見解 結論 可能であれば Chrome の文字拡大機能をサポートするためにremを使用する。 ただし、実際に Chrome の文字拡大機能を「極大」にして検証することが必須条件。これに時間的・労働的なコストを割けないのならpxを使用したほうがいい。 結論に至った背景 「font-size には rem を使いましょう」という教えが独り歩きしており、実際に Chrome の文字拡大機能を「極大」にして検証していない人が多いため。 font-size だけ rem を指定すればいいという訳ではなく、文字拡大に伴ったレイアウトの変更に耐えうる設計とする必要がある。つまり、font-size だけでなく文字の拡大に依存する余白やサイズなどもフォントサイズを基準とした相対値（remやemなど）で指定する必
ページの内容を繰り返さず、画像の目的を伝えるaltテキストを書こう。ビジュアルの説明よりも意味を重視しよう。 Alt Text: Not Always Needed by Emma Cionca and Tanner Kohler on November 15, 2024 日本語版2025年5月27日公開 altテキスト（代替テキスト）とは、スクリーンリーダーのユーザーが画像の内容を理解できるようにするためのメタデータである。altテキストの書き方に関するガイドラインの多くは、ウェブ上の個々の画像をすべてのユーザーにとってアクセシブルで理解できるものにする方法について説明している。これは言うほど単純なことではない。というのも、ユーザーはページ上の多くの要素とインタラクトしながら複雑なタスクを実行する過程で、altテキストに遭遇するからだ。画像はタスク全体の一部にすぎないのである。 ユーザー
2025年のモーダルの実装方法のメモ書き。 <dialog> 要素の利用を前提とします。 Web アプリケーションで UI ライブラリを利用する場合は話が変わってきます。 1年前にdialog要素を使用したモーダルウィンドウの実装例を投稿しましたが、大幅にアップデートされているため、忘れても構いません。 結論<dialog>要素の開閉は command 属性を使用する<dialog>要素の外側をクリックした際に閉じる Light dismiss 機能は closedby 属性を使用するcommand 属性と closedby 属性は Polyfill を使用する開閉時のアニメーション、背面のスクロール抑制、スクロールバーの有無によるガタツキの防止は CSS で行う方針としては極力JavaScriptを書かないことを目指します。 次のようにHTMLを書くことで<dialog>要素の開閉および
This past March we unveiled our efforts to port the TypeScript compiler and toolset to native code. This port has achieved a 10x speed-up on most projects – not just by using a natively-compiled language (Go), but also through using shared memory parallelism and concurrency where we can benefit. Since then, we have made several strides towards running on large complex real-world projects. Today, w
はじめに React Compilerを2024年7月末に導入し、2024年10月中旬からプロダクション利用を開始して現在(2025年5月中旬)に至ります これまでに起きたことや感想を共有したいと思います 前提 技術スタック Next.jsのPages Routerを使用し、サーバー側で動く処理はほぼない react-hook-formを使用 reactStrictModeはtrue 導入時にeslint-plugin-react-compilerを使った検査では違反なし 各ライブラリのバージョンアップは随時行っている // 2024年7月末の導入時 next: 15.0.0-rc.0 react: 19.0.0-rc-01172397-20240716 babel-plugin-react-compiler: 0.0.0-experimental-938cd9a-20240601 rea
ある日、メルカリのレコメンド機能で欲しかったカメラレンズが出品されているのを見つけました。相場の10％ほど安く、丁寧に使われているような商品のようでした。直前に自分が値下げ依頼した商品を他の人に買われてしまったこともあり、急いで購入したのですが、これが間違いでした。 後から確認すると、出品者は本人確認前、評価0件、出品商品は高額なカメラレンズとダミーと思われる日用品の2点のみというかなり怪しいものでした。
個人開発の一環でWebデザインのモーションのアイデアを集めたサイトを作りました。掲載されているコードは自由にお使いいただけます。 このサイトのコンセプトやどのような作りになっているのか紹介します。 サイト概要 Webデザインにおける様々な動きに注目して、そのプリミティブな要素を紹介したサイトです。個々の作例には実装コードを掲載していて、コピペで利用することもできます。内容もよく紹介されているような基礎的なものは少なく、少し改造すれば使えるような実践的なものを紹介しています。そのためHTML・CSS・JavaScriptの基本を理解している前提のレベル感になっています。 そのほかWebの動きに関するコラムやTips的な読み物もあります。 使用技術 各使用技術についてそれぞれ説明していきます。 レンダリング戦略 サイトの性質として、そう頻繁な更新やリアルタイム性が求められるものではないのでSS
JetBrainsは、今までアーリーアクセス版として提供していたAIコーディングエージェント「Junie」を一般公開し、同社が提供するIDEの全ユーザーが利用可能になったことを発表しました。 JetBrainsは、コードの補完やプロンプトによるコード生成などを行うコーディングアシスタントの「JetBrains AI Assistant」と、自律的にコードの生成や修正、テスト作成などを行うコーディングエージェントの「Junie」の2つを、主に同社のIDEと統合されたAI機能として提供しています。 Junieは今年（2025年）2月にJetBrainsから発表され、アーリーアクセス版として提供されてきました。 参考：JetBrainsも自律的にコーディングを行うAIエージェント「Junie」を発表 JunieはReadmeなどを読んで自律的にコードを生成可能 Junieは、既存のコードの文脈や
はじめに ある日のこと、私はもしくはあなたは思いつきました。そう、自分の考えを発信してみようと。それはまるで、小さな紙飛行機を窓から放り投げるような、どこまで飛ぶかわからない冒険でした。そんなわけで画面に向かい、キーボードを叩き始めたのですが、すぐに奇妙な不安が襲ってきたのです。 ほら、誰かがそっと後ろから覗き込んで「それ、間違ってるよ」とか「それって昔の話でしょ」なんて言ってくるかもしれない。もっと恐ろしいのは「もっといいやり方があるのに」という呪文めいた言葉です。そんな呪文を浴びせられたら、私はきっと透明人間になりたくなるに違いありません。 でも不思議なもので、そういう批判の声が聞こえてくるのは、実は自分の頭の中だったりするんですよね。まだ何も書いていないのに、もうすでに架空の批判者と対話している。ある意味、私たちは常に誰かと対話している生き物なのかもしれません。 そこで考えたのです。
3ヶ月経って、いくつか新しいモデルが登場したことでごっそり事情が変わりました。 ChatGPT Pro使ってましたが解約しました。o3が登場したらまた考えます。一時期解約していたGemini Advanced（Google AI Oneプレミアム？）を契約しなおしました。Claudeの年契約をしたんですがすこーし後悔しています。 追記: Gemini 2.5 Pro は今までのGemini シリーズとは明確に違うコメントとかでGeminiアレルギーの人が多そうなので追記します。実際のところ僕もそうでしたよ。過去のGeminiは、特に1.5 Proが論外なくらいハルシネーションも多く馬鹿で、使い物にならないおもちゃでした。それは事実です。2.0 Proで状況が変わり始めたものの実験モデルが続いてて、結局コイツの真価がよくわからんってなってました。 Gemini 2.5 Proを触ったことがな
Get to work quickly wherever you areGo from opening your browser to building in minutes, not hours. Import your existing repositories from GitHub, GitLab, Bitbucket, or your local machine, with support for most tech stacks. Or use the App Prototyping agent to quickly create a new application using natural language, mockups, drawing tools, and screenshots, or select from a large catalog of popular
「日本の88x31バナー保管庫」は、個人サイト全盛期に多く見られた88x31ピクセルのバナーを収集・保存・公開するアーカイブサイトです。これらのバナーは、リンク集や相互リンクなどで使用され、当時のインターネット文化を象徴する存在でした。 ここで公開しているのは、主に1990年代後半から2000年代前半にかけて、日本国内のサイトで使用されていたバナーです。海外には国を問わず収集された88x31バナーのアーカイブも存在しますが、本サイトでは収集対象を日本国内に限定することで、日本独自のネット文化に焦点を当てています。 かつて個人サイトを運営していた方にとっては、「もしかして自分のバナーがあるかも？」という小さな発見も楽しんでいただけるかもしれません。 現在、88x31バナーはほとんど目にすることがなくなりましたが、その文化的価値を記録・保存することには大きな意義があると考えています。 この保管
📣 【マップボックス・ジャパン合同会社 公認】Mapboxハンズオン1DAY in関西のお知らせ（10/25） - アドソル日進 →
弊社ではデザイナーがCSSを書いてくれるので、私はフロントエンドエンジニアながら最近はTypeScriptばかり書いていました。 しかし、フロントエンドエンジニアならCSSもしっかり学んでおかないといけないと思い、アウトプットついでにこの記事を書いています。 1. モダンCSSの現状と進化 2019-2024年に標準化された主要な機能 2019年以降、CSSには多くの革新的な機能が標準化され、JavaScriptに頼らずに実現できることが増えました。 レイアウト関連： コンテナクエリ - 親要素のサイズに基づくレスポンシブデザイン CSS Grid（サブグリッド） - ネストされたグリッドが親グリッドのトラックを継承 CSS ネスト - セレクタを入れ子構造で記述（Sassのような書き方） セレクタと制御： 親要素セレクタ (:has) - 子要素に基づいて親要素を選択 カスケードレイヤー
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに どうも。鳩胸になりたい文鳥です。 Cusorが市場を席巻している ブッチギリでの世界最速ARR $100Mに加えて先日時価総額が1兆円を超えたそうです。間違いなく売れているし今後の成長を期待される企業であるのは間違いないでしょう。 Cursorはソフトウェアエンジニア向けにAI機能を搭載したソースコード編集ソフトを提供している会社です。 上記のブログに記載したがCursorは 12人の社員 Microsoft製のVisual Studio Codeをフォークして作ったラッパーアプリ AIのモデルは開発せず、ChatGPTやCl
about project かつてWebに“動き”と“驚き”をもたらした「Flash」。その自由な表現力は、多くのクリエイターを魅了し、日本でも中村勇吾氏の「MONO*crafts（1999年）」に代表される革新的なサイトが次々と誕生しました。しかし一方で、動作の重さ、セキュリティリスク、スマートフォン時代への対応が難しいといった弱点も抱え、2020年に公式サポートは終了。これらの作品はすでに「ロストテクノロジー」となっています。 このアーカイブは、そんなFlash時代に生まれた日本のWebデザインの“片鱗”を後世に残す試みです。2007年から運営していたWebデザインギャラリーで紹介したサイトを中心に、当時のスクリーンショットとInternet Archiveのリンクを掲載しています。アーカイブにデータが残っている作品群は、当時のままのサイトを実際にご覧いただけます。 なお、2007年以
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
