HTML5でカラムレイアウト

HTML5でレイアウトせよ

headerタグ、navタグは必ず用いよ。

f:id:fujiwarashinichi:20140331185747p:plain

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 }

HTML5でカラムレイアウト