レスポンシブWebデザインを実装するためのTips

「レスポンシブ」って単語を知らない人でも、ウィンドウをウィンウィンさせてコンテンツがついてくるのを見せながら「こういうのがやりたいんですよね~」とか言っちゃうアレです。
どんなデバイスで見てもいい感じになるようにしろって意味で使われますけど、iPhoneですら1サイズじゃなくなったこのご時世ですよ、面倒な割に気軽に頼まれがちじゃない?

スマホが出だした頃はPC/SPの2パターンあれば満たされたのが、今は…………🙄
何種類あるかわからない端末に毎年増える解像度、そんなカオスな表示環境にどうやって対応するのよ????????
とまぁ毎年苦しめられた結果、色々と知見が増えたのでこれまでに調べたり使ったりした「レスポンシブ」を実装するための方法をまとめました。

“レスポンシブWebデザインを実装するためのTips” の続きを読む

[css, js] 404エラーのimgタグをいい感じにスタイリングする

詳しく書いてある記事はこちらで、
https://bitsofco.de/styling-broken-images/
imgがbroken状態になるとbefore, after擬似要素使えるからよしなにやっつければおkという意味である。
この記事ではbefore, after擬似要素に背景色をつけてposition:absoluteで上に被せて消している。

私の場合は

  • どんなサイズの画像があるか事前にわからない
  • レスポンシブ
  • NO IMAGE画像素材を使う
  • Retina対応もする

ていう条件があった。
“[css, js] 404エラーのimgタグをいい感じにスタイリングする” の続きを読む