使い始めたら手放せないフレキシブルボックスレイアウトモジュールについて熱く語ります。
注）
これは6年前に社内向けレポートか何かで書いたやつだと思います…（うろ覚え）
今でも通用する内容だったのでドライブにあった原稿を転載しました。
内容が古いところは加筆修正してます。
Responsive
レスポンシブWebデザインを実装するためのTips
「レスポンシブ」って単語を知らない人でも、ウィンドウをｳｨﾝｳｨﾝさせてコンテンツがついてくるのを見せながら「こういうのがやりたいんですよね～」とか言っちゃうアレです。
どんなデバイスで見てもいい感じになるようにしろって意味で使われますけど、iPhoneですら１サイズじゃなくなったこのご時世ですよ、面倒な割に気軽に頼まれがちじゃない？
スマホが出だした頃はPC/SPの2パターンあれば満たされたのが、今は…………🙄
何種類あるかわからない端末に毎年増える解像度、そんなカオスな表示環境にどうやって対応するのよ？？？？？？？？
とまぁ毎年苦しめられた結果、色々と知見が増えたのでこれまでに調べたり使ったりした「レスポンシブ」を実装するための方法をまとめました。
[CSS,JS] 404エラーのimgタグをいい感じにスタイリングする
詳しく書いてある記事はこちらで、
https://bitsofco.de/styling-broken-images/
imgがbroken状態になるとbefore, after擬似要素使えるからよしなにやっつければおkという意味である。
この記事ではbefore, after擬似要素に背景色をつけてposition:absoluteで上に被せて消している。
私の場合は
- どんなサイズの画像があるか事前にわからない
- レスポンシブ
- NO IMAGE画像素材を使う
- Retina対応もする
ていう条件があった。