カラムレイアウトの設計 A

2カラムレイアウトの設計

テキストはレスポンシブレイアウトの設計ですが、PC用のみの設計をします
画像はテキスト参照

レイアウト設計

PICKUP STREAM

    Twitter
    Facebook
    Google Plus
    RSS Feed

    HOME
    ABOUT
    CONTACT

1 AUG

海岸のデコレーション

CATEGORY: 海と海岸と空

海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。

海岸線で生息する小さな植物

こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。

ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。

CATEGORIES

    山と森林
    海と海岸と空
    都市と建築
    地下

RECENT POSTS

    海岸のデコレーション
    風車と海風の関係
    ツルを伸ばしてどこまでも
    色とりどりの絨毯
    休日に買い物にいくなら
    高層ビルと風の関係

PICKUP STREAM

Copyright &#169; PICKUP STREAM, all rights reserved.

素材

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>2カラムレイアウトの設計</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="site">
<h1><img src="img/logo.png" alt="PICKUP STREAM"></h1>
</div><!-- /#site -->
<div id="iconmenu">
<ul>
<li><a href="#"><img src="img/twitter.png" alt="Twitter"></a></li>
<li><a href="#"><img src="img/facebook.png" alt="Facebook"></a></li>
<li><a href="#"><img src="img/googleplus.png" alt="Google Plus"></a></li>
<li><a href="#"><img src="img/rss.png" alt="RSS Feed"></a></li>
</ul>
</div><!-- /#iconmenu -->
<div id="headerimg">
<img src="img/header.jpg" alt="">
</div><!-- /#headerimg -->
<div id="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div><!-- /#nav -->
</div><!-- /#header -->
<div id="content">
<div class="date"><span>1</span> AUG</div>
<h2>海岸のデコレーション</h2>
<div class="cate">CATEGORY: <a href="#">海と海岸と空</a></div>
<p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p>
<p><img src="img/sand.jpg" alt="海岸線で生息する小さな植物"></p>
<p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p>
<p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p>
</div><!-- /#content -->
<div id="sidebar">
<div class="menu">
<h3>CATEGORIES</h3>
<ul>
<li><a href="#">山と森林</a></li>
<li><a href="#">海と海岸と空</a></li>
<li><a href="#">都市と建築</a></li>
<li><a href="#">地下</a></li>
</ul>
</div><!-- /.menu -->
<div class="menu">
<h3>RECENT POSTS</h3>
<ul>
<li><a href="#">海岸のデコレーション</a></li>
<li><a href="#">風車と海風の関係</a></li>
<li><a href="#">ツルを伸ばしてどこまでも</a></li>
<li><a href="#">色とりどりの絨毯</a></li>
<li><a href="#">休日に買い物にいくなら</a></li>
<li><a href="#">高層ビルと風の関係</a></li>
</ul>
</div><!-- /.menu -->
</div><!-- /#sidebar -->
<div id="footer">
<p>PICKUP STREAM</p>
<p><small>Copyright &copy; PICKUP STREAM, all rights reserved.</small></p>
</div><!-- /#footer -->
</div><!-- /#container -->
</body>
</html>

@charset "UTF-8";

/* reset
================================= */
html, body, div, h1, h2, h3, p, ul, li, img, a small {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
}

/* layout
================================= */
body {
  margin: 25px 0;
  font-size: 16px;
}
#container {
  width: 960px;
  margin: 0 auto;
}
#header {
  margin-bottom: 50px;
}
#content {
  width: 600px;
  float: left;
  margin-bottom: 50px;
}
#sidebar {
  width: 300px;
  float: right;
  margin-bottom: 50px;
}
#footer {
  clear: both;
}

/* #site
================================= */
#site {
  float: left;
}
#headerimg img {
  margin-top: 5px;
}

/* #iconmenu
================================= */
#iconmenu {
  float: right;
  text-align: right;
}
#iconmenu ul {
  padding-top: 3px;
}
#iconmenu li {
  display: inline;
}

/* #nav
================================= */
#nav {
  font-family: 
    Helvetica,
    Arial,
    sans-serif;
  font-size: 14px;
  border-top: solid 1px #FFF;
  background: #000;
}
#nav ul {
  overflow: hidden;
}
#nav li {
  float: left;
}
#nav li a {
  display: block;
  width: 120px;
  padding: 6px 0;
  border-right: solid 1px #FFF;
  color: #FFF;
  text-align: center;
}
#nav li a:hover {
  background-color: #0097D8;
}

