2カラムレイアウトをつくる
2カラム・3カラムのレイアウトを作る場合によくfloatが使われます。
今回はmainのcontainerの中にleftとright2つの領域を作っていきます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <header> <div class="container">header</div> </header> <main> <div class="container"> <div class="left"> left </div> <div class="right"> right </div> </div> </main> <footer> <div class="container">footer</div> </footer> </body> </html>
.container {
width: 300px;
margin: 0 auto;
}
.left {
float:left;
width:100px;
}
.right {
float:left;
width:200px;
}
このようにすることで2カラムのレイアウトができます。
floatするときには必ずwidthが必要なのでそれぞれwidthを指定します。
また、この状態だとclearされていないのでfooter部分が上に回り込んでしまいます。
それを回避するための方法を紹介していきます。
footerにclear:both;をつける
.container {
width: 300px;
margin: 0 auto;
}
.left {
float:left;
width:100px;
}
.right {
float:left;
width:200px;
}
footer {
clear:borth;
}
とすることで回り込みを解除することができます。
htmlにstyle=”clear:both;”となるdivを新しくつくる
上のfooterにclear:both;を指定した場合、一見問題なく表示されているように見えますが、
floatすることでleftとrightが通常の配置から外れてしまっているのでmainの高さがなくっています。
そこで、htmlに新しいdivを作ことによってmainの高さを保ったままfloatをclearすることができます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <header> <div class="container">header</div> </header> <main> <div class="container"> <div class="left"> left </div> <div class="right"> right </div> <div style="clear:both;"></div> </div> </main> <footer> <div class="container">footer</div> </footer> </body> </html>
これでmainのcontainerの高さをだすことが出来るようになります。
:afterでclear:both;を指定する
上の方法だと空のdivを作る必要があります。clearするために空のdivを作るのは嫌だという場合は、
mainのcontainerに新しいclassをつけ、そのクラスに疑似要素である:afterをつけてスタイルを指定することで上と同じ動きをすることができます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <header> <div class="container">header</div> </header> <main> <div class="container clearfix"> <div class="left"> left </div> <div class="right"> right </div> </div> </main> <footer> <div class="container">footer</div> </footer> </body> </html>
.container {
width: 300px;
margin: 0 auto;
}
.left {
float:left;
width:100px;
}
.right {
float:left;
width:200px;
}
.clearfix:after {
content="";
display:block;
clear:borth;
}
overflow:hidden;、overflow:auto;を使う
clear:both;を使わずに次の要素を回り込みさせない方法もあります。
overflow:hidden;もしくはoverflow:auto;を使うことでclearと同じような動きになります。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <header> <div class="container">header</div> </header> <main> <div class="container clearfix"> <div class="left"> left </div> <div class="right"> right </div> </div> </main> <footer> <div class="container">footer</div> </footer> </body> </html>
.container {
width: 300px;
margin: 0 auto;
}
.left {
float:left;
width:100px;
}
.right {
float:left;
width:200px;
}
.clearfix {
overflow:hidden;
}
3カラムレイアウトを作る
3カラムのレイアウトを作るときも2カラムのときと方法は同じです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <header> <div class="container">header</div> </header> <main> <div class="container clearfix"> <div class="left"> left </div> <div class="center"> center </div> <div class="right"> right </div> </div> </main> <footer> <div class="container">footer</div> </footer> </body> </html>
.container {
width: 300px;
margin: 0 auto;
}
.left {
float:left;
width:50px;
}
.right {
float:left;
width:50px;
}
.center {
float:left;
width:200px
}
.clearfix {
overflow:hidden;
}
とすることで3カラムのレイアウトが可能です。
余白をつける
カラムの間に余白をつける方法はmarginを指定する方法やpaddingとbox-sizingを指定する方法があります。
.container {
width: 300px;
margin: 0 auto;
}
.left {
float:left;
width:50px;
}
.right {
float:left;
width:50px;
}
.center {
float:left;
width:180px
margin-left:10px;
margin-right:10px;
}
.clearfix {
overflow:hidden;
}
centerのwidthを短くし、その分左右に10pxずつmarginをとっています。
.container {
width: 300px;
margin: 0 auto;
}
.left {
float:left;
width:50px;
}
.right {
float:left;
width:50px;
}
.center {
float:left;
width:180px
padding:10px;
box-sizing:border-box;
}
.clearfix {
overflow:hidden;
}
box-sizingをborder-boxにすることでcenterの左右のpadding10pxずつを含めた値になり、
余白がうまれます。
可変幅のレイアウトをつくる
可変幅の場合簡単な方法として単位をpxから%にかえる方法があります。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <header> <div class="container">header</div> </header> <main> <div class="clearfix"> <div class="left"> left </div> <div class="center"> center </div> <div class="right"> right </div> </div> </main> <footer> <div class="container">footer</div> </footer> </body> </html>
.left {
float:left;
width:20%;
}
.right {
float:left;
width:60%;
}
.center {
float:left;
width:20%;
}
.clearfix {
overflow:hidden;
}
可変幅にするためにmainのdivにつけていたcontainerクラスをとります。
そしてleft、right、centerのwidthの値をそれぞれ%で示すことでブラウザの幅に合わせてカラムの幅も変わります。
また、mainの幅は可変幅でleftとrightは固定幅にしたいという場合は次のようにします。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <header> <div class="container">header</div> </header> <main> <div class="clearfix"> <div class="left"> left </div> <div class="right"> right </div> <div class="center"> center </div> </div> </main> <footer> <div class="container">footer</div> </footer> </body> </html>
.left {
float:left;
width:100px;
}
.right {
float:right;
width:100px;
}
.center {
margin:0 100px;
}
.clearfix {
overflow:hidden;
}
floatする要素はfloatしない要素より先に書かなくてはいけないというルールがあるので、
htmlの並びをleft、right、centerにします。
leftとrightをそれぞれ100pxの固定幅にする場合、
centerはfloatをつけずに左右に100pxのmarginを指定することで
ブラウザの幅を変えるとcenterの幅だけが変わるようになります。
今日はここまでです！
1つのレイアウトを作るのにも沢山の方法があるんですね。
真実はいつも1つじゃない。。。ということでまた来週更新します！
