テーマのお試し

オンラインユーザ+1min

ゲストユーザ: 7

 2009年1月 6日(火) 16:26 JST

センターブロックのデザインを変更したい

  • 2008年12月 1日(月) 22:44 JST
  • 投稿者:
    auge
  • 閲覧件数
    175

タグ: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;
}

 解説 

センターブロックコンテンツ(内容を表示するブロック)
センターブロック(左右ブロックコンテンツを囲むブロック)
タイトルはセンターブロックに含まれセンターブロックコンテンツの上に位置する。

トラックバック

このエントリのトラックバックURL:
http://gltmatrix.com/trackback.php/procssdefocc
表示形式
コメント投稿

コメントは投稿者の責任においてなされるものであり、サイト管理者は責任を負いません。