It was difficult to scale the content according to the window width with flexbox (display: flex)

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

公開日: Wordpressのこと パソコンのこと

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 白黒ハチワレ猫の「モモ」、サバトラ猫の「ココ」という2匹の保護猫と暮らしています。
    WordPressというツールを使ったホームページ作りをしています。
    ココナラというサービスでWordPressサイトのカスタマイズ・修復・引っ越しなどを受け付けていますので、お困りのことなどあれば気軽にお問合せください。

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。



コメントをどうぞ