エラスティックレイアウト

エラスティックレイアウトとはデバイスの文字表示サイズの変更に応じてページの要素が伸縮するレスポンシブデザインの一手法を指します。
Elasticは「しなやかな」という意味を持ち、要素の単位にemやremを使用することにより、視力の弱いユーザーが文字サイズを大きくした際もページのレイアウトが破綻しにくいのが特徴です。

この「em(s)」とはサイトの1文字分の幅を指し、「10em=10文字分」という意味です。 具体的にはこの単位でボックスや写真の横幅を仮に10em指定した後、画面で使用されている1文字サイズが変更されるとそれに伴ってサイト全体でemを使用した要素の大きさが変化するといった具合です。

そのほかの手法には%やvwを単位に使用し、デバイスのサイズごとに要素の大きさが最適化される、リキッドレイアウト。
格子状の枠を張り巡らせ、それにそってコンテンツを配置していくグリッドレイアウトが存在します。

以上3つがWebデザインにおけるレイアウトの基本手法です。
これらの種類を把握しておくとクライアントの要望を理解し、的確に答えやすくなるため知識として抑えておきましょう。

エラスティックレイアウトの説明のイメージ

当社では、Webパフォーマンスを意識し、ユーザーに配慮したサイト制作を行っています。
デザイン制作の事なら豊島区のデザイン・システム会社のブルートラストへお気軽にお問い合わせくださいませ。

お問い合わせは こちらのフォームをご利用ください。