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

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

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

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

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

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

Webデザイナー育成スクール「Web Buddy(ウェブバディー)」では、卒業後すぐにWebデザイナーとして活躍することを目的とした、より実践的なスキルを学ぶことができます。
卒業後には業務委託契約を結んで実務経験を積むことも!!

スクールのお申し込みや講義についての質問など、お問い合わせはこちらのフォームをご利用ください。