本来ならば普通に編集していけばいいのですが、CSSも万能ではないために少々頭を使ってレイアウトを考えます。ここで重要になってくるのが、余白の設定(マージン:marginとパディング:padding)と線の太さ(border)です。初心者用に崩れないレイアウトとはリニューアルにより、実際のテンプレートでは一部セレクタ名を変更しています。変更部分を置き換えてご確認下さい。レイアウト/段組に関係する部位と、実際にデータを入力する部位を分けています。<div>タグの入れ子になりますが、初心者にはこの方が安全と考えます。原理が理解出来ればすべて#contentsと#sidebarで指定可能ですよ。段組は#contentsと#sidebarで指定します。余白の指定は.contentsと.sidebarで指定します。よって、全体の幅を広げたり小さくする際は#contentsと#sidebarで指定して下さい。以下、2段組左サイドバーのサンプル1を使いながら、順を追って説明しますので気をつけて下さいね。考え方は1段組〜3段組まで共通です。枠を広げるにはそれでは幅を800pxに広げてみましょう。800px;】に変更します。ここの部分が全体を囲んでいます。以上で枠が全体的に800pxになります。【#header】【#box】【#footer】は【#container】の幅一杯に広がります。続いて【#contents】【#sidebar】部分の指定。【#contents】の幅の設定は上記の設定を踏まえた引き算です。サイドバー部分の幅は変更しないと考えると、全体の幅【800px】からサイドバーの幅【200px】を差し引いたものが【#contents】の幅となります。ここでは【600px】になりますね。CSSファイルの#sidebar部分ここでは変更していませんが、変更の場合は上記のように考えて下さい。ポイント基準は全体の幅【#container】です。【#contents】と【#sidebar】の幅の合計が【#container】の幅と同等か、或いはそれ以下になるように指定して下さい。初心者でも崩れないレイアウトを実現させる為に余白の指定は【#contents】内のボックス【.contents】、【#sidebar】内のボックス【.sidebar】で行っています。}の指定を全て【0px】にして下さい。線の指定は余白の指定と共にレイアウト崩れの大きな原因の一つで、初心者にとってちょっと厄介な部分です。当サイトのテンプレートはその点を回避する為に【.contents】と【.sidebar】を設けました。【ボーダー(border)の指定】も【.contents】と【.sidebar】側で行います。ここでは取りあえず【.contents】部分だけを例にとり、【.contents】の左側に罫線を入れてみます。#000000}ポイントmarginを【0px】とする事により【.contents】は【#contents】一杯に広がります。marginで指定した余白をpaddingで指定します。このようにする事により、全体のレイアウトを決めている【#contents】は変更することなくボーダー指定が可能となります。慣れてくれば、こんな回り道をしなくとも【#contents】側で全て指定出来ます。Reserved.サイトマップ。