9/10|レイアウト / パターン画像
9/10
- 2カラムレイアウト
wrapper ← overflow: hidden; を必ず記述
flort:left : fort:right ← 左右に記述
biv id ← レイアウト用
biv class ← 記事内等
/* CSS Document */
#wrapper {
width: 760px; /* レイアウト全体の幅を指定 */
overflow: hidden;
}
#primary {
position: absolute; /* 値にabsoluteを指定 */
left: 10px; /* 左方向からの配置位置を指定 */
top: 10px; /* 上方向からの配置位置を指定 */
width: 550px; /* ボックスの幅を指定 */
height: 300px; /* ボックスの高さを指定 */
background-color: #C7D5ED;
z-index: 1000;
}
#secondary {
position: absolute; /* 値にabsoluteを指定 */
left: 570px; /* 左方向からの配置位置を指定 */
top: 10px; /* 上方向からの配置位置を指定 */
width: 200px; /* ボックスの幅を指定 */
height: 300px; /* ボックスの高さを指定 */
background-color: #F9CFBA;
z-index: 100;
}
- 2カラムレイアウト(ヘッダー付)
/* CSS Document */
#container {
width: 760px;
margin: 0 auto; /* 全てのレイアウトがセンターにいく */
}
#header {
background-color: #DDD;
height: 80px; /* ボックスの高さを追加 */
}
#wrapper {
position: relative; /* #primaryと#secondaryの親ボックスにするためにrelativeを指定 */
}
#primary {
position: absolute;
left: 210px; /* 左方向からの配置位置を変更 */
top: 10px; /* 左方向からの配置位置を変更 */
width: 550px;
height: 300px;
background-color: #C7D5ED;
}
#secondary {
position: absolute;
left: 0; /* 左方向からの配置位置を変更 */
top: 10px; /* 上方向からの配置位置を変更 */
width: 200px;
height: 300px;
background-color: #F9CFBA;
}
- パターン画像製作
フィルタ → その他 → スクロール (200 x 200)
- グラデーションで馴染ませる
画像の上にマスクでグラデーションを付ける