でざいんとうぇぶ。|WEB学習

WEBスクール半年間の学習過程

9/10|レイアウト / パターン画像

9/10

- 2カラムレイアウト

f:id:tk3m:20140920031047p:plain

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カラムレイアウト(ヘッダー付)

f:id:tk3m:20140920031057p:plain

 

 

/* 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;
}

 

- パターン画像製作

f:id:tk3m:20140920031200p:plain

 フィルタ → その他 → スクロール (200 x 200)

 

- グラデーションで馴染ませる

f:id:tk3m:20140920031213p:plain

 画像の上にマスクでグラデーションを付ける