数ステップで完了！Flexboxを使ってテキストと画像を最適化する方法

デザイナーの仕事の一つは、テキストと画像をバランスよく調和させること。一方を活かすためにもう一方を殺してしまうようなウェブページではいけません。

 

特にコールアウト-一般的には小さなテキスト一文と画像1枚という構成-では重要なポイントになります。スクリーンサイズやコンテンツボリュームの変化に適応できる流動性が必要です。

 

 

 

実験の結果、上記どちらの変化にも対応できる方法を見つけました。Flexboxと背景画像の組合せです。

 

 

モジュールの構成

マークアップの基本構成は、１つの<figure>要素の中に2つの<div>要素を配置することです。最上部のサンプルでは、class名”column”で構成される要素が使用されています。以下のモジュールをご覧ください。

 

 

<figure>要素には以下のCSSが組まれています。

 

 

モジュール内の最初の<div>タグは空ですが、背景画像が「満たされ」ます。

 

 

最初の<div>タグでは1に「視覚的重さ」を与え、2つ目の<div>タグでは2に価値を与えます。2つ目のタグはデフォルトで必ず最初のタグの倍の幅になるようになっています。

 

<figure>要素内のテキストもスタイル指定します。

 

 

<div>の最後の段落はmargin-bottomをなくすよう指定して、要素全体の高さに影響が出ないようにします。

モジュール要素の画像表示にはfirst-of-typeかnth-of-type、またはpseudo-class セレクタなどの疑似クラスを使います。

 

 

 

 

 

 

 

得られる効果は？

CSS定義の結果、モジュールの左側全体は常に写真で満たされ、リスポンシブコンテナを横方向にサイズ変更しても、コンテンツボリュームが変わっても臨機応変に拡大、縮小されます。（モジュール段落に追加や削除などの編集を加えることで試せます。）

 

以下のようにレイアウトを反転することもできます。

 

 

 

 

 

限界は？

ビューポートによってモジュールが狭められると、そのうち画像は長くなりすぎてしまいます。

 

その時の対応として、基本的なブレークポイント（margin、line-height、font-sizeやpaddingの縮小など）の他に選択肢が2つあります。

 

① モジュールの子要素の視覚的「重さ」を均一化し、画像とテキストのバランスを変える。

② それぞれのモジュールのレイアウトを縦に変更する。

 

 

 

 

 

大きすぎたり小さすぎたりするとき

このような対応をすることで、コールアウトボックスにはいつもテキストが最低限表示されるようになります。

本当に完璧なシステムであればその両方をチェックしましょう。JavaScript（または将来的にはelement queriesなど）を使ってそれぞれのボックスの縦横比をチェックします。もしボックスが横に広いのではなく、むしろかなり縦に長かった場合にはそれぞれのflex-directionを素早く切り替えます。

 

原則として、通常のテキスト横に画像表示する構成であればobject-fitでも同様に機能するはずですが、実験の中では多くの問題が確認されています。

 

また、CSSグリッドの仕様も役に立ちそうですが、どちらもさらなる調査と実験が必要です。

 

 

 

 

 

※本稿は「Balancing Text and Images with Flexbox」を翻訳・再編集したものです