CSSでオーバーレイのスタイルが期待通りに表示されない、::backdrop疑似要素の変更された使い方

2024/02/29 14 users CSS オーバーレイ ダイアログ 期待通り スタイル

ダイアログやモーダルを表示する時に、コンテンツの上にオーバーレイを使用します。このオーバーレイはコンテンツの上に表示されるように::backdrop疑似要素で最上位レイヤーにするのが簡単です。 先日アップデートされたChrome 122でこの::backdrop疑似要素の値の継承ルールが変更されました。 Changes to CSS ::backdr... 続きを読む

大阪Ruby会議03でHotwireを使ったモーダルUIを15分で作ってみました＆基調講演裏話 #osrb03 - give IT a try

2023/09/10 17 users Hotwire community モーダルUI 基調講演

はじめに 2023年9月9日に開催された大阪Ruby会議03で、基調講演（キーノート）を担当させてもらいました。 regional.rubykaigi.org 当日使った資料はこちらです。 発表のタイトルは"Enjoy Ruby programming, Enjoy Ruby community!"でした。 今回の基調講演ではちょっと攻めた取り組みとして、「Hotwireを使ったモーダル... 続きを読む

ユーザーのインタラクションを伴うさまざまなUIコンポーネントをCSSで実装できる軽量フレームワーク -Ellegant CSS

2023/04/09 16 users インタラクション トグル UIコンポーネント CSS スイッチ

ハンバーガーメニューを使用したスマホ用のナビゲーション、アニメーションで表示されるモーダル、要素を表示・非表示するトグル、要素を切り替えるスイッチなど、ユーザーのインタラクションを伴うUIコンポーネントをCSSで実装できるフレームワークを紹介します。 Ellegant CSS Ellegant CSS -GitHub Ellegant CSSの特... 続きを読む

ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA

2023/04/06 119 users ICS MEDIA HTML ユーザーインタラクション 紹介

HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、... 続きを読む

Slack アプリでのモーダルの使い方完全ガイド - Qiita

2022/04/12 7 users Qiita seratch Slack インタフェース 瀬良

こんにちは、Slack の公式 SDK 開発と日本の Developer Relations を担当している瀬良 (@seratch) と申します この記事では、Slack アプリでエンドユーザーからの情報送信を受け付けたり、インタラクティブなインタフェースを提供するために利用できる「モーダル」について知っておくべきことを可能な限り全て網羅してい... 続きを読む

JavaScriptはなし、CSSで実装されたWebページでよく使用されるUIコンポーネントの超軽量ライブラリ -CSSUI

2022/02/14 16 users アコーディオン タブ UIコンポーネント CSS カスタマイズ

アコーディオン、モーダル、タブなど、Webページでよく使用されるインタラクティブなUIコンポーネントをCSSで実装する超軽量ライブラリを紹介します。 各UIコンポーネントは個別のCSSファイルで管理されており、JavaScriptは一切必要なし。デザインは非常にシンプルで、カスタマイズも簡単です。 CSSUI MITライセンスで... 続きを読む

CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック

2021/11/11 144 users 終点 連鎖 CSS ナビゲーション スクロール

スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。 モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合... 続きを読む

CSSで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法 | コリス

2021/07/12 313 users fixed コリス position パーセンテージ CSS

中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではない...記事の続きを読む 続きを読む

本当にあったモーダルの怖い話 / Terrifying Nonfiction of Modal - Speaker Deck

2021/07/07 18 users OOUI Speaker Deck 背景 開発効率 うち

ABEMA weber 勉強会 2021/06/30, 07/07 --- @uenitty 本当にあったモーダルの怖い話 ABEMA weber 勉強会 2021/06/30, 07/07 背景と目的 2 • モーダルに驚くほど苦しめられたので、状況を説明して改善方法を提案する • OOUIの特徴のうち「操作性 / 使いやすさ」についての説明はよく見かける ので、今回は「開発効率 / 作... 続きを読む

ヒューゴー、ネビュラ、ローカスと主要ＳＦ賞を総なめにした、エモーショナルな往復書簡時間ＳＦ──『こうしてあなたたちは時間戦争に負ける』 - 基本読書

