Elasticは「しなやかな」という意味の英語で、Webデザイン用語では「可変レイアウトの一種」に当たる。可変レイアウトといえばブラウザ幅に合わせてレイアウトの最大幅が変化する「リキッドレイアウト」を思い出すが、どこが違うのだろう。エラスティックの場合、表示幅はリキッドレイアウトの%でなくem(s)で指定する。em(s)は1文字分の幅を単位とするサイズの指定方法なので、30emとした場合は30文字分の長さ相当と理解できる。この指定方法で情報ボックスの幅を決めるとどうなるか。例えば記事本文を表示するボックスを20emに指定すると、20文字分相当の大きさが適用される。この状態でユーザーが文字サイズを「中」から「最大」に変更したとする。情報ボックスの幅は文字サイズの変化に従って、最大サイズの文字で20文字分の幅に最適化される。つまりレイアウト全体が文字サイズの変更に伴い拡大することになる。幅サイ
![エラスティックレイアウトって何?](https://cdn-ak-scissors.b.st-hatena.com/image/square/bed39b5962a5d552c95b6d796db8f55e72d32943/height=288;version=1;width=512/https%3A%2F%2Fxtech.nikkei.com%2Fimages%2Fn%2Fxtech%2F2020%2Fogp_nikkeixtech_hexagon.jpg%3F20220512)