HTMLで画像のデコード処理を考慮した属性の付与
参考：https://zenn.dev/sugamaan/articles/9adab715122679 デコードとは、異なる形式に変換されたデータを元の状態に戻すことであり、画像のデコード処理というのは、画像データをH …
HTML/CSS
HTML・CSSなどのマークアップ言語やスタイルシートについて
StoryBook for HTML の使い方
sassとアドオンを使う場合、.storybook/main.js に下記を追記。 @storybook/addon-a11y を使用する場合は .storybook/preview.js に下記を追記。 下記のようなテ …
time要素を使用した構造化データ対応方法
なるべくjson形式にしたほうがいい。datePublishedはdate-time属性を参照すると思ってたんだけど、どうやら textnodeを参照するため、表記に制限ができてしまう。 https://develope …
閉じるボタンのアクセシビリティ対策
スクリーンリーダー用のクラスを使う以外の方法では下記のようにaria-describedby属性を使用する方法がある。 説明ではなくラベルとして利用するテキスト説明にとどまる場合は、aria-labeledby属性を使用 …
iOSでuser-scalable=noが効かない話
「user-scalable=no」がiOS11くらいから効かなくなったようだ。ちなAndroidでは効くし、Lighthouseのアクセシビリティでは減点される。 効かないといっても、16px未満のテキストボックスをフ …
IBM Plex Sans JP（v5.2.1）の使い方
IBMの新しいフォントの使い方。ほとんどREADMEに書いていることと同じ。 https://github.com/IBM/plex/ こちらからソースコードを入手する。 sassファイルに下記を記述しDart Sass …
input[type=text]でキーボードの種類を決定する方法
type属性をemailに変更するとか、pattern属性で入力できる文字を指定するとかあるが、どうしてもtype=textにする必要がある場合。 まずpattern属性にすると、pattern属性は form[nova …
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 の複製もできないし。 その根 …