crossline

▼2カラムレイアウト▼

font-size:12px;line-height: 150%;

 

 

 

 

こんばんわ!!

 

 

 

 

今日は帰り雨...というか風がすごくて自転車で家までがすごくつらかったです

まあ、こんな日もあるでしょうw

明日は晴れたらいいな...梅雨に向けてカッパ買わなきゃ

 

 

 

 

 

 

では、

本題に入ります

 

▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

 

 

 

 

 

■2カラムレイアウト■

 

 

 

↓完成系

f:id:ishuko:20140527002047p:plain

 

ここでのポイント

border-radius で角丸を作る。Photoshopillustratorで作った画像を使うより、

どんなデバイスで拡大してもきれいに見えるという利点があります

自分で感覚をつかむために

数値を入れ替えたりして、どこをかえたらどうなるか検証する!!

 

f:id:ishuko:20140527022127p:plain

 

▼HTML▼

header部

f:id:ishuko:20140527021303p:plain

 

content部

f:id:ishuko:20140527021433p:plain

sidebar,footer部

f:id:ishuko:20140527021455p:plain

 

 

 

CSS

reset

f:id:ishuko:20140527021546p:plain

 

body,layout

f:id:ishuko:20140527021721p:plain

 

header

f:id:ishuko:20140527021739p:plain

 

content

 

f:id:ishuko:20140527021804p:plain

 

sidebar,footer

 

f:id:ishuko:20140527021836p:plain

 

 

以上、より見栄えを良くしてこんな感じになりました★

 

f:id:ishuko:20140527022038p:plain

 

 

それでは、

 

 

GOOD NIGHT!!