2013-07-20

CSSでのレイアウト作りには慣れが必要だと思ったので、センスいいなーと思ったサイトの一つである、あめやえいたろうのサイトのレイアウトを練習台に作ってみました。

本家のデザイン

レイアウトだけ真似て作ったもの

以下、コードになります。

HTML

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>copy</title>
  <link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
  <div id="container">

    <header>
      <div id="logo"></div>
    </header>

    <div id="page">
      <div id="news"><div></div></div>
      <div id="content">
        <div id="left">
          <table>
            <tr>
              <td colspan="2"><div></div></td>
            </tr>
            <tr>
              <td colspan="2"><div></div></td>
            </tr>
            <tr>
              <td><div></div></td>
              <td><div></div></td>
            </tr>
            <tr>
              <td colspan="2"><div></div></td>
            </tr>
            <tr>
              <td colspan="2"><div></div></td>
            </tr>
          </table>
        </div>
        <div id="right">
          <table>
            <tr>
              <td colspan="2"><div></div></td>
            </tr>
            <tr>
              <td colspan="2"><div></div></td>
            </tr>
            <tr>
              <td><div></div></td>
              <td><div></div></td>
            </tr>
            <tr>
              <td colspan="2"><div></div></td>
            </tr>
            <tr>
              <td><div></div></td>
              <td><div></div></td>
            </tr>
          </table>
        </div>
      </div>
      <footer>
        <div id="company"></div>
      </footer>
    </div>
  </div>
</body>
</html>

CSS

@charset "utf-8";

body,div,table,tr,td,header,footer{
  margin: 0;
  padding: 0;
}
table{
  border-collapse:collapse;border-spacing:0;
}

#container{
  width: 830px;
  margin: 0 auto;
  padding: 20px 15px;
  background: #dedede;
}

header{
  width: 800px;
  height: 50px;
  margin: 0 auto;
  background: #FDB4BC;
}
#logo{
  width: 250px;
  height: 50px;
  margin: 0 auto;
  background: #F58391;
}

#page{
  width: 800px;
  margin: 0 auto;
}
#news{
  padding: 5px;
  background:#F9F7F6;
}
#news div{
  width: 790px;
  height: 20px;
  background: #75CCA1;
}
#content{
  width: 800px;
  overflow: hidden;
  padding-bottom: 25px;
  background: #F9F7F6;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
}
#content table tr{
  background: #F9F7F6;
  border-bottom: 1px solid #E0E0E0;
}
#content table tr td{
  padding: 5px;
}
#content table tr td div{
  background: #D0DFE2;
}
#content table tr:last-child{
  border: 0;
}
#left{
  width: 399px;
  float: left;
  border-right: 1px solid #E0E0E0;
}
#left table{
  width: 399px;
}
#left table tr:first-child td div{
  width: 389px;
  height: 389px;
}
#left table tr:nth-child(2) td div{
  width: 389px;
  height: 200px;
}
#left table tr:nth-child(3) td div{
  height: 250px;
}
#left table tr:nth-child(3) td:first-child{
  border-right: 1px solid #E0E0E0;
}
#left table tr:nth-child(3) td:first-child div{
  width: 188px;
}
#left table tr:nth-child(3) td:nth-child(2) div{
  width: 189px;
}
#left table tr:nth-child(4) td div{
  width: 389px;
  height: 200px;
}
#left table tr:nth-child(5) td div{
  width: 389px;
  height: 360px;
}

#right{
  width: 400px;
  float: right;
}
#right table tr:first-child div{
  width: 389px;
  height: 350px;
}
#right table tr:nth-child(2) div{
  width: 389px;
  height: 389px;
}
#right table tr:nth-child(3) td div{
  height: 250px;
}
#right table tr:nth-child(3) td:first-child{
  border-right: 1px solid #E0E0E0;
}
#right table tr:nth-child(3) td:first-child div{
  width: 188px;
}
#right table tr:nth-child(3) td:nth-child(2) div{
  width: 189px;
}
#right table tr:nth-child(4) td div{
  width: 389px;
  height: 160px;
}
#right table tr:nth-child(5) td div{
  height: 250px;
}
#right table tr:nth-child(5) td:first-child{
  border-right: 1px solid #E0E0E0;
}
#right table tr:nth-child(5) td:first-child div{
  width: 188px;
}
#right table tr:nth-child(5) td:nth-child(2) div{
  width: 189px;
}
footer{
  padding: 5px 10px;
  background: #F9F7F6;
}
#company{
  height: 40px;
  background: #FDB4BC;
}

CSSの並び順はテキトーです。

作る前に少しだけ、本家のコードを見てしまったんですが、コンテンツのレイアウトがtableによるものでした。
確かにtableで作ってみると、うまく画像の配置が出来たので、このようなサイトを作る際にはいいかもしれないと思いました。

また、tableのtrにpaddingを使い余白を作りたかったんですが、全く効かず、なぜだろうと思い検索したところ、trにはpadding が無効だということを初めて知りました…。thかtdにかけなきゃいけないみたいです。

trにはpaddingが効かないという、今回の収穫は大きかったです。

WEB制作勉強ログ | WEB LOG

Jimdo始めました

あめやえいたろうのサイトのレイアウトを作ってみた