こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス 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を自動実行させる方法をご紹介しました。…
こんにちは。エキサイト株式会社でデザイナーをしている齋藤です。 今回は、24卒技術職メンバーが新卒技術研修で約1ヶ月間チーム開発に取り組みましたので、各々が意識したことや学んだことを体験記として記したいと思います。 はじめに メンバー構成 チーム…
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Prettierを使用してTailwind CSSのclass名を自動でソーティングさせる方法についてお話をします。 VS Codeを使用した環境での情報は多く出回っていますが、IntelliJ IDEAやWebStormなどのJe…
こんにちは。 エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 2024年2月16日に行われた、技術者向けの社内カンファレンス「Excite × iXIT TechCon」のLT枠で登壇させていただきましたので、その体験談を記したいと思います。 発表したこ…
こんにちは。 エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 今回は2023年12月にFirefox（121）が対応したことにより主要ブラウザが完全対応となった、CSSの擬似クラス:has()についてその概要や使用方法についてお話したいと思います。…
こんにちは。エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2023 シリーズ2の19日目は、私齋藤が担当させていただきます。 今回は、あるプロジェクトでデザインシステム構築を担当していた…
こんにちは。 エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2023シリーズ2の12日目は、私齋藤が担当させていただきます。 今回はチェックボックスなどの強調表示色を指定できるCSSプロパ…
こんにちは。エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 202313日目は、私齋藤が担当させていただきます。 今回は『ボタンにまつわるエトセトラ』と称し、UIデザインで最も頻用される要…
こんにちは。 エキサイトで内定者アルバイト（デザイナー）をしている齋藤です。 今回は、業務の中でデザイントークンを検討して実験的に使用しているので、「デザインの仕組み化」を実現するためのデザイントークンについて記してみたいと思います。 この記…
