はてなブックマーク

WEBにおけるレスポンシブ対応では、これまでメディアクエリが多用されてきました。 メディアクエリは便利ですが、画面幅と実際にコンテンツが配置されたエリアの幅の乖離が大きい時に問題が起こりやすくなります。 特に、サイドバーのあるページでは、画面幅は十分広くてもメインエリアが狭いため、カードコンテンツが横並びになる画面サイズなのに実際の表示は窮屈になっている、というようなことがよく起こってしまいます。 このページでは、そのようなメディアクエリの問題を回避するためのレイアウト手法をいくつか紹介していきます。 メディアクエリの問題点をおさらい 以下の例では画面幅 760px を境にして横並びへ切り替えています。 サイドバーがあると「760px以上なのにメインエリアは狭い」 という帯域が生まれるため、760pxより少し大きいくらいの画面サイズ付近で読みづらいレイアウトが発生していることが確認できます

WEBサイトは、様々な文字情報から構成されます。 キャッチコピー、本文、見出し、注釈、ボタン、その他コンポーネント等々。 そしてこれらの情報を配置していく時に、各コンテンツ間が見やすくなるように、余白が必要です。 「文字と余白のサイズ」をどのように決めるかは、サイトのデザインに大きく影響するだけでなく、情報の伝達というWEBの本質にも関わってきます。 タイポグラフィには文字によって情報を伝達するという明白な義務がある。 エミール・ルーダー 『タイポグラフィ』 モジュラースケーリング そこで、個人のなんとなくの感覚でサイズ感を決めるのではなく、数学的・周波数的に美しく調和した比率（例えば、黄金比の1.618、完全五度の1.5など）を使ってサイズバリエーションを導き出そうというのが、「モジュラースケーリング」と呼ばれる手法です。 例えば、以下のボックスは、比率1.5の等比数列で段階的にサイズを