HTML5でカラムレイアウト
HTML5でレイアウトせよ
headerタグ、navタグは必ず用いよ。
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>カラムレイアウト</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div class="content"> <header> <h1> <img src="img/title.gif" alt=""> </h1> <nav> <ul> <li> <a href="#"> <img src="img/ranking.gif" alt=""> </a> </li> <li> <a href="#"> <img src="img/story.gif" alt=""> </a> </li> <li> <a href="#"> <img src="img/access.gif" alt=""> </a> </li> <li> <a href="#"> <img src="img/news.gif" alt=""> </a> </li> </ul> </nav> </header> <ul> <li> <a href="#"> <img src="img/spring/dai-01.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/tate-01.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/01.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/02.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/yoko-01.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/03.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/04.jpg" alt=""> </a> </li> </ul> </div> <!--/.content--> <div class="content"> <ul> <li> <a href="#"> <img src="img/spring/yoko-02.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/05.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/06.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/dai-02.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/07.jpg" alt=""> </a> </li> <li class="right"> <a href="#"> <img src="img/spring/tate-02.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/08.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/dai-03.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/09.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/010.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/yoko-03.jpg" alt=""> </a> </li> </ul> </div> <!--/.content--> <div class="content"> <ul> <li> <a href="#"> <img src="img/spring/dai-04.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/011.jpg" alt=""> </a> </li> <li class="right"> <a href="#"> <img src="img/spring/tate-03.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/012.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/013.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/014.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/yoko-04.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/015.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/016.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/017.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="img/spring/018.jpg" alt=""> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/spring/dai-05.jpg" alt=""> </a> </li> </ul> </div> <!--/.content--> </div> <!--/#container--> </body> </html>
css
@charset "UTF-8"; /* reset =========================*/ html, body, header, nav, h1, ul, li, img, a { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none } img { border: none; vertical-align: bottom; } /* layout =========================*/ body { background: #fff } #container { width: 960px; margin: 20px auto; overflow: hidden; } .content { float: left; width: 320px; } .content img { float: left; margin: 10px; } .content li.right { float: right }