池田泰延さんが語る、「CSSエキスパートへの道しるべ」 — CSSの入門、学習法から最新トレンドまで
本連載は、「 エキスパートへの道しるべ（Load to Expert） 」をテーマとして、初級者がエキスパートになるためのヒントを、日本を代表するエキスパートの方々に伺う企画です。 Webの表現を根本から支えるCSS。時代とともにその機能は拡張され、もはや単なる装飾のための言語ではなくなっています。今回インタビューに応じてくださったのは、株式会社ICSでフロントエンドのテクニカルディレクションを担い、CSSの進化と表現における可能性を追い続けている池田泰延さん。 インタビューを通じて、CSSとの出会いから、表現力を支える技術の広がり、学習のアプローチ、注目する最新トピックまで、深く掘り下げていきます。 池田さんをTechFeed上でフォローしよう！ 池田泰延さん — CSSを軸に、幅広い技術で表現力を支えるエキスパート ——それではまず、簡単に自己紹介をお願いします。 池田: 株式会社IC
【CSS】リンクの色をJavaScriptから取得できるようになる、予定 - Qiita
このgetComputedStyle().colorは、リンク先を訪れたことがあるか否かに関わらず、必ず『未訪問』の色になります。 色だけでなく、訪問済か否かを識別可能なあらゆる情報は取得不可能です。 実は2010年ごろまではリンク色を取得することが可能で、そのためトラッキングやターゲティング広告に悪用されていました。 これが問題視された結果、Firefoxを皮切りにChrome・Safariもリンク先が訪問済か否かをJavaScriptから取得できないように改修されました。 現在では、リンク先を訪問したかどうかを一般的な方法では調べることはできません。 とはいえこれらの対策は場当たり的なものであったため、先日根本的な解決策としてPartitioning :visited links historyという対応が行われました。 詳しくは先日解説を書いたのでそちらを見てください。 簡単にまとめ
鹿野壮さんが語る、「CSSエキスパートへの道しるべ」 — CSSの入門、学習法から最新トレンドまで
本連載は、「 エキスパートへの道しるべ（Load to Expert） 」をテーマとして、初級者がエキスパートになるためのヒントを、日本を代表するエキスパートの方々に伺う企画です。 ウェブデザインの世界で欠かせない技術であるCSS。その奥深さと進化し続ける特性から、習得には時間と情熱が必要とされています。本記事では、スタートアップのプロダクトエンジニアとして活躍する鹿野壮氏に、CSSのエキスパートになるまでの道のりと、初心者が知っておくべき学習方法について詳しく伺いました。 鹿野さんをTechFeed上でフォローしよう！ CSSの魅力と進化 ――まずは、簡単に自己紹介をお願いします。 鹿野: 私は鹿野壮と申します。九州大学芸術工学部音響設計学科を卒業後、現在はUbieという会社でプロダクトエンジニアとして働いています。主にフロントエンドを中心に、バックエンドやアプリ開発も行っています。 ―
It's time for modern CSS to kill the SPA
Native CSS transitions have quietly killed the strongest argument for client-side routing. Yet people keep building terrible apps instead of performant websites. The app-like fallacy “Make it feel like an app.” At some point during the scoping process, someone says the words. A CMO. A digital lead. A brand manager. And with that single phrase, the architecture is locked in: it’ll be an SPA. Probab
値の補間計算を簡潔に記述できる CSS の `progress` 関数
CSS の `progress` 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。流体タイポグラフィやレスポンシブなレイアウト調整に利用できます。流体タイポグラフィは `clamp` 関数を使用して実装することもできますが、`progress` 関数を使用することでより意図を明確に記述できます。この記事では、CSS の `progress` 関数の構文と使用例について解説します。 CSS の progress 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。フォントサイズをレスポンシブに調整する流体タイポグラフィ（Fluid typography）や、画面サイズに応じたレイアウトの調整、スクロール量に応じたプログレスバーの表示など、さまざまな場面で利用できます。progress 関数自体で新しい機能を提供できるわけではありませんが、既存の記述方法と比較してよ
Claude Code でモックアップを HTML と Tailwind CSS (CDN 版) で作る
Claude Code で HTML と Tailwind CSS (CDN 版) でモックアップを作るのが便利という話をお手伝い先の CTO から教えて貰って、試したところとても良かったので雑に書いて行く。 そもそも HTML はなんとなくわかってるが、 CSS はまったく書けないのでモックアップは今までは Figma を使って作っていた。なぜ Figma なのかというと、単に Figma 有名だし、おそらく多くの人が使ってるっぽいから情報が多いのだろうというだけ。 Figma の解説書を読んだり、Figma 公式 YouTube を見たりして色々学んで、本当に最低限は作れるようになった。実際自社サービスを作る時に開発担当者には Figma でこんなデザインがよいですみたいなものを作り、共有して作業をお願いしていた。 Claude Code でのモックアップ作成Claude Code を
これは朗報！ width: 100%;より便利なstretchキーワードが使えるようになります、Chrome 138で新しく追加された6個のCSSの機能
先日リリースされたChrome 138で追加された、CSSの新しい機能6個を紹介します。今回のアップデートで目玉は、stretchキーワードをはじめ、新しい関数がいくつかサポートされました。Web制作者は要チェックです！ 特にstretchキーワードは、朗報です。 width: calc(100% - 48px);で全幅からマージン分を引いていたのをwidth: stretch;だけで利用可能な幅いっぱいを占めるようにできます。 New in Chrome 138 Chrome 138 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに width: 100%;のより良い代替手段width: stretch; CSSの符号関連関数: abs(), sign() OSレベルの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
