センターブロックのデザインを変更したい
[tag:ProCSS逆引きCSS block.css]
該当CSS
block.css
該当プロパティー
/*--------------------------------------
中央ブロック
--------------------------------------*/
/* ブロック */
div#centerblocks div.block-center {
margin: 0 0 1em 0;
padding: 0 0 2em 0;
border-bottom: 1px solid #CCC;
}
/* ブロックコンテンツ */
div#centerblocks div.block-center div.block-center-content {
margin: 0;
padding: 0;
}
参考事例
センターブロックに背景色をつけたい。
方法
backgroundを追加しcolorを指定する。
div#centerblocks div.block-center {
margin: 0 0 1em 0;
padding: 0 0 2em 0;
background: #色指定;
border-bottom: 1px solid #CCC;
}
センターブロックコンテンツに背景色をつけたい。
方法
backgroundを追加しcolorを指定する。
/* ブロックコンテンツ */
div#centerblocks div.block-center div.block-center-content {
margin: 0;
padding: 0;
background: #色指定;
}
センターブロックに背景画像を使いたい。
方法
backgroundを追加しurl(画像パス)を指定する。
div#centerblocks div.block-center {
margin: 0 0 1em 0;
padding: 0 0 2em 0;
background: url(画像パス) no-repeat 0 0;
border-bottom: 1px solid #CCC;
}
センターブロックコンテンツに背景画像を使いたい。
方法
backgroundを追加しurl(画像パス)を指定する。
div#centerblocks div.block-center div.block-center-content {
margin: 0;
padding: 0;
background: url(画像パス) no-repeat 0 0;
}
センターブロックの幅を決めたい。
方法
センターブロックの幅の最大値はlayout.cssのdiv#wrapperで指定するdiv#centerblocksのサイズに順ずる。
それに対してのサイズ設定はmargin、paddingで指定する。
/* ブロック */
div#centerblocks div.block-center {
margin: 0 0 1em 0;
padding: 0 0 2em 0;
border-bottom: 1px solid #CCC;
}
センターブロックコンテンツの幅を決めたい。
方法
センターブロックコンテンツの幅の最大値はでdiv.block-center指定する値に順ずる。
それに対してのサイズ設定はmargin、paddingで指定する。
/* ブロックコンテンツ */
div#centerblocks div.block-center div.block-center-content {
margin: 0;
padding: 0;
}
解説
センターブロックコンテンツ(内容を表示するブロック)
センターブロック(左右ブロックコンテンツを囲むブロック)
タイトルはセンターブロックに含まれセンターブロックコンテンツの上に位置する。