フレックスボックス(display:flex)でウインドウ幅に応じてコンテンツの拡縮をするのが大変だった件

公開日:2021(令和3)年6月11日/最終更新日:

,
WordPress



サイトでのデザイン設定の話です。結論から言うと、そもそもフレックスボックス使わなきゃいいんじゃないの?という単純なオチだった。

フレックスボックスは何かを横並びに表示したい!という時にすごく簡単にできるデザインコード。昔はこれを使ってもきちんと表示できるブラウザが少なかったけど、IEの開発が終了し、その他のブラウザでも対応するようになってきたので、結構使っている人多いと思う。

この一文でネタバレになってしまうけど、フレックスボックスが登場する以前は、floatを使って左から表示できるだけの列を順に表示していきなさい(回り込みなどに使う)というのが主流だったのは、古くからサイト作りをしている人なら当然ご存じだろう。

今回とある人から「画面下部にずっと表示される、Call To Actionコンテンツ(電話したりメールしたりというのがボタン表示されるやつ)を作ってほしい」と依頼され、安易に「そんなのフレックスボックス使えば一発!」なんて考えていたのが大間違いだった。

デモを作って「ハイ、できましたよ~」と連絡したら、「拡大縮小に応じて固定コンテンツも拡大縮小されるようにしてほしい」って返事が来たんです。

いやいや、きちんと確認してるし・・・と思いながら「こちらではきちんとできてるけど」と返事するも、やはりできてないとのこと。

いったい何?何が見えてるの?どうなってんの?とお互いにかみ合わないまま何度かやり取りした。

結局私が思っていた拡大縮小は、ブラウザが全画面表示の状態でブラウザの拡大縮小機能で見たときの動き、依頼してくれた人が見ていた拡大縮小は、ブラウザを非全画面表示にした状態でウインドウ幅を拡大縮小したときの動きという完全に双方の認識に齟齬があったということが発覚した。

なるほどねぇ・・・ようやく指摘されていることに納得!!

で、そのまま(フレックスボックスのまま)CSSでうまいことやりこなそうとする。相対なんだから「em」「rem」「%」「vw」「vh」、ごちゃごちゃと調整。ただ、ウインドウ幅の問題が解決するとブラウザの拡縮で問題が出て再び調整の繰り返し、ようやく何となく形になったので一旦「おやすみなさいzzz」

その夜、夢の中で天の声が!!

「そんなもの、フレックスボックスじゃなくfloat使ったら一発じゃぞ!」(誰の声??)

目が覚めて、天の思し召しに従ってCSS(デザインコード)を作り直す。結論

「なーーんだ、簡単にできるじゃないの!!」

結構苦労したのに・・って話だけど、また一つやれることの引き出しが増えたからよしとしよう。

天の声の主はひょっとすると「ピッピーーー」のこいつかもしれん。

フレックスボックス(display:flex)でウインドウ幅に応じてコンテンツの拡縮をするのが大変だった件|Ordinary Life

追伸:頑張ればフレックスボックスでもウインドウサイズに合わせて拡縮はできる。でも徒労に終わる可能性が高いから、素直にfloat使おう!


パソコン画面の右下へ「ウイルスに感染している可能性があります」とポップアップ表示(通知)が出る原因と対処
パソコン画面の右下へ「ウイルスに感染している可能性があります」とポップアップ表示(通知)が出る原因と対処