全てのウェブコンテンツ技術
これは、次の達成基準に関連する実装方法である：
この実装方法の目的は、表示領域幅の広狭に順応するレイアウト手法を用いることで、横スクロールバーが挿入されることなしに、コンテンツを表示できるようにすることである。オンスクリーン・ディスプレイ【訳注：ディスプレイの本体側面などに調節用のつまみがついているのではなく、画面上で各種設定を行うディスプレイ】に対応できるように、必要に応じてテキストサイズが変更できること、テキストを流し込み直せることの両方が可能なレイアウト領域を、リキッドレイアウトによって定義する。したがって、きっちりと決まったレイアウトとはならないが、各要素の関係と描画の順序は同じままである。さまざまなデバイスで問題なく表示できたり、通常とは異なるフォントサイズに設定変更しているユーザーに対するデザイン制作という面で、リキッドレイアウトは効果的な手法である。
リキッドレイアウトの基本原則は次のとおりである。
レイアウト領域を、テキストに応じてサイズが変わるユニットを利用して定義する。つまり、テキストの拡大縮小と同じように、レイアウト領域が広まったり狭まったりする。
レイアウト領域を、フロートボックスを隣り合わせで横に並べたように配置する。つまり、パラグラフの中の各単語とほぼ同じような方法で、必要に応じて行送りされる。
複雑なリキッドレイアウトの実現には、入れ子にしたレイアウト領域、つまり大きな領域の中に部分ごとの複数の領域を入れ込む方法を利用する場合がある。単純なリキッドレイアウトであっても、テキストサイズの違いに関わらず見た目のよさを損なわないようにデザインを工夫する必要があるとはいえ、十分に計画したリキッドレイアウトは最も効果的なページデザインとなるだろう。
以下は、リキッドレイアウトの実現にHTMLとCSSを利用した、かなり単純な事例である。3つの列はテキストサイズが変わるのと同じようにサイズ調整される。もし全ての列を足した幅が、3つの列で利用できる幅の合計を超えてしまった場合、最後の列は前の列の横に置かれるのではなく、下に送られる。列に含まれるテキストの中で最も長い単語が列の幅におさまっている限り、フォントサイズを大きくすることができ、ブラウザの横スクロールバーへの影響はない。この事例では列の幅指定にパーセントを利用しており、「float」プロパティを利用して列をフロート領域として定義している。
コード例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>単純なリキッドレイアウトの例</title>
<style type="text/css">
.column
{
border-left: 1px solid green;
padding-left:1%;
float: left;
width: 32%;
}
#footer
{
border-top: 1px solid green;
clear: both;
}
</style>
</head>
<body>
<h1>WCAGの例</h1>
<h2>3つの列に含まれるテキスト</h2>
<div title="1列目" class="column">
<h3>Block 1</h3>
<p> この実装方法の目的は、表示領域幅の広狭に順応するレイアウト手法を
用いることで、横スクロールバーが挿入されることなしに、コンテンツ
を表示できるようにすることである。
</p>
</div>
<div title="2列目" class="column">
<h3>Block 2</h3>
<p> これはとても簡単な例であり、テキストサイズの変化に順応するページ
レイアウトである。
</p>
</div>
<div title="3列目" class="column">
<h3>Block 3</h3>
<p> より複雑なページレイアウトに関する実装方法については、以下の参考
リソースを参照のこと。
</p>
</div>
<p id="footer">Footer text</p>
</body>
</html> この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
ユーザーエージェントでコンテンツを表示する。
テキストサイズを200%に拡大する。
ブラウザの横スクロールバーが表示されることなしに、すべてのコンテンツが表示され、すべての機能が利用できるか確認する。
3.を満たしている。
注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。