コンテナの幅を設定する（その壱）

5つのこんてなのうち、メインコンテナ、ページ下部コンテナ、フッターコンテナは、PC向けのレイアウトだけ幅を固定する

ユーポートの中央に配置する

CSS にコンテナの幅と配置方法を設定する

1～3 のスタイルは、コンテナ HTML セットの子要素に適用する

ヘッダーコンテナとパンくずリストコンテナの CSS 設定は次節で設定する

コンテナの幅を設定するために、コンテンツが収まる領域の幅を調べる

背景とボーダーラインは無視して、コンテンツが収まる領域だけを見る

左右にパディングを 20px に設定する

ページがビューポートの幅一杯に広がって表示されるように設定する

テキストやその他のコンテンツがピューポートの端に付かないようにパディングを設定する

ヘッダーを除く各コンテナの左右のパディングを 4% に設定する

同じコンテナに含まれる一番幅の大きいコンテンツの左右端間の長さを確認する

上部の見出し、画像が一番は版大きいコンテンツになる

例としては、最大幅を 1000px とし、左右パディングを加えて 1040px

コンテナに含まれるコンテンツをブラウザウィンドウの中央に配置する

コンテナ HTML セットの子要素 2 の左右マージンを auto にする