1月の半ばが過ぎていってますが…

インフルエンザや、COVID-19が流行ってるそうですね。

体調にはしっかりと管理をしてくださいね。

話を取り戻して…

レスポンシブ対応に「フレックスボックス」がメインになる！

近年、Webの進化がすごく変化を感じているこのころ…

レスポンシブ対応に、「フレックスボックス」がよく使われるようになってきましたね。

参考サイト
【flexbox】レスポンシブのサンプルデザイン

こちらは、いつも「Float」を使いながらレスポンシブ対応としてコーディングをしてきましたが…

タブレット版や、スマホ版を使う人が増えつつ、「Float」の時代ではなく、「Flexbox」をよく使う時代になってきました。

取引先のお客様にも、ちょっとしたお詫びを兼ねて、無償でレイアウトのデザインを行っています。

タブレット版や、スマホ版に対応した意識をしながら、「Flexbox」のデザインを心構えるようになりました。

横幅の設定も、「width: calc( 100% / X – Y );」を設定する必要になりました。

レスポンシブ対応なので、可変サイズにいつでも対応しなければなりません。

PC版、タブレット版、スマホ版の3つの要素を考えながら可変サイズを組み立てて、見やすさを常に意識しながら技術を向上していきましょう。

あと、フレックスボックスについてのブログはすでに紹介していますので、ご参考までに。

・忘備録～「UL」or 「OL」編 – display:flex – ～
・忘備録～「UL」or 「OL」編 – display:flex – ～

フレックスボックスについて、また時間があったときに説明しますね。

ではまた！