Schedule-X Schedule-XはFullCalendarの代替として開発されたオープンソースのJavaScript製イベントカレンダーです。 技術スタックに関係なく、イベントカレンダーを簡単に配信出来る、というもの。もちろん、React、Vue、 Angular、Svelte、Preactといったフレームワークのコンポーネントも RWD対応、国際化（日本語サポートされています）、プラグインによるカスタマイズ、D&Dによるスケジュール変更などが可能で、このようなカレンダーアプリを数分で利用可能になります。 また、有償で構築サポートも承っているみたいです。FullCalendar代替とはいえ、あちらもOSSではあるので好みで選ぶと良いんじゃないでしょうか。ライセンスはMIT。 Schedule-XGithub The post FullCalendarの代替として開発されたオープン

ホームページやブログに「動き」を加えると、ユーザーの目を引くと言われています。でも正直、わたしも最初は「そんな派手なアニメーションなんて要る？」と軽く考えてました。 特にスクロールアニメーションは加減が難しく、やりすぎるとページが重くなったり、逆に何も伝わらなかったり…。 しかし、アニメーションの基本ルールに沿って適切に使えば、サイト全体の印象を大きく変える強力な武器になります。 今回は、そんな動きをつかった最新の実例サンプルをまとめてご紹介します。 「動き」を極めるWebアニメーション表現アイデア30選 Landing Page Concept for Foodtech Business by Bohdan Ratiiev for Zajno Foodtech Concept: Making of 3D Visuals by Barry for Zajno Fingrow – Finan

CSSはどんどん便利になっていますね！ これまではJavaScriptを使用しないとできなかったことがCSSで簡単に実装できるようになっています。 CSSのfield-sizing: content;でフォームのテキストエリアのサイズを入力された文字量に合わせて自動変更したり、テキストエリアの高さを行の高さで設定するlh単位を使ったCSSのテクニックを紹介します。 フォームのテキストエリアに使用するCSSのテクニックは、2つあります。 field-sizing: content;で、コンテンツに合わせてテキストエリアを自動的にサイズ変更する。 lh単位で、テキストエリアの高さを行の高さで設定する。 HTMLは、textareaを用意するだけです。

Webサイトでよく使用されるグリッド、カード、ボタン、ヘッダ、セパレータなどのUIコンポーネントをコピペで簡単に実装できるコードをまとめたIndieUIを紹介します。 たとえばボタンだと、基本となるベースのボタンをはじめ、シンプルなものからトレンドを取り入れたもの、きらめき効果や光沢感やグラデーションをアニメーション化したボタンなどが揃っています。 Indie UI Indie UI -GitHub IndieUIの特徴 IndieUIで実装したUIコンポーネント IndieUIの使い方 IndieUIの特徴 IndieUIはWebサイトでよく使用されるUIコンポーネントを迅速かつ最小限の労力で構築するのに役立つコードをまとめたサイトです。コードをコピペするだけで簡単に実装できます。 IndieUIのUIコンポーネントには、シンプルなものからトレンドを取り入れたものまで揃っており、必要に応

HTMLで簡単に実装でき、カスタマイズも可能なアニメーションで動くスピナーを紹介します。アニメーションGIFだと、カスタマイズはほぼ不可能ですが、このスピナーだとさまざまなカスタマイズができます。 外部ファイルとしてJavaScriptを記述し、あとはHTMLで簡単に実装でき、カスタマイズもHTMLで簡単にカラー・サイズ・スピードを変更できる優れものです。 HTML-SpinnerElem -GitHub HTML-SpinnerElemの特徴 HTML-SpinnerElemのデモ HTML-SpinnerElemの使い方 HTML-SpinnerElemの特徴 HTML-SpinnerElemは、スピナーにアニメーション画像を使用していることにうんざりして、画像なしでHTMLでカスタマイズ可能なスピナーを実現するために作成されたものです。 HTML-SpinnerElem HTMLでカ

