コンテナを削除して横幅いっぱいに表示する

最近はJimdoに限らずコンテナ(container)にコンテンツを収め、閲覧する環境の画面の広さ(特に横幅)に影響されにくいレイアウトにするのが主流です。

 

レアなケースかもしれませんが、画面が広ければ広いだけ表示領域に使いたい場合には、コンテナを削除するという単純な方法で、これを実現できます。

 

ちょっと意外ですが、独自レイアウトのcontainerは必須ではないのです。

 


図で説明します。

 

コンテナは右の図の白い部分です。

 

これを削除して・・・

このようにします。

HTML

まず、HTMLです。

containerのdivタグを単純に消せばよいのですが、後で戻したいときに面倒になるので、名前を変えるだけにします。

 

CSSのcontainerはそのままにして、わざとHTMLと合わないようにしておくということです。

 

修正前

<div id="container">
    <div id="header">
    ~中略~
    </div>
</div>

修正後

<div id="container-off">
    <div id="header">
    ~中略~
    </div>
</div>

CSS

HTMLの編集でcontainerが無くなると、bodyが各コンテンツの背面に来ます。

 

bodyのデフォルトのbackgroundは灰色です。

そのままだとナビゲーションが見えなくなるので、白に変えておきます。

修正前

body {
    background: #333333 url(bg.gif) no-repeat top left;
    padding:35px 0 0 0;
    margin:0;
    font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
}

修正後

body {
    background: #ffffff url(bg.gif) no-repeat top left;
    padding:35px 0 0 0;
    margin:0;
    font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
}

 

最終的な結果は下の画のようになります。

 

 

いかがでしたでしょうか?

 

今回は予告通り軽めの内容でした。

 

「PagePartner」がリリースされて盛り上がるjimdoですが、当サイトでは引き続きニッチなTipsを取り上げていきたいと思います。

 

もちろん「PagePartner」にも興味があるので、そちらも近いうちに挑戦するつもりです!

 

ではまた~