2021/06/17 815 users ローカス ヒューゴー ネビュラ マックス エル

こうしてあなたたちは時間戦争に負ける (新☆ハヤカワ・ＳＦ・シリーズ) 作者:アマル･エル＝モータル,マックス･グラッドストン早川書房Amazonこの『こうしてあなたたちは時間戦争に負ける』は、アマル･エル＝モータル、マックス･グラッドスト二人の共作による、詩的な時間SFである。英語圏における小説の長さの基準的には... 続きを読む

Webページやアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSの超軽量ライブラリ -AnimXYZ | コリス

2021/03/16 16 users コリス CSS ライブラリ タブ アニメーション

ページが表示された時に要素をアニメーションで表示させたり、ギャラリーで画像を出し入れするようにアニメーションで表示させたり、モーダルやタブをアニメーションで気持ちよく表示させたり、Webページやスマホアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSのライブラリを紹介します。 CSSの外部... 続きを読む

Webサイトにモーダルは必要か

2021/02/11 11 users 備忘録 きっかけ 経緯 定義 分野

これは備忘録であり、閉じた空間で話したことをオープンにしたいと思って公開している記事です。文字起こしでありません。 経緯としては、僕がモーダルの不満をツイートしたのがキッカケで、情報設計の分野の大先輩の稲本さんに、とりあえず不満を聞いてもらいつつ、いっしょに意見を整理させてもらった。 定義 ここでい... 続きを読む

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

2020/03/19 152 users コリス Button インタラクション button要素 要素

<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイ... 続きを読む

オープンソースのReact.jsコンポーネントライブラリ「Flawwwless」 - エンジニア・プログラマのソーシャルITメディア

2019/09/03 56 users Documentation チートコード プログラマ npm

◆ Flawwwless https://ui.flawwwless.com/documentation/intro 紹介 「Flawwwless」は、yarn、npmでインストールできるオープンソースのReact.jsコンポーネントライブラリです。 100以上のアイコンや 5つのパターンが提供されたボタンとチートコード 新着通知に使うバッジや プログレスのほかフォームやモーダル、メニュ... 続きを読む

モーダルを開いている時にページがスクロールしてしまうのを防ぐCSSとJavaScriptのテクニック | コリス

2019/06/18 215 users コリス CSS テクニック JavaScript 場所

ページ上でモーダルを開き、スクロールして、モーダルを閉じると、通常そのページはモーダルを開いた時とは別の場所にスクロールされた状態で表示されてしまいます。そして、スクロールした状態で、モーダルを開いて閉じると、一番上にスクロールされた状態で表示されてしまいます。 これらを解決するCSSとJavaScriptの... 続きを読む

Chrome 73 で Desktop PWA Support & mdbuf アップデート - mizchi's blog

2019/03/13 52 users ウェブアプリ WIn PWAアプリ 待望 Mac

developers.google.com Signed HTTP Exchange もですが、個人的に待望だった Desktop PWA が正式リリース。 PWAアプリをウェブアプリのように振る舞わせることができます。 例えば mdbuf を開いて、「mdbuf をインストール」を選択すると… モーダルが出て Win/Mac のアプリのように立ち上がります mdbuf について https:... 続きを読む

どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS | コリス

2018/05/18 250 users コリス アコーディオン パララックスエフェクト スライダー

アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに... 続きを読む

Web制作者は要チェック！モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js | コリス

2017/10/10 66 users アクセシブル モーダルダイアログ コリス ライブラリ 開閉

ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドライン に準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モ... 続きを読む

20両編成「トヨタ専用列車」増発　青函トンネル用機関車も増備　JR貨物2017年3月ダイヤ改正 | 乗りものニュース

2016/12/22 12 users 増発 モーダルシフト 貨物列車 タイヤ トヨタ

