使いどころは、全てをレスポンシブに伸縮させる

CSS3の設定で、フォントサイズに「vw」という単位を使うと、スクリーンサイズに合わせてフォントサイズを自動的に伸縮させることができる。

イメージの伸縮に使うパーセント指定は既にお馴染みのことだろうと思うが、マージンや余白、フォントサイズまでパーセント指定のように使えることが出来れば、全てのアイテムがスクリーンの幅に応じて伸縮することになる。

その動作は、例えばA4をB4へ拡大コピーするようなものだ。だからレイアウトについては縦型の「(portrait)」と横型の「(landscape)」の二種類について考慮を始めれば良いと思う。必要があれば、ブレークポイントを差し込むような感じだ。

このところ、モバイルの縦型とタブレットの縦型、モバイルの横型とタブレットの横型の四種類のブレークポイントを設定して試している。

当たり前のようにピクセル単位を使ってあちこちに指定した筈のものを「vw」に置き換えて試してみよう。最初の内は手こずるかもしれないので、とにかく慣れることに徹することだ。

使用するパラグラフやヘディングのサイズは最初は厳密になる必要はない。使いこなすと自然淘汰される筈だ。ヘディングなんてh1からh6まで常時使うことはないから間引きしても構わない。初めは「h1とp」だけを使って慣れると良い。パラグラフのサイズは、特にモバイルではどの位のサイズが最適なのだろうか？小さすぎると閉口する。

もうひとつ、パラグラフの収まるボックスの幅はレスポンシブさせての試行錯誤が必要だ。本サイトでは、「読み易い文字数」を追及して現行のレイアウトに仕上げている。