Home Web Document ARIA Authoring Practices Guide (APG) APGのPatternsはWeb部品の実装コードのサンプルとしても参考になる TeaTea @teatea1024 11 Nov, 2024 09:56 +00:00 Last edited 11 Nov, 2024 09:57 +00:00 ARIA Authoring Practices Guide (APG)にはPatternsというページがあり、こちらでカルーセルやタブ、ツールチップといったWeb部品の実装コードのサンプルが紹介されています。 これらのコードサンプルは、HTMLのaria属性の付与方法について参考になるのはもちろんのこと、実際に動作するHTML・CSS・JavaScriptのコードが一通りそろっているため、こういったWeb部品の実装方法の一事例として参考になります。 例えば、タブのコードサンプルはExample of Tabs with Automatic Activationのページで「Open In CodePen」のボタンをクリックすることで見られます。
Home Web Service placekitten Placekittenはサービス終了？ TeaTea @teatea1024 30 Oct, 2024 12:16 +00:00 2024年に入って、Placekittenはもう何ヶ月も上手く動作していない模様。なので、ダミー画像用のサービスとしては、他のサービスに乗換が必要そう。 ちなみに、Placekittenに近いサービスとして、 https://placecats.com/ というサイトがあるそうです。 参考 https://iwb.jp/placekitten-com-image-replace-to-placedog-net/ https://www.reddit.com/r/webdev/comments/1bdx63f/placekitten/?rdt=51429
Home Standard CSS -apple-systemは、和文フォントを少し小さく表示する TeaTea @teatea1024 09 Sep, 2024 12:01 +00:00 Last edited 09 Sep, 2024 12:04 +00:00 CSSのfont-familyに-apple-systemを入れ、Appleのデバイスを利用してこの-apple-systemが効いている状態で日本語のWebサイトを見ると、和文が少し小さいフォントサイズで表示されます。つまり、-apple-system では12ptを指定しても和文フォントは12ptで表示されません。 ということで、Figmaなどのデザインツールで決めたフォントサイズをそのまま指定すると-apple-system では少し小さく表示される点には注意が必要です。 ちなみに、-apple-systemが何故このようなことになっているかというと、一般に欧文フォントより和文フォントを少し小さく表示した方が文字サイズのバランスが良いと言われているので、欧文フォントとの文字サイズのバランスを取ったためだと思われます。
APGのPatternsはWeb部品の実装コードのサンプルとしても参考になる
ARIA Authoring Practices Guide (APG)にはPatternsというページがあり、こちらでカルーセルやタブ、ツールチップといったWeb部品の実装コードのサンプルが紹介されています。
これらのコードサンプルは、HTMLのaria属性の付与方法について参考になるのはもちろんのこと、実際に動作するHTML・CSS・JavaScriptのコードが一通りそろっているため、こういったWeb部品の実装方法の一事例として参考になります。
例えば、タブのコードサンプルはExample of Tabs with Automatic Activationのページで「Open In CodePen」のボタンをクリックすることで見られます。
Placekittenはサービス終了？
2024年に入って、Placekittenはもう何ヶ月も上手く動作していない模様。なので、ダミー画像用のサービスとしては、他のサービスに乗換が必要そう。
ちなみに、Placekittenに近いサービスとして、 https://placecats.com/ というサイトがあるそうです。
参考
-apple-systemは、和文フォントを少し小さく表示する
CSSのfont-familyに-apple-systemを入れ、Appleのデバイスを利用してこの-apple-systemが効いている状態で日本語のWebサイトを見ると、和文が少し小さいフォントサイズで表示されます。つまり、-apple-system では12ptを指定しても和文フォントは12ptで表示されません。
ということで、Figmaなどのデザインツールで決めたフォントサイズをそのまま指定すると-apple-system では少し小さく表示される点には注意が必要です。
ちなみに、-apple-systemが何故このようなことになっているかというと、一般に欧文フォントより和文フォントを少し小さく表示した方が文字サイズのバランスが良いと言われているので、欧文フォントとの文字サイズのバランスを取ったためだと思われます。