/* #content
================================= */
#content p {
  line-height: 1.6;
  margin-bottom: 20px;
}
#content h2 {
  font-size: 28px;
  border-bottom: solid 1px #AAA;
  margin-bottom: 6px;
  padding-bottom: 12px;
}
.date {
  float: right;
  background-color: #0097D8;
  padding: 8px 22px;
  border-radius: 55px / 48px;
  text-align: center;
  font-family:
    Helvetica,
    Arial,
    sans-serif;
  font-weight: bold;
  color: #FFF;
}
.date span {
  display: block;
  font-size: 32px;
}
.cate, .cate a {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

/* .menu
================================= */
.menu {
  margin-bottom: 50px;
}
.menu h3 {
  font-family:
    Helvetica,
    Arial,
    sans-serif;
  font-size: 26px;
  color: #66C1E8;
  margin-bottom: 5px;
}
.menu ul {
  border-top: solid 1px #AAA;
}
.menu li {
  font-size: 14px;
}
.menu li a {
  display: block;
  color: #666;
  padding: 10px 0 10px 20px;
  background: url(../img/listmark.png) no-repeat 0 50%;
  border-bottom: solid 1px #AAA;
}
.menu li a:hover {
  background-color: #B4F0FF;
}

/* #footer
================================= */
#footer {
  font-family: 
    Helvetica,
    Arial,
    sans-serif;
  color: #FFF;
  background-color: #000;
  padding: 10px 10px 20px 10px;
}
#footer small {
  font-size: 12px;
  font-weight: bold;
  display: block;
  margin-top: 10px;
}

応用課題

以下のように変更しなさい

変更点

ロゴとビルボードの空きを「10px」に変更
ナビボタンの縦の面積を広げる
#contentのデザインを変更
#footer内をセンタリング

@charset "UTF-8";

/* reset
================================= */
html, bdy, div, h1, h2, h3, p, ul, li, img, a small {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
}

/* layout
================================= */
body {
  margin: 25px 0;
}
#container {
  width: 960px;
  margin: 0 auto;
}

#header {
  margin-bottom: 50px;
}

#content {
  width: 600px;
  float: left;
  margin-bottom: 50px;
}

#sidebar {
  width: 300px;
  float: right;
  margin-bottom: 50px;
}

#footer {
  clear: both;
}

/* #site
================================= */
#site {
  float: left;
}
#headerimg img {
  margin-top: 10px;
}

/* #iconmenu
================================= */
#iconmenu {
  float: right;
  text-align: right;
}
#iconmenu ul {
  padding-top: 5px;
}
#iconmenu li {
  display: inline;
}

/* #nav
================================= */
#nav {
  font-family: 
    Helvetica,
    Arial,
    sans-serif;
  font-size: 14px;
  border-top: solid 1px #FFF;
  background: #000;
}
#nav ul {
  overflow: hidden;
}
#nav li {
  float: left;
}
#nav li a {
  display: block;
  width: 120px;
  padding: 16px 0 14px 0;
  border-right: solid 1px #FFF;
  color: #FFF;
  text-align: center;
}
#nav li a:hover {
  background-color: #0097D8;
}

/* #content
================================= */
#content p {
  line-height: 1.6;
  margin: 0 0 20px 90px;
}
#content h2 {
  font-size: 28px;
  border-bottom: solid 1px #AAA;
  margin-bottom: 6px;
  padding: 0 0 10px 90px;
}
.date {
  float: left;
  background-color: #0097D8;
  padding: 14px 20px;
  border-radius: 50px;
  text-align: center;
  font-family:
    Helvetica,
    Arial,
    sans-serif;
  font-weight: bold;
  color: #FFF;
}
.date span {
  display: block;
  font-size: 32px;
}
.cate, .cate a {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}
.cate {
  margin-left: 90px;
}

/* .menu
================================= */
.menu {
  margin-bottom: 50px;
}
.menu h3 {
  font-family:
    Helvetica,
    Arial,
    sans-serif;
  font-size: 26px;
  color: #66C1E8;
  margin-bottom: 5px;
}
.menu ul {
  border-top: solid 1px #AAA;
}
.menu li {
  font-size: 14px;
}
.menu li a {
  display: block;
  color: #666;
  padding: 10px 0 10px 20px;
  background: url(img/listmark.png) no-repeat 0 50%;
  border-bottom: solid 1px #AAA;
}
.menu li a:hover {
  background-color: #B4F0FF;
}

/* #footer
================================= */
#footer {
  font-family: 
    Helvetica,
    Arial,
    sans-serif;
  color: #FFF;
  background-color: #000;
  padding: 10px 10px 20px 10px;
  text-align: center;
}
#footer small {
  font-size: 12px;
  font-weight: bold;
  display: block;
  margin-top: 10px;
}