はじめに みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに disabled をつけて押せないようにしていませんか？ この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介します。 disabled属性をつけない方がいい理由 disabled 属性をつけると、ユーザーがボタンを操作することを防ぎます。 そのため、キーボード（Tabキー等）で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。 disableがない時 disableがある時 ボタンの存在が認知できないため、支援技術（スクリーンリーダ等）で操作しているユーザーにとって、「送信ボタンどこだろう？」と思ってしまったり、「なんで送信ボタンが出てこないんだろう？」と思ってしまい、操作を完了させることができなくなります。 aria-disabl

WebサイトやスマホアプリのUIにアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードをまとめたAnimataを紹介します。 112種類のアニメーション化されたUIコンポーネントが揃っており、見ているだけでもインスピレーションが刺激されます。 Animata Animata -GitHub Animataの特徴 Animata化されたUIコンポーネント animataの使い方 Animataの特徴 Animataは、WebサイトやスマホアプリのUIに使用されるアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードを提供しています。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。 AnimataはUIライブラリではありません。UIに動きを与えるためのコード集なので、他のUIライブラリやデザインシステムと一緒に使用できます。カ

CSSの疑似クラス「:has()」がモダンブラウザで使えるようになり、今までJavaScriptを使わないと実装できなかったようなものでも、CSSだけで実現できる幅が広がりました。 そんなCSSの「:has()」を使って、お問い合わせページなどでよく見かける、利用規約など個人情報の同意チェックボックスのチェックの有無で送信ボタンの活性（押せる状態）と非活性（押せない状態）を切り替える動作を、JavaScriptを使わずに実装する実験をしてみたので紹介してみます。 :has()を使ってCSSだけで同意チェックボタンを実装 まずは、JavaScriptを使わずにCSSの疑似要素「:has()」を使って、同意チェックボックスのチェック有無によって、ボタンの活性／非活性を切り替える動作サンプルです。 See the Pen CSS only Agree Check by BLACKFLAG (@B

アコーディオンメニューを実装する際に、こんな感じでdivタグで実装してませんか？ <div class="accordion">セクション1</div> <div class="panel"> <p>コンテンツ1</p> </div> これ、アクセシビリティ的にはかなり微妙で、私の出しているコーディング演習課題ではレビューでの指摘対象にしています。 ありさちゃん え、普通にネット上のコピペして、aタグとかdivで作ってましたけど・・・ こういう方が大半かと思います。 そこで今回は、HTMLの<details>と<summary>要素を使った、令和に最適なアコーディオンメニューの作り方について解説します。 また、デフォルトではアニメーションがつけにくいので、そこの解説もします。 私は毎日仕事でコードレビューを行っており、details/summaryを使って実装されている方はまだ半分もいない

iOSアプリによく使用されているナビゲーションのパターンとそれぞれの特徴を紹介します。 情報の階層ツリーを行き来するための構造型ナビゲーション、ユーザーの注意を引くためのオーバーレイ型ナビゲーション、特別なコンテンツで使用する埋め込み型ナビゲーションなど、最近のアプリに必須のナビゲーションばかりです。 Modern iOS Navigation Patterns by Frank Rausch 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 最新のiOSのナビゲーションパターン 構造型ナビゲーション オーバーレイ型ナビゲーション 埋め込み型ナビゲーション 参考資料 最新のiOSのナビゲーションパターン この記事では、ドリルダウン、モーダル、ピラミッド、シーケンスなど、iOSアプリを構造化す

こんにちは。Webデザインスクール「デジLIG」でクリエイターを目指す受講生のメンターや転職サポートを行っている久保です。 デザイナーのなかでも高度なスキル・考え方が求められるUI/UXデザイナーという職業について、「今後なくなる？」と噂されている背景とその真意についてまとめてみました。 本記事では、スクール運営を通してさまざまな企業とも関わっているプロの目線で、UI/UXデザイナーの仕事が本当になくなるのか解説していますので、ぜひ最後まで読んでみてください。 最近、「UI/UXデザイナーは将来なくなってしまう」ということがいわれています。 はじめに断言しておきますと、答えは「NO」です。 ではなぜ高度なスキル・考え方が求められるUI/UXデザイナーという職業がなくなるといわれているのでしょうか。理由は大きく2つあります。 AI技術の発展 理由の一つ目はAIなど革新的な技術進歩により「自動

UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？ UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。 Hardest Problem in Computer Science: Centering Things by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントにおける中央揃え line-heightにおける中央揃え アイコンにおける中央揃え アイコンフォントにおける中央揃え 中央配置がずれているのは、スキルの問題 水平方向の中央揃え

Webサイトの外観を向上させるためにデザインされた、Tailwind CSSで実装されたボタンのコレクションを紹介します。 ボタンの実装はJavaScriptは無し、Tailwind CSSで実装されたさまざまなエフェクトが用意されています。コードはコピペするだけで、簡単に実装できます。

<body> <!-- モーダルのボタン --> <button type="button" class="modal-btn">ボタン</button> <!-- モーダルウインドウ／フェードイン --> <div class="modal"> <!-- モーダルウインドウ／背景 --> <div class="modal-bg modal-close"></div> <!-- モーダルウインドウ／コンテンツ --> <div class="modal-main-container"> <div class="modal-main-contents"> <!-- 閉じるボタン --> <div class="modal-close-btn__wrapper"> <button class="modal-close-btn modal-close">閉じる</button> </div>

こんにちは森田です。 最近 Gaji-Labo では shadcn/ui を使った案件が増えてきています。 shadcn/ui は、Radix & Tailwindを使ったコンポーネントコレクションで、ライブラリではなくコピーして使うことを前提に作られているのが特徴です。 shadcn/ui の CSS は Tailwind CSS で書くのですが、先日そのCSSが効かなくなる現象が起こり、それを解決したのでまとめます。 起こった現象現象としてはコンポーネントに指定したフォントサイズやフォントカラーなどテキスト系のクラスがうまく効かない現象となっていました。 コード的には以下のように Button コンポーネントにカスタムクラスのテキストサイズやテキストカラーを指定していたのですが、うまく聞きませんでした。 ブラウザのデベロッパーツールで見てもクラスが見当たらず、なぜかクラスが消えている状

HTML の popover 属性が、すべてのモダンブラウザにおいて正式にサポートされ、足並みがそろいましたので、popover 属性について簡単に紹介します。 先日、Firefox 125 （125.0.1） が正式にリリースされましたが、このバージョンで、HTML の popover 属性、および popovertarget 属性、popovertargetaction 属性、CSS の :popover-open 疑似クラス、::backdrop 疑似要素の popover 対応といった Popover API 関連のサポートが行われました。 Firefox 以外のモダンブラウザではすでにサポートが完了していましたので、これですべてのブラウザで使用できる状態になったといえます。 popover - Can I use... 個人的に画面上に何かしらポップアップして表示するような UI

先日リリースされたSafari 17.4をはじめ、まもなくリリースされるChrome 124でフォームコントロールの縦書きモードが正式にサポートされます。これで、すべての主要モダンブラウザでサポートされることになります。 縦書きモードの対象として日本語ユーザーも含まれているのだと思いますが、見慣れぬせいか違和感が、、、縦書きのコンテンツだったらいいのかな。 フォームを縦書きにするには、writing-mode: vertical-rl;を設定します。サポートブラウザは、Safari 17.4+, Firefox 120+をはじめ、Chrome, Edgeも119からサポートされており、間もなくリリース予定のChrome 124で正式にサポートされる予定です。 writing-mode: Vertically-oriented form controlsのサポートブラウザ 詳しくは、下記をご

Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。 スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトラインをより見やすくするCSS、ボタンの論理サイズを設定するCSSなど、デフォルトのスタイルとして設定しておくと便利です。 CSS Button Styles You Might Not Know by David Bushell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スマホでボタンをタップした際の誤動作を防止 ボタンのテキストの意図しない選択 ファイル選択のボタン ボタンをフォーカス時の視覚的なアウトライン

こういった流れがイメージできます。 // セッションストレージからフラグを取得 const isFirstLoad = sessionStorage.getItem('isFirstLoad'); // ページの読み込みが完了したときに実行される関数 window.addEventListener('load', function() { // フラグがない場合（初回アクセス時） if (!isFirstLoad) { // 初回アクセス時の処理を記述 // 例: ローディング画面の表示、セッションストレージへのフラグの保存など console.log('初回アクセスです'); // セッションストレージにフラグを保存 sessionStorage.setItem('isFirstLoad', true); } else { // 2回目以降のアクセス時の処理を記述 console.log