Retina 対応のために img 要素の width, height 属性を再び付けるようにした
みなさんは img 要素に width, height 属性を付けていますか? 私は、ダイヤルアップ接続で画像を1枚1枚ゆっくり表示していた悠遠の時代は書いていましたが、ここしばらくはよほど重い画像をたくさん表示するページでもない限り、付けることはしていませんでした。 ところで、昨今は高解像度ディスプレイの普及に伴い、ウェブページに埋め込む画像も srcset 属性で高解像度版を用意したり、アイコン類は SVG にするなどの対応が求められるようになってきています。 その際、 Firefox において srcset 属性が設定された高解像度画像を横並びにすると、画像の右側におかしな空白が生じてしまいます。具体的にはこんなコード。 <style> ul { margin: 0; padding: 0; display: flex; } li { display: block; } </styl
覚え書き | @kazuhito
覚え書き、それはいわゆる日記的なもの。月別アーカイブもあります。 Raindrop.io Bookmarks 05/21/2024 2024年5月21日 著 The accessibility community is not the disability community • Buttondown"there is the disability community, composed exclusively of disabled people, who have to interact with disability constantly, and are largely focused on getting through their(/our) daily lives with a minimum amount of bullshit." Studio by WordPress.
ワンランク上のコーダーは万が一の配慮も欠かさない、リンク切れの画像要素をスタイルするテクニック
通常はお目にかかれませんが、リンク切れの画像があるのはいただけませんね。 画像がリンク切れだと、こんな風に表示されてしまいます。 もちろんリンク切れがないのがベストですが、絶対に存在しない訳ではありません。 よりよいユーザエクスペリエンスを提供するために、リンク切れの画像要素にスタイルを定義しておくことができます。 Styling Broken Images 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 img要素の2つのポイント リンク切れの画像要素のスタイル ブラウザのサポート状況 img要素の2つのポイント リンク切れの画像要素をどのようにスタイルすることができるか理解するために、最初に理解しておくべきimg要素の2つのポイントがあります。 img要素に通常の文字関連のスタイルを定義できます。 定義したスタイルは代替テキスト(
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
