左右カラムブロックのデザインを変更したい

[tag:ProCSS逆引きCSS block.css]

　該当ＣＳＳ　

block.css

　該当プロパティー　

/*--------------------------------------
左ブロック
--------------------------------------*/
/* ブロック */
div#leftblocks div.block-left {
margin: 0 8px 0.5em 8px;
padding: 8px 0;
border-bottom: 1px solid #E7E7E7;
}
/* ブロックコンテンツ */
div#leftblocks div.block-left div.block-left-content {
margin: 0;
padding: 0;
}
/*--------------------------------------
右ブロック
--------------------------------------*/
/* ブロック */
div#rightblocks div.block-right {
margin: 0 8px 0.5em 8px;
padding: 8px 0;
border-bottom: 1px solid #CCCCCC;
}
/* ブロックコンテンツ */
div#rightblocks div.block-right div.block-right-content {
margin: 0;
padding: 0;
}
 

参考事例

　左右ブロックに背景色をつけたい。　

方法
backgroundにcolorを指定する。

/* 左ブロック */
div#leftblocks div.block-left {
margin: 0 8px 0.5em 8px;
padding: 8px 0;
background: #色指定;
border-bottom: 1px solid #E7E7E7;
}
/* 右ブロック */
div#rightblocks div.block-right {
margin: 0 8px 0.5em 8px;
padding: 8px 0;
background: #色指定;
border-bottom: 1px solid #CCCCCC;
}

　左右ブロックに背景画像を使いたい。　

方法
backgroundにurl(画像パス)を指定する。

/* 左ブロック */
div#leftblocks div.block-left {
margin: 0 8px 0.5em 8px;
padding: 8px 0;
　background: url(画像パス) no-repeat 0 0;
border-bottom: 1px solid #E7E7E7;
}
/* 右ブロック */
div#rightblocks div.block-right {
margin: 0 8px 0.5em 8px;
padding: 8px 0;
background: url(画像パス) no-repeat 0 0;
border-bottom: 1px solid #CCCCCC;
}

　左右ブロックの幅を決めたい。　

方法
左右ブロックの幅の最大値はlayout.cssで指定するdiv#wrapperのサイズに順ずる。
それに対してのサイズ設定はmargin、paddingで指定する。

/* 左ブロック */
div#leftblocks div.block-left {
margin: 0 8px 0.5em 8px;
padding: 8px 0;
border-bottom: 1px solid #E7E7E7;
}
/* 右ブロック */
div#rightblocks div.block-right {
margin: 0 8px 0.5em 8px;
padding: 8px 0;
border-bottom: 1px solid #CCCCCC;
}

　解説　

「左右ブロック」と「左右ブロックコンテンツ」の違いは
左右ブロックコンテンツ（内容を表示するブロック）
左右ブロック（左右ブロックコンテンツを囲むブロック）
タイトルは左右ブロックに含まれ左右ブロックコンテンツの上に位置する。