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

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ1の23日目を担当します。 qiita.com 今回は、TailwindCSSで要素間の境界線をスタイリングするときはdivide-*が便利というお話をします。 …

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ2の7日目を担当します。 qiita.com 今回は、Tailwind CSSでキーボード操作時のフォーカスをスタイリングする方法をご紹介します。 理想状…

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ1の16日目を担当します。 qiita.com 今回は、htmxのhx-getでパーツ読み込みをした際に、読み込み元のtitleタグが置き換わってしまう現象…

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ1の9日目を担当します。 qiita.com 今回はAlpine.jsでdialogタグを制御する方法をご紹介します。 dialogタグとは Alpine.jsで制御する コ…

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

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

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ2の3日目を担当します。 qiita.com 今回は、Alpine.jsのMagicである $elと$refsを使用して、DOMノードにアクセスする方法をご紹介します…

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

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

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

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

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

こんにちは。エキサイトでデザイナーをしている齋藤です。 最近、JSの記述なしにAJAXやSPA風の振る舞いが実装できるhtmxに触れる機会がありました。 htmx.org 今回は、htmxで別のHTMLファイルにある要素を埋め込む方法をご紹介します。 実現したいこと どう…

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

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSで連続する要素で交互に適用されるスタイリングをする方法として、odd:＆even: Modifierをご紹介します。 交互に適用されるスタイリングの例 Tailwind CSSで実現する方法 さい…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでタグのベーススタイルを設定する方法をご紹介します。 実現したいこと @layer baseでベーススタイルを設定できる さいごに 実現したいこと 冒頭、実現したいことを整理します…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はAlpine.jsを使用している環境下で、ページ読み込み時に隠している要素が一瞬表示されてしまう「blip」という現象を防止する方法をご紹介します。 blipとは どうやってblipを防止するか さいご…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Alpine.jsで、input要素などで入力された値を参照したい場合に有用なx-modelディレクティブをご紹介します。 x-modelとは 基本的な使い方 どんな使い道があるか さいごに x-modelとは x-mod…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、アイコンを用いて何かを説明しているUIはアクセシビリティに気をつけたいというお話をします。 アイコンで説明するUIとは ハンディキャップないユーザーにしか伝わらないマークアップ どこ…

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

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、HTMLのdata属性を使用してスタイリングする実験をしてみたので、その方法や所感について記したいと思います。 data属性とは？ data属性は、HTMLタグに対して独自の属性を付与できる機能です…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はAlpine.jsで、特定の要素の外側がクリックされたことを検知できる、x-onのModifierの一つである.outsideが便利だったのでシェアしたいと思います。 作りたいもの まずはドロップダウンを作っ…

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

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

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

こんにちは。エキサイトでデザイナーをしている齋藤です。 私はGit操作をコマンドで行うことが多いのですが、長いGitコマンドは入力が手間だったり、typoしやすかったりするためGitエイリアスを設定してコマンドを簡略化しています。 今回は、そんなGitエイ…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はTailwind CSSの@applyを使用してUtility classをまとめたClassを独自に定義をする方法をご紹介します。 なぜUtility classをまとめたいのか Utility classをまとめた独自Classを定義する方法 …

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSで文字の主な構成要素であるfont-size、font-weight、line-height、letter-spacingをまとめたタイポグラフィトークンを定義する方法についてお話します。 CSSを用いた従来のト…

こんにちは。エキサイトでデザイナーをしている齋藤です。 前回、【JetBrains製エディタ対応】PrettierでTailwind CSSのclass名を規則的に自動ソーティングさせる と称して、IntelliJ IDEAでファイル保存時にPrettierを自動実行させる方法をご紹介しました。…