マークアップ
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxで単一トリガーで複数リクエストする際に一つしか発行されない場合の対処法をご紹介します。 遭遇した事象 原因はhtmxのバグ まとめ 参考文献 遭遇した事象 冒頭、遭遇した事象を整理し…
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSで画像を他の画像に合わせて切り抜く（マスクする）方法をご紹介します。 なお、本稿の内容は v4.1.12（2025年8月18日時点の最新版）のTailwind CSSを前提としています。 実現…
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxでページ全体で有効な設定オプションをセットする方法をご紹介します。 なお、方向の内容は v.2.0.6 （2025年8月12日時点の最新版）のhtmxを前提としています。 htmxとは 実現したいこ…
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、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:*で別の要素のイベントをトリガーに指定できる まとめ 参考文献 …
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Alpine.jsでページ内で一意になる文字列を生成する方法をご紹介します。 実現したいこと Alpine.jsの$idマジックが便利 x-id属性と組み合わせるとグルーピングができる まとめ 参考文献 実…
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、コンテナークエリーを使用して親要素のサイズに応じたスタイリングをする方法をご紹介します。 コンテナークエリーとは？ コンテナークエリーとは、特定の親要素（コンテナー）のサイズに基…
こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ1の16日目を担当します。 qiita.com 今回は、htmxのhx-getでパーツ読み込みをした際に、読み込み元のtitleタグが置き換わってしまう現象…
こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ2の3日目を担当します。 qiita.com 今回は、Alpine.jsのMagicである $elと$refsを使用して、DOMノードにアクセスする方法をご紹介します…
こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ1の2日目を担当します。 qiita.com 今回は、HTMLのsourceタグとpictureタグを使用してレスポンシブに表示する画像を切替える方法をご紹介…
こんにちは。エキサイトでデザイナーをしている齋藤です。 最近、JSの記述なしにAJAXやSPA風の振る舞いが実装できるhtmxに触れる機会がありました。 htmx.org 今回は、htmxで別のHTMLファイルにある要素を埋め込む方法をご紹介します。 実現したいこと どう…
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はAlpine.jsの公式プラグインを使用して、ドラッグ操作による並び替えを実現する方法をご紹介します。 使用するプラグインについて 実装方法 並び替えの情報を取得する方法 さいごに 使用するプ…
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、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タグに対して独自の属性を付与できる機能です…
こんにちは。 エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 今回は2023年12月にFirefox（121）が対応したことにより主要ブラウザが完全対応となった、CSSの擬似クラス:has()についてその概要や使用方法についてお話したいと思います。…
こんにちは。エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 202313日目は、私齋藤が担当させていただきます。 今回は『ボタンにまつわるエトセトラ』と称し、UIデザインで最も頻用される要…
こんにちは。 エキサイトで内定者アルバイト（デザイナー）をしている齋藤です。 今回は、業務の中でデザイントークンを検討して実験的に使用しているので、「デザインの仕組み化」を実現するためのデザイントークンについて記してみたいと思います。 この記…
こんにちは。 エキサイト株式会社で24卒デザイナー内定者アルバイトをしている、齋藤です。 デザイナーとしてマークアップを行う場合、HTMLやスタイルを書くことが多いと思います。今回はNuxt3（Vue）で効率的にスタイルを書く方法を備忘録的に記します。 通…
