「未満」を表現！メディアクエリの「not」キーワード | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。エンジニアのつっちーです。 以前に、「メディアクエリの書き方に注意しないと、ウインドウ幅と表示倍率によっては、スタイルの適用されない状態が発生してしまう」という内容の記事を書きました。 今回はその続編です。前回の記事では、対策として以下の2点を挙げ、基本的には1の方法を利用すべきであるとまとめました。 メディアクエリの設定をmin-widthかmax-widthに統一する（推奨） メディアクエリの設定に小数を利用する（非推奨） でも、たまにこの方法では不便なケースにも遭遇します。そんなときに便利なnotというキーワードがあったことを、最近になって知りましたので、もう一つの解決策として取り上げてみます。 こんなとき、min-widthかmax-widthに統一するのは大変…… 上に書いたとおり、メディアクエリはmin-widthかmax-widthに統一したいものです。ブレイクポ
実装が簡単で、動作も快適！CSSのみで実装されたアニメーションも気持ちいいモーダルボックス- Light Modal
一昔前までは、完全にJavaScriptの領域でした。 IE9+を含む、すべてのモダンブラウザで動作する、CSSで実装されたモーダルボックスを紹介します。 非常に軽量なので動作も快適、そして実装も簡単と3拍子揃ったスタイルシートです。
Web制作者は要チェック！モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js
ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドラインに準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モーダルを閉じる。 escボタンを押すと、モーダルを閉じる。 モーダル内のタブをフォーカス。 モーダル内の最初のフォーカス可能な要素にフォーカスを合わせる。 モーダルを閉じた後、フォーカスされた要素の状態を保持。 Micromodal.jsのデモ デモでは実際の動作を楽しめます。 モーダルを閉じるトリガーは、Closeボタン、Xボタン、オーバーレイのクリック、escボタンが用意されています。
10 Pure CSS Modal Window Snippets - Developer Drive
Modal windows were always the realm of JavaScript and there are plenty of scripts to try. But with CSS3 it’s even easier to create a modal in pure CSS. The effects are somewhat limited but you can still make an excellent experience without relying on scripting. Most of these CSS examples are scattered to various corners of the web so I’ve curated some of the best ones here. These vary from simple
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
hunzaboy.github.io
