input[type=file]をCSSでデザインするときにスクリーンリーダーに対応する方法
input[type=file]はデフォルトで表示される文字がブラウザで決まっていたりなどデザインしにくい。 そういったときは、label要素などを使用することで、CSSでデザインしていくが、単純にdisplay: no …
HTML/CSS
HTML・CSSなどのマークアップ言語やスタイルシートについて
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”を利用することで、現在のページであることを機械的にも示すことができるから、そちらを優先して使う。
あなたはいつも極端ね
短くしてっていったからって、短すぎて意味がわからないほどに省略されているのよ。あなたのクラス名は。 それにプロパティのショートハンドは、カスケーディングを加速させるからあまりに使いすぎると逆に管理しにくくなるし、パフォー …
Tailwind CSS を使用した感想
良かった点 プロトタイプを作成する場合は、すごく早くできる 使用していないクラスを自動削除してくれる機能はとてもありがたい よく設計されていて、そこまで多くクラス名を調べる必要がなく、また良しなに調整してくれるクラスもあ …
SVGファイルのアスペクト比を固定させない方法
preserveAspectRatio=”none”を指定する。
オートコンプリートでよく使う値
ブラウザに保存されている情報から入力補完するオートコンプリート機能を使う場合、下記のようにフォーム要素に指定する必要がある。 この中から、よく使うものを抜粋してご紹介。name属性を同じにして使うとブラウザもautoco …