発行
すべてのUIを制作者が実装する方法でセレクトボックスを作成します。作成したHTMLとCSSにJavaScriptで機能を実装していきます。まずはマウス操作に対応しましょう。
CSSのカプセル化機能を補完するために考えた命名規則を、Scoped CSSとCSS Modulesに適用し、さらなる最適化を図ります。規則の伝達性とコードの見やすさ、それぞれに比重をおいたときの命名規則も考えてみましょう。
複数の値の比較検証など、複雑な条件も表現できるZodですが、的確なエラーメッセージを返すようにするには工夫が必要です。一歩進んだカスタマイズの手法をご紹介します。
発行
ここまで、GitHub Projectsを業務管理に使う方法を紹介してきましたが、まだまだたくさんの機能があります。そこで、今回は実際に使ってみて感じた、便利なテクニックを紹介します。
CodeGridの実績に基づき、静的サイト構築にAstro、コンテンツ管理にHygraphというコンビネーションでの制作を解説します。まずは、Hygraphにコンテンツを登録し、Astroで基本的な1ページを生成し、2つのツールがどう連携するのかを掴みましょう。
情報量が多いECサイトではカルーセルUIが重宝されていますが、なぜ採用されるのでしょうか。その理由を踏まえた上で、ユーザーの操作コストを減らし、情報の一覧性を高めていく方法を探ります。
発行
Astro v2の新機能Content Collectionsでも採用されたデータ検証ライブラリZod。TypeScriptとの役割の違いに焦点を当て、基本的な使い方を解説します。
セレクトUIの見た目だけでなく、選択肢メニューも含めたすべてのUIをカスタムしていきます。まずはベースとなるHTMLとCSSの設定を見てみましょう。
「制作物の品質を上げる」ということはだれもが望むことです。そのためにできることの一つとして、ピクセルグリッドが実践しているのが「ディレクター」という役割の配置です。まずは、なぜディレクターが必要か、考えてみます。
発行
カルーセルUIを実装するときに考えなければならないあれこれを考えると、実装コストは高め。でもそれは、カルーセルUIにこだわるからかもしれない？ もしカルーセルじゃないとすれば、どんなUIがユーザーにとってよいのだろう？ 実装者たちは考えます。
代替テキストを書くポイントを解説します。ウェブを閲覧する人に意図したとおりの情報を伝達する機能を担うのが代替テキストであるなら、逆説的ですが、代替テキストを書くこと「だけ」にこだわる必要はありません。本文などさまざまなalt属性値以外で展開することも含めて考えてみましょう。
CSSのカプセル化機能を安全に使うために、CSS設計の命名規則を導入してみましょう。また、Vueとの併用により、従来感じていたCSS設計のどのような課題が解決され、命名規則のどのような最適化が可能なのかを考えてみましょう。