input[type=text]でキーボードの種類を決定する方法
type属性をemailに変更するとか、pattern属性で入力できる文字を指定するとかあるが、どうしてもtype=textにする必要がある場合。 まずpattern属性にすると、pattern属性は form[nova …
HTML/CSS
HTML・CSSなどのマークアップ言語やスタイルシートについて
Webサイトでカラーミーショップのどこでもカラーミーのボタンを任意のデザインで追加する方法
https://help.shop-pro.jp/hc/ja/articles/1500004175622-%E3%82%AB%E3%83%BC%E3%83%88JS%E6%A9%9F%E8%83%BD-%E3%81%A …
見えないけどそこにあるフォント Adobe Blank Font
https://github.com/adobe-fonts/adobe-blank これを使うと空白も生じず、なにも表示されないから、inline-blockの隙間に有効活用できるがいまinline-blockでレイア …
キャンセルだというのに、なぜ値を削除するんだい？
input[type=file]でキャンセルすると保持していた値が消える問題。そもそも value もアップロードされたファイルのパスではないし扱いにくい。JavaScriptで value の複製もできないし。 その根 …
input[type=file]をCSSでデザインするときにスクリーンリーダーに対応する方法
input[type=file]はデフォルトで表示される文字がブラウザで決まっていたりなどデザインしにくい。 そういったときは、label要素などを使用することで、CSSでデザインしていくが、単純にdisplay: no …
IE11のサポート終了が早まってうれし。
IE11のサポート終了が正式に発表された。2022 年 6 月 15 日 となり、予定よりも3年ほど短くなった。https://blogs.windows.com/japan/2021/05/19/the-future- …
summary ＆ details
HTMLタグでアコーディオン が簡単に実装できるようになったらしい（IEを除く）。
display: none; の DOM で CSS アニメーションを使用する方法
animation プロパティを使用するといい。
CSS Overview が便利
今頃知ったが、Chrome Developer Toolで CSS Overview という機能が実装されていた。歯車マークの Setting -> Experiments の CSS Overview をオンにすると使 …
なるだけWAI-ARIAをつかって、状態を示すクラスを排除しよう。
たとえば、is-currentなどのクラスをつけるよりも、aria-current=”page”を利用することで、現在のページであることを機械的にも示すことができるから、そちらを優先して使う。