左右・２分割Ｂ
このページはレスポンシブウェッブの第一段階として、｢フルードグリッド｣と｢フルードイメージ｣の機能だけを使っていますので、左右の伸縮を確認出来ます。この内容が表示されているウインドウの幅をマウスで伸縮してみて下さい。
以下に記述したＣＳＳだけで、左右の幅が変わってもページの全域が一画面に表示されます。これは、フルードグリッドとフルードイメージが機能しているという事です。不完全ではありますが、一応レスポンシブウェッブにはなっています。
マウスでこのウインドウの左右の幅を伸縮すると画像は小さくなったり大きくなったり、テキストは画面からはみ出さないよう上下に動きます。このページでは、メディアクエリーは未使用です。
/* html 左ボックスと右画像の幅指定 */ style="width:45%;"
ボックスと画像にhtml内で各45%を指定
横に１つのボックスと画像が並んだときのサイズ指定も｢％｣を使いますが、最適な値（％）は以下のようにコンテンツの表示出来ないボーダーや余白を計算します。
このサイトの例で、表示幅を最小の３２０ＰＸを例に、横に罫線と内部左右の余白２０ＰＸの１つのテキストボックス(2Boder)と1つの画像の２列配置の場合
･ 320-(10×2)左右の余白 – 2(border) = 298px
・ 298 / 2 = 149 → １Boxのコンテンツ表示可能域 → 149 / 320 = 0.4656 → ４６％ になります