DECODE
Webエンジニアktktが、Webアプリ制作・AI活用・技術解説を 「使える道具」にデコードするブログ。
新着記事
特集
2026年10月のWebアップデート
9記事CSS・JavaScript・画像形式・開発ツール・AIコーディングの変化を、実務で使うかどうかの判断つきで整理した特集です。気になる記事から読んでも、上から順に読んでも理解できるように並べています。
更新 2026.10.19
Safari 27の新機能を実装で確認
4記事Safari 27で使えるようになったCSS・アクセシビリティ・画像最適化の機能を、コードとフォールバックつきで確認する特集です。Chromeとの対応差がある機能は、無理に全面採用せず「使う場面」を限定して紹介しています。
更新 2026.09.17
~about
$ cat profile.txt
フルスタックWebエンジニア。モダンなフロントエンドとAPI開発が得意。
Next.jsを中心にwebアプリ制作、AI活用支援、動画編集など活動しています。
$ ls stack/
JavaScriptTypeScriptReactNext.jsNode.js
$ ls occupation/
Web DeveloperVideo EditorAI Prompt Engineer
$ _
BLOG
技術メモNEW
Import TextがChrome 155で解禁──テキスト資産をESモジュールとして読む
シェーダー、HTMLテンプレート、CSVのフィクスチャ。フロントエンドでは、JavaScript以外のテキストファイルを読み込みたい場面がよくあります。これまでは`fetch()`で取得するか、ビルドツールのraw importに頼るのが一般的でした。Chrome 155が、TC39のImport Text（Stage 3）に対応しました。`import ... with { type: &qu…
続きを読む→
NEW
CSS Grid Lanesはmasonryを置き換えるか──Safari先行、Chrome追随の現在地
高さの異なるカードを隙間なく並べるmasonryレイアウトは、長らくJavaScriptライブラリの領域でした。CSS Gridのmasonry実装は議論が続き、一時は`grid-template-rows: masonry`という案もありましたが、最終的に`display: grid-lanes…
技術メモ技術メモ
約8分NEW
contrast-color()がBaselineに──動く背景色でも文字コントラストを自動で守る
背景色に応じて文字色を白にするか黒にするか。デザインシステムを作っていると、この組み合わせ表を何度も更新した経験があるはずです。ブランドカラーが増え、ユーザーがテーマ色を選べるようになると、組み合わせはすぐに破綻します。CSSの`cont…
約8分NEW
text-boxとsibling-count()がBaselineに──見出し揃えとスタッガーをCSSだけで解決
2026年8月、Firefox 154の対応によって、`text-box`と`sibling-count()` / `sibling-index()`がBaseline Newly availableになりました。地味な機能に見えますが、…
約10分NEW
Customizable SelectがSafari 27に到達──JSなしでselectを自由にデザインする
フォームのセレクトボックスを「サイトのデザインに合わせたい」。そう思って`appearance: none`で矢印を消し、`div`と`button`で自作セレクトを組み立てた経験は、フロントエンドなら一度はあるはずです。見た目は整っても…
約8分NEW
JPEG XLがChrome・Firefoxで解禁──画像配信はAVIFとどう使い分けるか
2026年10月、画像配信の選択肢が大きく変わりました。Chrome 155（10月6日）がJPEG XLのデコードに対応し、Firefox 158（10月13日）がJPEG XLをデフォルト有効化しました。Safariは17.0から部分…
コラム
約9分NEW
GPT-6.1 SolとClaude Haiku 5.5──AIコーディングのコスト構造が変わる
2026年9月29日、OpenAIがGPT-6.1 Solをリリースしました。GPT-6 Astraに近い性能を、Astraの約5分の1の価格で提供するモデルです。続く10月7日にはAnthropicがClaude Haiku 5.5を投…
約8分NEW
Figma Code LayersとSpecsが変える設計→実装──Config India 2026の実務インパクト
2026年10月15日、FigmaはConfig Indiaで新しい制作フローを発表しました。中心はCode Layers、Figma Specs、そしてFigma MCPの強化です。デザインキャンバスの上でコードを動かし、仕様を書き、A…
MORE STORIES
