Elasticは「しなやかな」という意味の英語で、Webデザイン用語では「可変レイアウトの一種」に当たる。可変レイアウトといえばブラウザ幅に合わせてレイアウトの最大幅が変化する「リキッドレイアウト」を思い出すが、どこが違うのだろう。エラスティックの場合、表示幅はリキッドレイアウトの％でなくem(s)で指定する。em(s)は1文字分の幅を単位とするサイズの指定方法なので、30emとした場合は30文字分の長さ相当と理解できる。この指定方法で情報ボックスの幅を決めるとどうなるか。例えば記事本文を表示するボックスを20emに指定すると、20文字分相当の大きさが適用される。この状態でユーザーが文字サイズを「中」から「最大」に変更したとする。情報ボックスの幅は文字サイズの変化に従って、最大サイズの文字で20文字分の幅に最適化される。つまりレイアウト全体が文字サイズの変更に伴い拡大することになる。幅サイズをピクセルなどの絶対数値で定めたレイアウトは、文字サイズの大きさにレイアウトが最適化されず、結果的にレイアウトの崩れや読みにくさが生じる。相対的なレイアウトである％指定であっても、1行ぶんの文字数を固定できないので、表示幅が増えれば行の長さも増える。結果的に本文記事が読みにくいレイアウトになる場合もある。そんな問題を解決する方法がエラスティックレイアウト、というわけだ。
※幅サイズの指定にem(s)を利用する場合、1行ぶんの文字数には若干の誤差が生じる。20emとしても実際には22から23文字程度になる。ブラウザの種類によっても解釈は変わる点にも注意。また、半角英数字が混在するテキストでは1文字分の幅に2文字入るのでさらに文字数は増える。
※IE6の場合、文字サイズ「中」は14pt相当である。
