1. 現在位置:
  2. トップページ
  3. HP作成tips
  4. stylesheet
  5. ボックス
background |  表示位置を指定 |  表示形式を指定 |  border |  回り込みを指定 |  width、height |  margin、padding |  最大最小の高さ |  スクロール |  重なり順序を指定 | 
ボックス
background 背景(色、画像、並び方、スクロール、位置を指定)
div {
width: 70%;
height: 200px;
overflow: scroll;
background: #87ceeb url(image/back.gif) repeat-y scroll right top;
}
background-color 背景(色を指定)
div {
background-color: #000000;
}
background-image 背景(画像を指定)
div {
background-image: url(image/00.gif);
}
background-repeat 背景(背景画像の並び方を指定)
div {
background-image: url(image/back.gif);
background-repeat: repeat-y;
}
background-repeat repeat-x  (横方向に並べる)
repeat-y  (縦方向に並べる)
no-repeat  (1つだけ表示する)
repeat  (敷き詰める)デフォルト
background-repeat 背景(ウィンドウに対して背景画像の固定表示を指定)
div {
width: 80%;
height: 100px;
overflow: scroll;
background-image: url(image/00.gif);
background-attachment: fixed;
}
background-attachment
fixed … (固定する - スクロールさせない)
scroll … (固定しない - スクロールさせる)デフォルト
・IEの場合 その要素(div要素やp要素等)に対して固定
・Netscape、Firefox、Operaの場合 ウィンドウ(ページ全体)に対して固定
htmlやbody以外の要素(例えばdiv要素やp要素等)に対しては、fixedは指定しないほうがいい
background-position 背景(背景画像の表示位置を指定)
div {
background-image: url(image/back.gif);
background-repeat: no-repeat;
background-position: center;
}
横方向 left(左) center(中央) right(右)
縦方向 top(上) center(中央) bottom(下)
background-position: right bottom; … 右下に表示
background-position: center center; … 中央に表示
background-position: right; … 右の中央に表示
background-position: bottom; … 下の中央に表示
background-position: center; … 中央に表示
background-position: 100px 40px; … 左から100px、上から40pxの位置に表示
background-position: 30% 60%; … 左から30%、上から60%の位置に表示
background-position: 100px; … 左から100px、上から50%の位置に表示
background-position: 50%; … 左から50%、上から50%の位置に表示
ボックスの表示位置を指定
position プロパティで relative、absolute、fixed を指定している場合に有効
div {
position: absolute;
top: 10px;
left: 30%;
}
position
static (通常の位置に表示)デフォルト
relative (通常の位置を基準とした相対的な位置指定)
absolute (親要素を基準とした絶対的な位置指定)
fixed (ウィンドウを基準とした絶対的な位置指定 + 位置の固定)

top 上からの距離を指定
right 右からの距離を指定
bottom 下からの距離を指定
left 左からの距離を指定
それぞれ 数値+単位(px、他)か %(割合)で指定
デフォルトは auto(自動)(例:left: auto)
display 表示形式を指定
h1 {
display: inline;
}
block (ブロック形式で表示)
inline (インライン形式で表示)
list-item (リスト形式で表示)
none (表示なし)
border 枠線の太さ、色、種類をひとまとめに指定
div {
border: thick red solid;
}
border 上下左右を個別に指定(top、right、bottom、left)
p {
border-top: 2px #85b9e9 solid;
border-right: 4px #bde9ba double;
border-bottom: 6px #ffd37d dotted;
border-left: 8px #d1d1d1 dashed;
}
border-width 太さの指定 上下左右をまとめて指定
数値+単位(px、他)thin=細い線 medium=中間の太さ(デフォルト) thick=太い線
div {
border-width: medium thin;
border-color: #000000;
border-style: solid;
}
border-width: 5px; [上下左右] を指定
border-width: 5px 10px; [上下] と [左右] を指定
border-width: 5px 10px 15px; [上] と [左右] と [下] を指定
border-width: 5px 10px 15px 20px; [上] と [右] と [下] と [左] を指定
border-○○-width 太さの指定 上下左右を個別に指定(top、right、bottom、left)
p {
border-top-width: 3px;
border-right-width: 6px;
border-bottom-width: 9px;
border-left-width: 12px;
border-color: #000000;
border-style: solid;
}
float 回り込みを指定
div {
float: left;
}
left (ボックスを左に配置・テキストなどを右側に回り込ませる)
right (ボックスを右に配置・テキストなどを左側に回り込ませる)
none (指定なし)デフォルト
clear 回り込みを解除
.example {
clear: both;
}
left (ボックスの右側にある回り込みを解除)
right (ボックスの左側にある回り込みを解除)
both (どちらの回り込みも解除)
none (解除しない)デフォルト
width 横幅、height 高さを指定
div {
width: 80%;
height: 100px;
}
margin マージン(余白)を指定
div {
margin: 5px 10px 15px 20px;
}
数値+単位(px、他)か %(割合)、auto(自動)で指定
margin: 2px; … [上下左右] を指定
margin: 2px 4px; … [上下] と [左右] を指定
margin: 2px 4px 6px; … [上] と [左右] と [下] を指定
margin: 2px 4px 6px 8px; … [上] と [右] と [下] と [左] を指定
padding パディング(内側の余白)を指定
div {
padding: 5px 10px 15px 20px;
}
数値+単位(px、他)か %(割合)、auto(自動)で指定
padding: 2px; … [上下左右] を指定
padding: 2px 4px; … [上下] と [左右] を指定
padding: 2px 4px 6px; … [上] と [左右] と [下] を指定
padding: 2px 4px 6px 8px; … [上] と [右] と [下] と [左] を指定
マージンを個別に指定
div {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}
max-height 最大の高さ、min-height 最小の高さを指定
div {
max-height: 350px;
min-height: 250px;
}
max-width 最大幅、min-width 最小幅を指定
div {
max-width: 500px;
min-width: 400px;
}
ボックスに入りきらない内容をスクロールで表示
div {
width: 200px;
height: 100px;
overflow: scroll;
}
visible (領域をはみ出して表示する)デフォルト
hidden (はみ出した部分を表示しない)
scroll (スクロールで表示する)
auto (自動)
・overflow の縦と横を個別
div {
width: 200px;
height: 100px;
overflow-x: scroll; /*横方向の指定*/
overflow-y: scroll; /*縦方向の指定*/
}
z-index ボックスの重なり順序を指定
この順序の指定は、position プロパティで relative、absolute、fixed を指定している場合に有効
#example {
position: absolute;
top: 10px;
left: 30%;
z-index: 0;
}
順序を数値で指定します(0 に近いほど背面になる)
デフォルトは auto(自動)(例:z-index: auto)