klim0824のブックマーク - はてなブックマーク

CSSのメディアクエリを使ってレスポンシブに対応させる書き方｜たかもそ／Web Creator.
レスポンシブデザインには欠かせないメディアクエリですが、よく使う画面サイズの判定のほかにも、たくさんの機能があります。デバイスの機能やユーザーの設定によって、最適な表示を実装できたりします。意外と深いメディアクエリの書き方について紹介します。 <meta name="viewport" content="width=device-width, initial-scale=1">前提として、<head> 要素内にレスポンシブ用の <meta> タグを指定する必要があります。基本の構文メディアクエリの基本的な構文は、メディアタイプとメディア特性からなります。 @media <メディアタイプ> and (<メディア特性>) { ... }メディアタイプはデバイスの種類、メディア特性は画面サイズやデバイスの機能、環境などの特性を指定します。 @media screen and (max-widt
klim0824 2022/08/21
css
リンク
📝数値という理由だけで input[type="number"] 要素を使わない｜たかもそ／Web Creator.
フォームに入力する値といえば、電話番号や年齢、クレジットカード番号など様々です。しかし、数字を使っているからといってむやみに <input type="number"> 要素を使うと問題が起きます。数字であって数値でないWHATWG の仕様には次のように書かれています。 The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to use type=num
klim0824 2021/06/21
クレカ等はこれが良いとのこと→"type 属性に text を指定し、inputmode 属性を使うことです。inputmode 属性に numeric を指定することで、iPhone や Android で入力するときに数字キーボードが表示される"

html

form
リンク
🗣prefers-reduced-motionメディアクエリでアニメーション酔いに配慮する｜たかもそ／Web Creator.
近年、CSS や JavaScript の進化により、パララックスやスクロールとともにアニメーションしながら登場するエフェクトなど、演出のためのアニメーションがかなり増えました。 Web サイトに独自性を出すことができて重宝される一方で、過度なアニメーションによる画面酔いを訴える人も出てきています。そこで、CSS Media Queries Level 5 では、prefers-reduced-motion 特性が提案されています。過度なアニメーションとはアニメーションには本来、ロード画面やスケルトンスクリーンなど、ユーザーに現在の進行状況を伝えるという大事な役目があります。ここでいう過度なアニメーションとは、背景のアニメーションや画面全体に広がる背景動画、パララックスエフェクト、画面遷移などの本質的でないアニメーションのことです。パララックスエフェクトのように、背面と前面でスクロ
klim0824 2020/10/01
css

accessibility
リンク
🐛よくハマったFlexboxのバグまとめ｜たかもそ／Web Creator.
Flexbox はレイアウトを組むのに非常に便利ですが、バグがとても多いことでも有名です。最新のブラウザでも次々と新しいバグが報告されており、すベてを紹介するのは大変なので、自分がよくハマったバグをまとめます。なお、ベンダープレフィックスは省略しているので注意してください。 flex-flow: column wrap; がはみ出るdisplay プロパティに inline-flex を指定していたり、position プロパティに absolute を指定して絶対配置している場合、flex-flow プロパティに column wrap を指定すると Flex コンテナからはみ出てしまいます。バグが発生するブラウザ・Chromium Edge ・Firefox ・Chrome ・Safari ・Opera ・iOS Safari ・Android 30 以降 <div class=
klim0824 2020/03/28
css

flexbox
リンク
1