JR貨物が2017年3月ダイヤ改正の概要を発表しました。トヨタの新型車生産開始にともない、専用の部品輸送列車を増発。機関車とコンテナ貨車421両、コンテナ4040個も新造されます。 「モーダルシフト」加速に向け輸送力増強、時間短縮へ 　2016年12月16日（金）、 JR貨物 は2017年3月4日（土）に実施する ダイヤ 改正の概要を発表。トラックから 貨物列車 へ輸送モードをシフトする「モーダル... 続きを読む

Wordpressのメニューとサイドバーをスマホ用に横からスライドイン表示させるカスタマイズ方法

2015/03/19 60 users WordPress グローバルナビ アコーディオン 本文

WordPressテーマのスマホ表示は、結構頭を悩ませるところです。 中でも特に、グローバルナビメニューや、サイドバーのスマホでの扱いには悩むところです。 僕はこれまで、グローバルナビの場合は、非表示にしておいて、アコーディオン表示させるか、モーダル表示させるかしていました。 サイドバーの扱いはもっとぞんざいで、回り込みを解除して、本文の下に表示させるということぐらいしか、できていませんでした。 ... 続きを読む

CSS3で気持ちよく動くフルスクリーンモーダル実装「animatedModal.js」:phpspot開発日誌

2015/03/11 49 users phpspot開発日誌 animatedModal.js

CSS3で気持ちよく動くフルスクリーンモーダル実装「animatedModal.js」 2015年03月11日- animatedModal.js CSS3で気持ちよく動くフルスクリーンモーダル実装「animatedModal.js」 モーダルというとポップアップウィンドウを思い浮かべますが、フルスクリーンで大きく使いやすそうなモーダル実装が出来ます。 フラットデザインで、タッチ端末にも使いやすそ... 続きを読む

[iOS8] Swiftでdelegateを使ったモーダル間の値渡し | エバーセンス開発ブログ

2014/12/08 18 users github.com delegate View Swift

モーダルを呼び出し、呼び出し元のコントローラーに値を渡す時のSwiftでの書き方について説明していきます。 サンプルコードはこちらから https://github.com/eversense/Swift-Delegate-Modal-Example 今回はメインとなるViewとモーダルとなるViewの2つを用意していきます。 ・ParentViewController：メインとなる画面（値の受け... 続きを読む

一定時間表示して消える通知用jQueryプラグイン「jQuery Toast」:phpspot開発日誌

2014/11/18 23 users phpspot開発日誌 jQueryプラグ 挙動 一定時間

Kamran Ahmed 一定時間表示して消える通知用jQueryプラグイン「jQuery Toast」。 最近流行りの通知方法で、複数の通知を表示することも可能。カスタマイズ性が豊富で、色や表示時間、コールバック等細かな挙動の指定が可能です。 関連エントリ ツールチップ、モーダル、通知等を一手に扱えるjQueryプラグイン「jBox」 ページ内にどんどん通知アラートを設定できるjQueryプラグ... 続きを読む

カッコよくカスタマイズされたグーグルマップをモーダル表示させてみよう | 株式会社LIG

2014/10/23 68 users マッコリ 株式会社LIG 実装 グーグルマップ はやち

どうもです、フロントエンドエンジニアのはやちです( ˘ω˘)✌ こないだ「ファイナルファンタジーX HD Remaster」をクリアしまして、マッコリ飲みつつ夜中4時頃エンディングに感動、号泣しとりました(◞‸◟) どうでもいいですね✌(´ʘ‿ʘ｀)✌ さて、今回は「JavaScriptが苦手なあなたへ！グーグルマップを簡単にカッコよくカスタマイズする方法」という記事でご紹介したマップの実装に、モ... 続きを読む

モーダルを閉じるボタンのUIは右か左か | Reflection

2014/07/23 173 users Reflection ナビゲーションバー iOS トリガー

モーダルビューを「閉じる」ボタンの位置は右に置くべきか左に置くべきか。iOSにおいてはナビゲーションバーの右と左の2択であるため、逆に迷ってしまいがちなのかもしれません。 よくある話としては「設定ボタンがナビゲーションバーの左にあるのなら、同じように左側に閉じるボタンを配置するべきではないのか…」といったことをよく聞きますが、トリガーとなるボタンの位置はあまり関係なく、その後のモーダルビューでの内... 続きを読む