可変幅）2カラム・3カラムレイアウト，固定幅）3カラムレイアウト 復習
2カラムリキッド
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>2カラムリキッド</title> <style type="text/css"> <!-- *{ margin: 0; padding: 0; } #container{ width: 100%; } #header{ background-color: #FFFF00; height: 50px; margin-top: 10px; } #wrapper{ width: 100%; position: relative; margin: 10px 0; } #content{ height: 400px; background-color: #0FF; margin-right: 210px; } #sidebar{ width: 200px; height: 400px; position: absolute; right: 0px; top: 0px; background-color: #0C3; } #footer{ background-color: #F0F; height: 50px; } --> </style> </head> <body> <div id="container"> <div id="header"> <p>header</p> </div> <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="sidebar"> <p>sidebar</p> </div> </div> <div id="footer"> <p>footer</p> </div> </div> </body> </html>
3カラムレイアウト
●3カラムリキッド（position）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3カラムリキッド：position</title> <style type="text/css"> *{ margin: 0; padding: 0; } #container{ width: 100%; } #header{ height: 50px; background-color: #FF0; margin-top: 10px; } #wrapper{ width: 100%; position: relative; margin: 10px 0; } #content{ height: 400px; margin: 0 210px; background-color: #0FF; } #sidebar1{ width: 200px; height: 400px; position: absolute; left: 0px; top: 0px; background-color: #00F; } #sidebar2{ width: 200px; height: 400px; position: absolute; right: 0px; top: 0px; background-color: #90C; } #footer{ height: 50px; background-color: #F0F; } </style> </head> <body> <div id="container"> <div id="header"> <p>header</p> </div> <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="sidebar1"> <p>sidebar1</p> </div> <div id="sidebar2"> <p>sidebar2</p> </div> </div> <div id="footer"> <p>footer</p> </div> </div> </body> </html>
●3カラムリキッド（float）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3カラムリキッド：float</title> <style type="text/css"> *{ margin: 0; padding: 0; } #container{ width: 100%; } #header{ height: 50px; margin: 10px 0; background-color: #FF0; } #box{ width: 100%; float: left; margin-right: -200px; } #sidebar2{ width: 200px; height: 400px; float: right; background-color: #90C; } #wrapper{ width: 100%; float: right; margin: 0 0 10px -200px; } #content{ height: 400px; margin: 0 210px; background-color: #0FF; } #sidebar1{ width: 200px; height: 400px; float: left; margin: 0 0 10px 0; background-color: #00F; } #footer{ clear: both; height: 50px; background-color: #F0F; } </style> </head> <body> <div id="container"> <div id="header"> <p>header</p> </div> <div id="box"> <div id="wrapper"> <div id="content"> <p>content</p> </div> </div> <div id="sidebar1"> <p>sidebar1</p> </div> </div> <div id="sidebar2"> <p>sidebar2</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> </html>
●3カラム固定幅
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3カラム：固定幅</title> <style type="text/css"> *{ margin: 0; padding: 0; } #container{ width: 900px; margin: 20px auto; } #header{ height: 50px; background-color: #FF0; } #box{ width: 900px; margin: 10px 0; overflow: auto; } #wrapper{ width: 700px; float: left; } #content{ width: 490px; height: 400px; float: right; background-color: #0FF; } #sidebar1{ width: 200px; height: 400px; float: left; background-color: #00F; } #sidebar2{ width: 190px; height: 400px; float: right; background-color: #90C; } #footer{ height: 50px; background-color: #F0F; } </style> </head> <body> <div id="container"> <div id="header"> <p>header</p> </div> <div id="box"> <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="sidebar1"> <p>sidebar1</p> </div> </div> <div id="sidebar2"> <p>sidebar2</p> </div> </div> <div id="footer"> <p>footer</p> </div> </div> </body> </html>
