2017年01月17日(火)

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

• 0
• 6
• 0
• 4

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

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

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

モジュールの構成

マークアップの基本構成は、１つの

要素の中に2つの

要素を配置することです。最上部のサンプルでは、class名”column”で構成される要素が使用されています。以下のモジュールをご覧ください。

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

モジュール内の最初の

タグは空ですが、背景画像が「満たされ」ます。

最初の

タグでは1に「視覚的重さ」...