ホームページ制作 島根県

ホームページ全体の横幅の変更方法について解説します。前頁 CSS:floatレイアウトの基本 で使用したサンプルレイアウトを例にします。

(x)HTML

<div id="wrapper">
<div id="header">***データ***</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

ヘッダー部分（#header）、コンテンツ部分（#content）、サイドバー部分（#sidebar）、フッター部分（#footer）はすべて親ボックスの#wrapperの中に包括されています。よって、ホームページ全体の横幅を変更するにはcssの#wrapper部分のwidthを変更してやります。

この時、ヘッダー部分（#header）とフッター部分（#footer）は幅指定をしていないので、今回のようにホームページ全体の横幅を変更しても、レイアウトに及ぼす影響はありません。（今回は、最も簡単でシンプルな段組を採用しています。）#wrapperのwidthに合わせて伸縮します。

コンテンツ部分（#content）とサイドバー部分（#sidebar）はwidth指定と、float指定でそれぞれ左右に配置しているので、#wrapperのwidthに合わせて変更してやらなければなりません。

Page Top

横幅計算の基本

横幅を変更する際の簡単な四則計算について説明しておきます。

仮にサンプルの横幅を760pxとした場合サンプルホームページはどうなるでしょう。この場合は#sidebarが#contentの下へ落ちてしまいレイアウトが著しく崩れてしまいます。cssソースを見ても一目瞭然で、#contentのwidthが600px、#sidebarのwidthが200px、合計で800pxなので760px内に納まるわけがありません。

横幅変更の際だけでなく、ホームページを作成する際の横幅は、基準となる要素（今回は#wrapper）の中にそれぞれの内包要素が納まるように指定しなければなりません。

今回は、各要素の余白（ margin padding ）やborder指定をしていませんが、これらの指定を加えていくと、初心者の場合、必ずと言っていいほどレイアウト崩れを起こします。その場合でも、基準となる要素内にそれぞれの要素が上手く納まるように計算するのが基本です。つまり、簡単な足算と引算が最も重要という事です。

関連：CSSレイアウト崩れの原因について

Page Top

横幅を小さくするには

横幅を小さくする（狭くする）指定について説明します。今回は#wrapperを760pxとして解説します。

基準要素の幅が760pxとなるので、#content、#sidebarのwidthを760px、もしくは760px以下に指定しなければなりません。考えるのは、#contentのwidthを小さくする、あるいは#sidebarのwidthを小さくして、#contentと#sidebarのwidthの合計が#wrapperのwidth:760px;と同等か、あるいは760px以下になるように計算する事です。以下は、横幅を小さくする（狭くする）際のcssサンプルの一例です。

#contentの幅を変更のパターン

#wrapper{ width: 760px; }

#header{ height: 120px; }

#content{
    width: 560px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#sidebarの幅を変更のパターン

#wrapper{ width: 760px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 160px;
    float: left;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#content #sidebarの幅を変更のパターン

#wrapper{ width: 760px; }

#header{ height: 120px; }

#content{
    width: 580px;
    float: right;
}

#sidebar{
    width: 180px;
    float: left;
}

#footer{ clear: both; }

Page Top

横幅を大きくするには

横幅を大きくする（広くする）指定について説明します。今回は#wrapperを860pxとして解説します。

基準要素の幅が860pxとなるので、サンプルの指定のままでは#contentと#sidebarの間に60pxの空白が生じてしまいます。（これは実際には、レイアウトを崩さない為の指定テクニックです。）よって#content、#sidebarのwidthを860px、もしくは860px以下になるように指定します。考えるのは、#contentのwidthを大きくする、あるいは#sidebarのwidthを大きくして、#contentと#sidebarのwidthの合計が#wrapperのwidth:860px;と同等か、あるいは860px以下になるように計算する事です。以下は、横幅を大きくする（広くする）際のcssサンプルの一例です。

#contentの幅を変更のパターン

#wrapper{ width: 860px; }

#header{ height: 120px; }

#content{
    width: 660px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#sidebarの幅を変更のパターン

#wrapper{ width: 860px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 260px;
    float: left;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#content #sidebarの幅を変更のパターン

#wrapper{ width: 860px; }

#header{ height: 120px; }

#content{
    width: 640px;
    float: right;
}

#sidebar{
    width: 220px;
    float: left;
}

#footer{ clear: both; }