発行
CodeGridの恒例となった年末年始座談会。2024〜2025年は4回シリーズでお届けします。今年もWebフレームワークの動向から話を始めましょう。さまざまなWebフレームワークが林立していますが、共通の傾向も見えてきました。
この記事では、比較的新しい擬似要素について解説します。後編ではテキストのスペルチェックや特定のテキストの強調表示などを実現できる擬似要素を解説します。
AIサービスが続々と登場し、どんな業種でもAIの活用は避けられない状況になってきました。AIをどのように捉え、どのように活用するか、ピクセルグリッドがAIとどのように付き合っているのかを紹介します。
発行
デザイントークンは実際にどのように設計したらいいのでしょうか。ここでは「色」の管理を事例として、デザイントークンをどのように設計したらいいかを解説します。
2024年も終わろうとしています。今年1年のCodeGridのまとめとして、人気があった記事ランキングを一挙にご紹介します。時間がなくて、気になっていたけれど読めなかった記事があるかもしれません。年末年始にゆっくりどうぞ。
施策意図を具現化するために、まずは対象となる施策に関連した情報を集めて理解を深めます。ここでズレてしまうと、後からどんなにがんばってもUIを狙った的に届けることはできませんので、しっかりと自分が納得できるところまで考えましょう。
発行
この記事では、2018年に書かれたシリーズから2024年現在までの間に登場した、比較的新しい擬似要素について解説します。前編ではdetails要素や、typeがfileのinput要素などUIを伴った要素のスタイリングをとりあげます。
作ったUIが狙った的から外れてしまっている事態は、プロダクト提供側にとっても利用者にとっても良いことがありません。そうならないように、UIデザイナーに限らずUIに携わる関係者全員で考える必要があります。
2024年の中央寄せといえば、やはりFlexboxとCSS Gridの面目躍如といえるでしょう。最新のプロパティの特徴を十分理解して、しっかりと活用しましょう。
発行
Figma Japanのデザイナーアドボケートである谷 拓樹さんに「デザイナーとエンジニアの共通の語彙を持つために」をテーマに寄稿いただきました。その鍵となる「デザイントークン」について解説します。
自分が書いたコードに自信がないとき、確かめる一つの手段に「テストを書くこと」があります。テストライブラリなど、便利なツールもありますが、そもそもテストとは何か、何をテストするのか、というところから始めてみましょう。
後編ではCursorでどのようにコーディングするのかを見ます。期待はずれのコードが出てくることもありますが、何回かやり取りをすると、希望に近いものが提案されます。