２カラムと３カラムのレイアウト

テンプレートの枠を組む際、HTML内にdivと呼ばれるタグを使ってブロックを囲んでいきます。このマニュアルで紹介しているテンプレートは、基本的に下記のような構成になっています。

２カラム







横幅の変更

横幅の指定は、スタイルシートを編集します。例えば、３カラムのテンプレートで左右のカラム（#rightと#left）の横幅変更するには、#right　#left　#container　#footerの４箇所を変更する必要があります。
（３カラムパターン２は、#right　#left　#wrapper　#container　#footerの５箇所を変更）

カスタマイズの前に、テンプレートのコピーをまず取って下さい

デザインの編集＞修正＞スタイルシートより、#right　#left　#containerの３箇所を順に探して下さい

（pluging_3a_01の場合）

#container {
width: 960px;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
line-height: 18px;
}

#left {
float: left;
width: 180px;
display: inline;
margin-right: 16px;
overflow: hidden;
}

#right {
float: left;
width: 220px;
display: inline;
margin-left: 16px;
overflow: hidden;
}

#footer {
width: 928px;
margin: 0 auto;
clear: both;
padding: 16px;
overflow: hidden;
background: url(http://1.dtiblog.com/template/pluging_3a_01/image/footer.gif) repeat-x top;
text-align: center;
}

width: ＯＯpx;が横幅になります。お好きな数字を入力して下さい

例）

#container {
width: 1100px;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
line-height: 18px;
}

#containerの横幅は、#leftで増やした100pxと#rightで増やした40pxを足した数字になります。
960+100+40=1100

#left {
float: left;
width: 280px;
display: inline;
margin-right: 16px;
overflow: hidden;
}

#right {
float: left;
width: 260px;
display: inline;
margin-left: 16px;
overflow: hidden;
}

#footer {
width: 1068px;
margin: 0 auto;
clear: both;
padding: 16px;
overflow: hidden;
background: url(http://1.dtiblog.com/template/pluging_3a_01/image/footer.gif) repeat-x top;
text-align: center;
}

#footerの横幅は、#leftで増やした100pxと#rightで増やした40pxを足した数字になります。
928+100+40=1068

更新ボタンをクリック

---

マメ知識

先にご紹介したコードは、ブロック名の前に#がついているのに気付かれた方も多いかと思います。divタグは、各ブロックごとに自分で好きな名前が付けれて、そのブロックをどのように装飾するのか、スタイルシート（CSS）で編集出来ます。

#名前
idと呼ばれ、指定したブロックにスタイルを適用させます。１つのHTML内に同じ名前のidを複数使用する事は出来ません。

HTMLファイル ----------------------------------------------------

<div id="container">...</div>

---------------------------------------------------------------

CSSファイル ----------------------------------------------------

#container { ... }

---------------------------------------------------------------

.名前
classと呼ばれ、指定したブロックにスタイルを適用させます。１つのHTML内に同じ名前のclassを何度でも使用出来ます。

HTMLファイル ----------------------------------------------------

<div class="menubox">...</div>

---------------------------------------------------------------

CSSファイル ----------------------------------------------------

.menubox { ... }

---------------------------------------------------------------

こちらのページでは、スタイルシートの基本的な知識が大変わかりやすく説明してありますので、ぜひ参考にして下さい。