こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、コンテナークエリーを使用して親要素のサイズに応じたスタイリングをする方法をご紹介します。 コンテナークエリーとは？ コンテナークエリーとは、特定の親要素（コンテナー）のサイズに基…

こんにちは！SaaS事業部デザイナーの澤田です！ エキサイトホールディングス Advent Calendar 2024 の最終日、25日目を担当します！ ここまでエキサイトホールディングスの各社に所属するエンジニア・デザイナーが力を合わせてブログのバトンを回してきたの…

こんにちは！SaaS・DX事業部デザイナーの鍜治本です。 エキサイトHDアドベントカレンダー シリーズ１の20日目を担当させていただきます！ この記事では、Figmaのブランチ機能を活用して、UI管理をどのように効率化したかについて詳しくお話しします。

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ2の5日目を担当します。 qiita.com 今回は、Tailwind CSSで兄弟要素の状態を評価してスタイリングする方法をご紹介します。 兄弟要素の状…

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ2の4日目を担当します。 qiita.com 最近、とあるサービスのデザインシステムの構築を担当する中で、他事業部のデザイナーに協力のもと、…

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ1の2日目を担当します。 qiita.com 今回は、HTMLのsourceタグとpictureタグを使用してレスポンシブに表示する画像を切替える方法をご紹介…

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ2の2日目を担当します。 qiita.com 今回は、Tailwind CSSでCSSの擬似クラス:focus-withinをスタイリングする方法をご紹介します。 「:foc…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はCSSプロパティの一つであるscroll-behaviorを使用して、ページ内遷移のスクロールを滑らかにする方法をご紹介します。 実現したい挙動 既定の挙動 実現したい挙動 どうやって実現するか Tailw…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はCSSのscroll-snap-typeプロパティを使用して、子要素単位にスクロールさせる方法をご紹介します。 実現したいこと 冒頭、「子要素単位にスクロール」とはどんな状態かをご説明します。 CodePe…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はAlpine.jsの公式プラグインを使用して、ドラッグ操作による並び替えを実現する方法をご紹介します。 使用するプラグインについて 実装方法 並び替えの情報を取得する方法 さいごに 使用するプ…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、JSを使用せずにCSSだけで「空白のセルがある場合」に限定したスタイリングをする方法をご紹介します。 実現したいこと 完成形 どうやるのか さいごに 実現したいこと 冒頭、実現したい状態…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はFigmaのVariablesでデザイントークンを設計する際に、Scoping機能を用いて使用先を間違わないようなトークンを設計する方法をご紹介します。 解決したいこと Scoping機能で使用先を制限する …

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はTailwind CSSを使用しているプロジェクトで、文章を行数制限（超えた部分は3点リーダーで省略）したい場合に使える便利なユーティリティクラス line-clamp-*をご紹介します。 純粋なCSSの場合…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はTailwind CSSでレスポンシブデザイン用のブレイクポイントをカスタマイズする方法をご紹介したいと思います。 はじめに 従来のCSS Tailwind CSSのユーティリティクラスを用いたレスポンシブデ…

こんにちは！SaaS・DX事業部デザイナーの鍜治本です！ 担当しているサービス「KUROTEN」のUI設計をする際にFigmaを使っており、デザインシステムの構築を日々進めています。 そんな中、スタイルの定義を行う際に気がついた機能があるので、TIPSとして記事に…

こんにちは。 エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 2024年2月16日に行われた、技術者向けの社内カンファレンス「Excite × iXIT TechCon」のLT枠で登壇させていただきましたので、その体験談を記したいと思います。 発表したこ…

こんにちは！エキサイトインターン生のやのふきです。 この記事では、エキサイトでの就業型インターン中に担当した業務とそこから得た学びを紹介します。 自己紹介 担当した業務内容 メッセージ機能のレイアウト修正 部門別分析のアラート設定に関するUI改善…

こんにちは。 エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 今回は2023年12月にFirefox（121）が対応したことにより主要ブラウザが完全対応となった、CSSの擬似クラス:has()についてその概要や使用方法についてお話したいと思います。…

こんにちは。エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2023 シリーズ2の19日目は、私齋藤が担当させていただきます。 今回は、あるプロジェクトでデザインシステム構築を担当していた…

こんにちは。 エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2023シリーズ2の12日目は、私齋藤が担当させていただきます。 今回はチェックボックスなどの強調表示色を指定できるCSSプロパ…

こんにちは。エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 202313日目は、私齋藤が担当させていただきます。 今回は『ボタンにまつわるエトセトラ』と称し、UIデザインで最も頻用される要…