こんにちは。エキサイトでデザイナーをしている齋藤です。 前回の記事では『エキサイトブログトップページのリプレイスでデザイナーが担ったこと』と題し、一般ユーザーに提供する外向きのアプリケーションのリプレイスでデザイナーが担ったことをご紹介しま…

こんにちは。エキサイトでデザイナーをしている齋藤です。 先日、弊社エンジニアの山縣がTECH Street主催のイベントにて、エキサイトブログのトップページを段階的にリプレイスした取り組みについて発表しました。 リプレイスの背景や段階的リリースに関する…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでデフォルトのテーマを無効にして完全に上書きする方法をご紹介します。 なお、本稿の内容は v4.1.13（2025年9月24日時点の最新版）のTailwind CSSに準じています。 実現した…

はじめに 2025年8月1日から1か月間、「Booost!!! Excite Internship 2025」に参加しました。本記事では、インターンシップで取り組んだ内容や学び、感じたことをまとめて紹介します。 はじめに 自己紹介 インターンシップでの業務内容 学んだこと 技術面 Git…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxで単一トリガーで複数リクエストする際に一つしか発行されない場合の対処法をご紹介します。 遭遇した事象 原因はhtmxのバグ まとめ 参考文献 遭遇した事象 冒頭、遭遇した事象を整理し…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSで画像を他の画像に合わせて切り抜く（マスクする）方法をご紹介します。 なお、本稿の内容は v4.1.12（2025年8月18日時点の最新版）のTailwind CSSを前提としています。 実現…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxでページ全体で有効な設定オプションをセットする方法をご紹介します。 なお、方向の内容は v.2.0.6 （2025年8月12日時点の最新版）のhtmxを前提としています。 htmxとは 実現したいこ…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでユーティリティクラスの検知の監視対象から特定のディレクトリを除外する方法をご紹介します。 なお、本稿の内容は v4.1.11（2025年7月22日時点の最新版）のTailwind CSSを前…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxでHTMLの制約検証APIを使用して検査合格後にリクエストを発行する方法をご紹介します。 なお、本稿の内容は v2.0.6（2025年7月14日時点の最新版）のhtmxを前提としています。 htmxとは …

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、先日弊社で開催されたExciteHD TechCon 2025で発表した、Tailwind CSS、Alpine.js、htmxによる「消しやすさ」を軸にしたフロントエンド戦略についてご紹介します。 ExciteHD TechConについ…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxでリクエスト発行前にwindow.confirmを実行して、確認ダイアログが承認された場合にのみリクエストする方法をご紹介します。 なお、本稿の内容は v2.0.4（2025年6月16日時点の最新版）…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、buttonタグの新しい属性であるcommand属性を使用して、JSなしでdialogタグを制御する方法をご紹介します。 なお、本稿の内容は2025年6月9日時点のHTML Living Standardと各ブラウザの対応状…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxのリクエストトリガーに別の要素のイベントを指定する方法をご紹介します。 htmxとは 実現したいこと hx-triggerのfrom:*で別の要素のイベントをトリガーに指定できる まとめ 参考文献 …

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、textarea要素のサイズ変更を提供する方向を制御する方法をご紹介します。 実現したいこと CSSプロパティのresizeで制御が可能 注意点 Tailwind CSSの場合 まとめ 参考文献 実現したいこと …

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxでAJAXリクエスト時に送信されるパラメータをフィルタリングする方法をご紹介します。 なお、本稿の内容は v2.0.4（2025年4月28日時点の最新版）のhtmxを前提とします。 htmxとは 実現…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでグラデーション背景をスタイリングする方法をご紹介します。 なお、本稿ではv4.1（2025年4月21日時点の最新版）のTailwind CSSを前提とします。 実現したいこと Tailwind CSS…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでスペーシングのベースサイズをカスタマイズする方法をご紹介します。 なお、本稿ではv4.1（2025年4月14日時点の最新版）のTailwind CSSを前提とします。 実現したいこと スペ…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Alpine.jsでページ内で一意になる文字列を生成する方法をご紹介します。 実現したいこと Alpine.jsの$idマジックが便利 x-id属性と組み合わせるとグルーピングができる まとめ 参考文献 実…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでbackground-sizeとbackground-positionの両方を任意の値で設定する方法をご紹介します。 実現したいこと background-sizeとbackground-positionの両方を任意の値で設定する方…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSに標準搭載されているリセットCSSを無効にする方法をご紹介します。 実現したいこと Preflightを無効にする方法 独自のリセットCSSを設定する まとめ 参考文献 実現したいこと …

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでHTML属性に対する疑似要素のスタイリングをする方法をご紹介します。 実現したいこと Tailwind CSSで擬似クラスを指定する方法 注意点 CSS Tailwind CSS まとめ 参考文献 実…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxで要素がビューポートにスクロールされた場合にAJAXリクエストを発行する方法をご紹介します。 実現したいこと hx-targetの設定で実現可能 検証してみる overflowプロパティが適用され…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はTailwind CSSで子孫要素にアクセスする方法をご紹介します。 なぜ子孫要素にアクセスしたいか Tailwind CSSでどう実現するか 対象の小孫要素を限定したい場合 まとめ 参考文献 なぜ子孫要素に…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxのhx-indicatorとTailwind CSSを組み合わせてスケルトンスクリーンを実現する方法をご紹介します。 スケルトンスクリーンとは Tailwind CSSでスケルトンスクリーンをスタイリングする h…

こんにちは。エキサイトでデザイナーをしている齋藤です。 2025年1月23日にTailwind CSSのv4の安定版がリリースされました。新機能の一つにコンテナークエリーのサポートがあります。 今回はTailwind CSSでコンテナークエリを使用する方法をご紹介します。 …

こんにちは。エキサイトでデザイナーをしている齋藤です。 Tailwind CSSのメンテナーの一人のAdam Wathan氏は、日本時間の1月16日に自身のXにおいて、「Tailwind CSS v4.0安定版は来週リリース予定」と発表しました。 Tailwind CSS v4.0 stable will be out …

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

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス 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タグが置き換わってしまう現象…