ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
最近のWebサイトやアプリで見かけるUIコンポーネントやエフェクトを実装するCSSのテクニックを紹介します。 一昔前まではJavaScriptが必要だったりしましたが、現在ではCSSのみで実装できるようになり、覚えておくと非常に便利です。 10 Useful CSS Tricks for Front-end Developers by Alex Ivanovs 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. タイプライターのようなエフェクト 2. 透過画像用シャドウ 3. カーソルのカスタマイズ 4. attr()でシンプルなツールチップ 5. ピュアCSSによるチェックリスト 6. is()と:where()による要素のスタイル 7. キーフレームを使用したアコーディオン 8. ホバーエフェクトのサイドバー 9
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のールチップとスピーチバブルを実装できるCSS Tooltips & Speech Bubblesを紹介します。 このツールチップって実装すると、けっこう面倒ですよね。ベタ塗りのツールチップをはじめ、グラデーションの枠、しっぽの位置、しっぽの形状など、さまざまなデザインが、ここを見ればコピペで簡単に実装できます。 CSS Tooltips & Speech Bubbles CSS Tooltips & Speech Bubblesを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回は100種類のツールチップとスピーチバブルです。
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。 モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合など、スクロールチェーンしないように実装するCSSのテクニックを紹介します。 Prevent Scroll Chaining With Overscroll Behavior by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールチェーンとは 古い解決方法 今の解決方法: overscroll-behavior overscroll-behaviorの使用方法 終わりに はじめに posi
この記事はCSS Advent Calendar 2022の9日目の分です。 CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー（スクロールバーが内容の前面に覆いかぶさるようなもの）が主流となり、スクロールバーが存在してもしなくても内容の幅が変わらないようになっています。一方、クラシックスクロールバー（スクロールバーが常に表示されるようなもの）が使われる環境では、overflow: autoな要素において内容がはみ出すときとはみ出さないときで内容の幅が変わってきます。 クラシックスクロールバーが使われる環境でも内容の幅を一定に保ちたいという場合は、scrollbar-gutterプロパティを使います。scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときで
ポップオーバーのネスト 複数のポップオーバーが同時に表示されることはないルールには例外があります。ポップオーバーがネストされている場合です。 <button popovertarget="popover1">Show Parent</button> <div id="popover1" popover> <p>This is Parent</p> <button popovertarget="popover2">Show Child</button> <div id="popover2" popover> <p>This is Child</p> </div> </div> 子のポップオーバーは親のポップオーバーの子孫要素として存在しているため、子のポップオーバーが表示されている間に親のポップオーバーを閉じることはありません。 ポップオーバーのネストは popover=hint 属性を使用
ICSはフロントエンドを専門とするウェブ制作会社ですが、オウンドメディアとして技術情報発信サイト「ICS MEDIA」を運用しています。このサイトは開設から10年目をむかえましたが、今年は「国内のウェブ水準を前進させる記事を。話題のテーマも、他のサイトでは読めないニッチな技術も」をテーマとしてやってきました。そんなICS MEDIAにとっての2024年を、あらゆる数値を使って多角的にレポートします。 今年はどの記事がもっとも読まれたのでしょうか？ 今年執筆した記事で上位10記事をピックアップしました。 1位 : フキダシ作例 HTML・CSSで実装するかわいいフキダシのアイデア 24,708 PV HTMLとCSSだけで作るかわいい吹き出しデザインを取り上げた記事です。マスキングテープ風などの凝ったスタイルからシンプルな角丸まで、応用範囲が広いオリジナルサンプルを豊富に掲載しています。 ユ
ABEMA weber 勉強会 2021/06/30, 07/07 --- @uenitty 本当にあったモーダルの怖い話 ABEMA weber 勉強会 2021/06/30, 07/07 背景と目的 2 • モーダルに驚くほど苦しめられたので、状況を説明して改善方法を提案する • OO…
こんにちは、id:nanto_viです。この記事ははてなエンジニアAdvent Calendarの1日目の分です。 Webアプリケーションでモーダルダイアログを実現しようとして苦戦したことはないでしょうか？ 自前でHTML、CSS、JavaScriptを組み合わせて実装していくと、フォーカスやスクロールの制御が大変ですよね。そんな悩みを解決してくれるのがHTMLのdialog要素、Webブラウザ組み込みのモーダルダイアログ実装が利用できるという優れものです（モードレスダイアログとしても利用できます）。 dialog要素を使うことで、モーダルダイアログに要求されるJavaScript機能をブラウザが肩代わりしてくれるので、アクセシビリティの確保も簡単になります。 2021年12月現在、ChromeやEdgeはすでにdialog要素に対応しています。FirefoxやSafariの開発版でも対応
前回の記事『階層メニューやトーストUIが簡単に作れる新技術! JavaScriptで利用するポップオーバーAPI』ではポップオーバーAPIについて紹介しました。今回はその続編として、Chrome 133、Edge 133で新しく追加されたpopover="hint"属性に焦点を当てます。ツールチップなどのUIの実装に便利な属性で、その特徴や使い方、他の属性との違いを詳しく説明します。 ポップオーバーAPIのおさらい まずはポップオーバーAPIについて簡単におさらいしましょう。ポップオーバーAPIはその名の通りポップオーバーを実装するためのものです。ポップオーバーとは画面上の最前面に表示させるUIで、確認メッセージやトースト、メニューなどに使えます。 ポップオーバーAPIを使わなくてもCSS、JavaScriptを駆使して同じようなUIを作れますが、ポップオーバーAPIを使えば細かなケアを実
CSSだけでも表現できるデザインが増えてきまして、疑似要素::beforeや::afterなどを駆使することでボタンやテキストリンクへさまざまな装飾することができるようになりました。今回は全部で19パターンのデザインをCSSのみで実装する方法をご紹介します。あなたの現場でぜひご利用ください。 CSSボタンのスタイル CSSボタンは11パターンあります。すべてのデザインに共通したCSSがありますので以下のコードをコピペした後に、実装したいボタンのCSSをコピペしてください。 CSSボタンの共通スタイル .btn a { display: flex; justify-content: center; align-items: center; position: relative; width: 300px; height: 60px; color: #333; font-size: 18px;
このブックマーク可能なガイドの目的は、最近CSSに追加されたばかりの新機能や使い方を分かりやすくまとめることです。 「CSSって、こんなこともできるの?!」と思ってしまうほど、多くの人が知らない新しいテクニックが中心です。 また、たとえ知っていたとしてもよく理解できておらず、「それって何?」「なんで気にする必要があるの？」「サンプルコードがあると助かるんだけど、」そんな人におすすめしたい記事となっています。 周りがあっと驚くテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 これだけは知っておきたい最新モダンCSS（2024年春版） 最近CSSに追加された新機能のリストを提供するブックマーク可能なガイド。このリストに明確な基準はないが、すべてかなり新しいものであり、多くの人がこれらのことを知らないと思うものをピックアップ。 参考記事: What You Need t
Intro showModalDialog() は今から考えれば、確かにひどい API だった。 しかし、何か Modal を開き、ユーザにインタラクションをさせ、閉じたらそこで入力された値や選択された結果を取得し、処理を進めたいユースケース自体は、規約への同意取得や、Cookie バナー、ログインなど多々ある。 そういった場面では、ライブラリなどを用いて実装する必要があったが、Modal を実装するのは実際にはそんなに簡単ではなかった。 Modal, Dialog, Modal Dialog 最初に、用語を少し整理しておこう。 Modal Dialog Modal Dialog non-Modal Dialog Dialog とは、そもそも「対話」という意味であり、UI の文脈では入力や選択を求める「対話的な UI」のことを指す。 既に実装されている alert(), confirm()
こんにちはかみむらです。 先日柴田さんが公開していた、Reactのモーダルコンポーネントを簡単に作成できるライブラリ react-hooks-use-modal をmicroCMSのOrganizationに移行しました。 こちらがGitHubのリポジトリです。 https://github.com/microcmsio/react-hooks-use-modal こちらはデモになります。 https://microcmsio.github.io/react-hooks-use-modal/ react-hooks-use-modalはmicroCMSの管理画面内部にも使われています。例えばWebhook追加時のモーダルコンポーネントです。 モーダルのコンポーネントは1から実装すると非常に工数がかかりますが、react-hooks-use-modalを使えば少ない工数で実装することができま
チェックボックスなどと同じく、スイッチ UI のデフォルトのスタイルを変更しカスタマイズしたい場合には、appearance: none を指定してデフォルトのスタイルを無効化する必要があります。スイッチがオンの場合のスタイルは :checked 疑似クラスを使って指定できます。 input[type="checkbox"][switch] { appearance: none; background-color: #e5e5ea; position: relative; width: 78px; height: 48px; border-radius: 8px; } input[type="checkbox"][switch]::thumb { width: 42px; height: 42px; margin-top: 2px; margin-left: 2px; border-rad
![input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案](https://cdn-ak-scissors.b.st-hatena.com/image/square/922a1b07422ae311bfcb57eda480d1949dd223d4/height=288;version=1;width=512/https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttps%2Fazukiazusa.dev%2Fblog%2Fogp%2Finput-type-checkbox-switch.png)
モーダルの開閉状態を URL で管理することで、状態を復元したり、状態を共有できるなどのメリットがあります。この記事では、Next.js を例に URL でモーダルの開閉状態を管理する方法を紹介します。 よくあるモーダルの実装について考えてみましょう。モーダルは名前のとおり、現在開いているか閉じているかの状態（モード）があります。状態を管理するときには、React の useState フックを利用する方法がまっさきに思い浮かぶのではないでしょうか？ import { useState } from "react"; import Dialog from '@ui/components/Dialog'; import Button from '@ui/components/Button'; const App = () => { const [isOpen, setIsOpen] = us
WebサイトのUIにフローティング要素、ドロップダウン、ツールチップ、ポップオーバー、ナビゲーションなどを実装するJavaScriptのライブラリを紹介します。 フローティング要素の実装で問題となる配置の向きや衝突やオーバーフローなどにも対応しており、アクセシブルなフローティング要素を実装できます。 Floating UI Floating UI -GitHub Floating UIの特徴 Floating UIのデモ Floating UIの使い方 Floating UIの特徴 Floating UIは、ドロップダウン、ツールチップ、ポップオーバー、ナビゲーションなどのフローティング要素を配置するためのJavaScriptライブラリです。 フローティング要素はコンテンツのフローを中断することなくUIの上に浮かぶため、配置するときに課題が発生します。Floating UIではフローティン
GPUを使いたいこと、あると思います。 ただしご家庭に強いGPUはないこともあるでしょうし、かといってGPU搭載したインスタンスを立て続けているととてつもないお金がかかります。 そんなあなたにサーバレスGPU、使った秒数分だけ課金が発生するので、いきなりすごい金額がかかることにはならず手軽にGPUを使ったプログラミングが始められます。 私は今の所ModalとRunPodを試したのですが、ModalのDXが良すぎるため今回イントロ記事を書く筆を取りました。 始めにざっくりいいところを述べると 一つのファイルで完結する。 RunPodとの比較だと「RunPodではDockerのイメージを自前でビルドしてどこかしらのregistryにpush、都度タグを付け替えてRunPodの方にも反映」みたいなのが必要だったがModalでは全部要らない ローカルパッケージをちょろっとした関数で送れたり、テキス
キャレットアイコンは、アコーディオンがその場で開くのであって、新しいページへの直接のリンクではない、ということを最も明確にユーザーに示すことができていた。 Accordion Icons: Which Signifiers Work Best? by Page Laubheimer and Raluca Budiu on August 23, 2020 日本語版2021年4月8日公開 アコーディオンが、現在、人気のあるUI要素であるのには理由がある。というのも、モバイルでは、コンテンツを折りたたんでページの長さを管理可能にする不可欠なツールになっている一方、デスクトップでも、視覚的な複雑さを軽減し、ユーザーが目下のタスクに最も関連性の高いコンテンツに集中できるようにしてくれるからだ（複雑なアプリケーションには特に適している）。 モバイルUXとアプリケーションデザインの両方の講座でよく聞かれ
In this post I want to share my thoughts on how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. Try the demo and view the source! Demonstration of the mega and mini dialogs in their light and dark themes. If you prefer video, here's a YouTube version of this post: Overview The <dialog> element is great for in-page contextual information or action
dialog要素を使用したアクセシブルなモーダルウィンドウの実装メモです。このブログのハンバーガーメニューで使われている実装と同じものになります。 dialog要素は現在全てのモダンブラウザでサポートされているため、iOS Safariをどこまで対応するかに依りますが実務で使用しても差し支えないでしょう。
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Pure CSS ComponentsNo JavaScript components to load so there is no wait time for modal, accordion, tabs or any other components. Browse Components → Easy to CustomizeAdding your style is easy. Customize components overriding the default CSS variables or using classes.
「CODA（コーダ）」ということば、皆さん、ご存じでしょうか？ 「Children of Deaf Adults」の略です。耳が聞こえない、または聞こえにくい親がいる「子どもたち」のことを表します。 「CODA」と呼ばれる子どもたち自身は、耳が聞こえます。あくまで「親が耳が聞こえない」という「子どもたち」のことを表すのですが、近年、専門家の推計で、国内におよそ2万2000人いることが明らかになりました。 子どもたちの中にはみずから手話などを使って、親の手伝いを日常の中ですることがあります。取材を進めると、時に、子どもたちに大きな負担がかかっている現状が見えてきました。 （首都圏局 記者 喜多美結、おはよう日本 ディレクター 棚橋大樹）
I’ve seen a few examples of error handling like the following lately: func MightFail(id string) error { err := sqlStatement() if err != nil { return fmt.Errorf("mightFail failed with id %v because of sql: %w", id, err } ... return nil }See the problem? It becomes more clear when you start to use the function: func business(ids []string) error { for _, id := range ids { err := MightFail(id) if err
3 行まとめ 特定の要素(アンカー)を基準にして、その要素から位置を指定できる CSS Anchor Positioning JavaScript を使わなくても tooltip などの実装ができるように Chrome Canary で試せる CSS Anchor Positioning とは CSS Anchor Positioning は特定の要素(アンカー)を基準にして、その要素から別の要素の位置を指定できる API です。 Chrome114 で実装された Popover APIと CSS Anchor Positioning を使うと、Floating UIのような tooltip が JavaScript を使用せずに実装できます。 CSS Anchor Positioning を使って tooltip を実装してみよう 実際に Popover API と CSS Anchor
ベン図で表すと以下のようになります。 （あまり一般的でない名称のコンポーネントも便宜上使用しています。） 以降、詳しく解説します。 Modal Modal は、ユーザに特定のアクションを求めるために、ユーザのインタラクション（操作）を中断させる UI コンポーネントです。 難しい表現をするならば、ユーザの操作を「モードに移行」させるコンポーネントと言えます。 もともと、「Modal」という英単語はこちらで言及されているように形容詞です。 そのため、「Modal な〇〇（名詞）」という意味が本来は適切な使い方です。例えば「Modal な Dialog」や「Modal な Drawer」などです。 今日では単に「Modal」だけで使われることが多いので注意が必要です。 Modal はユーザの操作を制限し、ユーザが特定のタスクに集中して対処しなければならない状態を作り出します。 ユーザは「モーダ
Installation (for standard modern project) npm install react-icons --save Usage import { FaBeer } from 'react-icons/fa'; class Question extends React.Component { render() { return <h3> Lets go for a <FaBeer />? </h3> } } Installation (for meteorjs, gatsbyjs, etc) If your project grows in size, this option is available. This method has the trade-off that it takes a long time to install the package.
こんにちは！ UIデザイナーのmarinです。 1年半前にメインデザインツールをFigma に移行した際の記事を書いたのですが、理由のひとつにプロトタイピングがしやすいことを挙げていました。 今回はその件についての深堀りを、Figma のプロトタイプを実際の業務でどのように用いているのか例を挙げて書きます。 ※Figma のプロトタイプが初見の場合は、公式のFigma Tutorial: Prototyping を見ておくのをおすすめします。Figma のプロトタイプの作り方Figma のプロトタイプ機能はデフォルトで備わっていて、作成したデザインに画面遷移・マイクロインタラクションの再現ができます。設定方法はとても簡単かつ直感的なので、実際にやってみましょう。 まずはプロパティパネル（デフォルト右側のパネル）の上にあるPrototypeをクリックしプロトタイプモードにします。 試しに、た
Web Platform Dive into the web platform, at your pace.
オーバーレイは、ユーザーの期待に反するようなかたちで閉じるようになっていることがよくある。 Accidental Dismissal of Overlays: A Common Mobile Usability Problem by Raluca Budiu, Sana Behnam and Kate Moran on September 18, 2022 日本語版2023年2月7日公開 モバイルでは、オーバーレイはユビキタスなUI要素になっていて、Cookieの許可からチャットバブル、クーポンの提供、メールマーケティング購読の提案などの迷惑なポップアップ以外にも、ナビゲーションメニューやボトムシート、商品詳細ページ、アプリ内ブラウザなどに利用されている。 モバイルオーバーレイの多くは、ページの一部のみを占めるもので（部分オーバーレイ）、背景にコンテンツを部分的に表示することができるように
In this post I want to share my thoughts on how to build a color-adaptive and accessible <tool-tip> custom element. Try the demo and view the source! A tooltip is shown working across a variety of examples and color schemes If you prefer video, here's a YouTube version of this post: Overview A tooltip is a non-modal, non-blocking, non-interactive overlay containing supplemental information to user
All of these checkboxes were initially copied using CSS Scan (click here to try a free demo). With CSS Scan you can easily inspect or copy any website's CSS. 📌 Press Ctrl+D to bookmark this page Get CSS Scan Trusted by thousands Get ready to join 20,000+ professional web developers from 116 countries using CSS Scan every day to deliver world-class websites. on Gumroad Get CSS Scan
1.Tooltip こちらは定番ですね！ 特に、何か注釈などの追加情報をユーザーに知らせる時はよく利用します。要素のホバー時だけ表示できるので、エリアの狭い箇所でも利用できるUIです。ただ、警告などの内容には非推奨な点やモバイルユーザーの考慮を必要とする点はデメリットですかね。 // page.tsx <div className="mt-10 mx-auto text-center"> <Tooltip label="ここに説明が入ります。ここに説明が入ります。ここに説明が入ります。ここに説明が入ります。"> <span className="p-2 bg-gray-100 rounded-full">🗑️</span> </Tooltip> </div> // Tooltip.tsx import { ReactNode } from "react" type TooltipProp
はじめにモーダルって言葉はよく聞くけど、なんかわかっているようでわかってない、、 というデザイナーの方は多いのではないでしょうか？ そんなモーダルについて悩むのは、「もうだるい」ということで整理してみました。 今回は、モーダルとは何か、モーダルの制御レベルの違いとそれぞれの用途や目的、使い分けのポイントについて解説します。 それぞれの使い分けがチーム全体で意識できると、よりユーザーにとって負荷の少ない体験が設計できるようになると思うのでぜひ読んでみてください。 モーダルとはモーダルウィンドウの定義から考えるとモーダルの意味がわかりやすいです。 モーダルウィンドウとは ユーザーが操作している画面（親ウィンドウ）の上に表示される子ウィンドウのうち、ユーザーがアクションしない限り親ウィンドウを操作できないもの（参考：wikipedia） つまりモーダルとは、小ウィンドウを表示する際に親ウィンドウ
完成したポップアップを確認する（デモ） 動作デモ 実際の動作はこちらで確認できます。遷移先のページでブラウザの「戻る」ボタンをクリックしてください。 ソースコードを確認 ポップアップ表示に必要な部分を抜き出したコードがこちらです。 コード全体 <!DOCTYPE html> <html lang="ja"> <head> <meta id="viewport" name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" /> <meta charset="UTF-8"> <title>ブラウザバックでポップアップ表示サンプル | えむ家のメモ帳</title> <!-- anonymousCDN --> <link href="<ディレクトリ>/fontawesome/css/all.css"
If we show a modal on iOS we need to prevent events inside the modal from interacting with the page behind the modal. On a previous episode of “Fun with Safari” we could use preventDefault() on the "touchmove" event but on iOS 15 that no longer works. Here we go. To make this work we need iOS to think that there is nothing to scroll. But how do we do this? We set the height of both the html and th
NavigationBarからツールチップを表示している例みなさん、ツールチップを実装したことはありますか？ （画像の緑の吹き出しのようなコンポーネント） Pairsでは、新機能をリリースするタイミングなど、徐々にツールチップを使うケースが増えてきました。 都度実装するのも大変ですし実装が難しいケースもあるので、今回汎用的に使えるツールチップの実装について考えてみました。 ※ 本記事では、ツールチップの表示とタップをハンドリングするための仕組みについての説明がメインで、UIの実装についてはあまり触れないです。 ツールチップとは 一般的にツールチップはマウスオーバーなどしてコンポーネントの補足情報を表示する場合に用いられるコンポーネントです。 UIKitでは公式にツールチップというコンポーネントは定義されていませんが、この記事ではボタンなど特定のコンポーネントを指して補足説明するためのコンポ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
