sourceタグとpictureタグでレスポンシブに画像要素を切り替える

マークアップフロントエンド UIデザイン

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

2024-12-02

Tailwind CSSで擬似クラス「:focus-within」をスタイリングする方法

スタイリングフロントエンド UIデザイン Tailwind CSS

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

2024-12-02

Tailwind CSSでアニメーション付きのスケルトンスクリーンをスタイリングする方法

Tailwind CSS スタイリングフロントエンド UXデザイン

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

2024-11-19

scroll-behaviorでページ内遷移のスクロールを滑らかにする方法

CSS UIデザインフロントエンドスタイリング

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

2024-11-18

scroll-snap-typeを使用して子要素単位にスクロールさせる方法

スタイリング UIデザイン CSS フロントエンド

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

2024-10-21

htmxで別のHTMLファイルにある要素を埋め込む方法

HTMX マークアップフロントエンド

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

2024-10-07

Alpine.jsでドラッグ操作による並び替えを実現する方法（Sort Plugin）

Alpine.js UIデザインフロントエンドマークアップ

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

2024-09-03

Tailwind CSSでタグのベーススタイルを設定する方法

スタイリング Tailwind CSS フロントエンドマークアップ

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

2024-09-02

Alpine.jsでページ読み込み時に非表示要素が一瞬見えてしまう「blip」を防止する方法

Alpine.js マークアップフロントエンド

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

2024-08-28

Alpine.jsのx-modelで入力された値を参照する方法

Alpine.js マークアップフロントエンド

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

2024-08-26

アイコンで説明するUIはアクセシビリティに気をつける

アクセシビリティマークアップフロントエンド

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

2024-08-19

JSを使用せずにCSSだけで「空白のセルがある場合」に限定したスタイリングをする方法

UIデザインスタイリングマークアップフロントエンド

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

2024-08-05

Alpine.jsで特定の要素の外側がクリックされたことを検知する方法

HTML フロントエンド Alpine.js

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

2024-07-29

Tailwind CSSで文章を行数制限したい場合はline-clamp-*が便利

Tailwind CSS スタイリングフロントエンド UIデザイン

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

2024-07-22

Tailwind CSSでブレイクポイントをカスタマイズする方法

Tailwind CSS スタイリングフロントエンド UIデザイン

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

2024-07-10

Tailwind CSSの@applyを使用してUtility classをまとめた独自Classを定義する方法

Tailwind CSS スタイリングフロントエンド

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

2024-07-01

Tailwind CSSでfont-sizeやline-heightなどの文字の構成要素がまとまったタイポグラフィトークンを定義する

スタイリング Tailwind CSS フロントエンド

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