読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

2カラムレイアウト基本

2カラムレイアウト基本


Homepage Title
サブタイトルサブタイトルサブタイトル
コンテンツのタイトル

コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。

コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。

メニューのリンク1
メニューのリンク2
メニューのリンク3
メニューのリンク4
メニューのリンク5

Copyright © AUTHOR NAME, All Rights Reserved.

ワークフロー(作成手順)

マークアップ
  • 外部CSSファイルを正しく読み込む(相対パスで記述する)
  • smallタグは、脚注などの補足要素に記述する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>2カラムレイアウト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
  <h1>Homepage Title</h1>
  <p>サブタイトルサブタイトルサブタイトル</p>
</header><!-- /header -->
<div class="content">
  <h2>コンテンツのタイトル</h2>
  <p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>
  <p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>
</div><!-- /.content -->
<div class="sidebar">
  <ul>
    <li><a href="#">メニューのリンク1</a></li>
    <li><a href="#">メニューのリンク2</a></li>
    <li><a href="#">メニューのリンク3</a></li>
    <li><a href="#">メニューのリンク4</a></li>
    <li><a href="#">メニューのリンク5</a></li>
</ul>
</div><!-- /.sidebar -->
<footer>
  <p><small>Copyright &#169; AUTHOR NAME, All Rights Reserved.</small></p>
</footer><!-- /footer -->
</div><!-- /.container -->
</body>
</html>
リセットCSS
  • ブラウザの持つ初期値をリセットして、値を適用しやすくする
@charset "UTF-8";

/* reset
---------------------------------*/
html, body, h1, h2, p, ul, li {
  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;
  color: inherit;
}
header, footer { display: block; }

/* body
---------------------------------*/
body {
  font-size: 16px;
  background: #E2E2E2;
}

/* layout
---------------------------------*/
.container {
  width: 760px;
  margin: 0 auto;
  padding: 20px;
  background: #FFF;
}
.wrapper {
  overflow: hidden;
  margin-bottom: 20px;
}

/* header
---------------------------------*/
header {
  width: 760px;
  height: 200px;
  margin-bottom: 20px;
  background: url(img/header01.jpg) no-repeat center top;
}
  header h1 {
    padding: 70px 0 10px 0;
    font-family: "Arial Black";
    text-align: center;
    letter-spacing: 1px;
    color: #FFF;
  }
  header p {
    text-align: center;
    color: #FFF;
  }
  
/* content
---------------------------------*/
.content {
  float: left;
  width: 544px;
}
  .content h2 {
    margin-bottom: 8px;
    padding: 12px 0 10px 16px;
    background: #6E9A00;
    color: #FFF;
    font-size: 22px;
  }
  .content p {
    margin: 0 1.0em 8px 1.0em;
    line-height: 1.6;
  }

/* sidebar
---------------------------------*/
.sidebar {
  float:right;
  width: 180px;
  text-align: center;
}
  .sidebar li {
    font-size: 14px;
  }
  .sidebar a {
    display: block;
    padding: 14px 0 12px 0;
    border-top: 1px solid #999;
  }
  .sidebar li:last-child a {
    border-bottom: 1px solid #999;
  }
  .sidebar a:hover {
    background: #E4E632;
    color: #FFF;
    font-weight: bold;
  }


/* footer
---------------------------------*/
footer {
  padding: 16px;
  text-align: center;
  border-top: 1px dotted #333;
}


.containerの位置を確定
  • 幅を「width+左右の余白」でトータル800px、marginの左右をautoで画面の中央に配置
.container {
  width: 760px;
  margin: 0 auto;
  padding: 20px;
  background-color: #FFF;
}


.headerの設定
  • 背景画像を読み込む
/* layout
------------------------------------------------------------*/
.container {
  width: 760px;
  margin: 0 auto;
  padding: 20px;
  background-color: #FFF;
}
.header {
  height: 180px;
  margin-bottom: 30px;
  padding: 20px 0 0 20px;
  background: url(../img/header01.jpg) no-repeat center top;
}

/* .header
------------------------------------------------------------*/
.header h1 {
  font-family: "Arial Black", Gadget, sans-serif;
  margin-bottom: 10px;
}
.header p { font-size: 14px; }


他のレイアウトを設定
  • 左右に不動状態を「.wrapper」で囲む
  • 浮動状態を囲む要素には「overflow: hidden;」を指定
.wrapper {
  overflow: hidden;
  margin-bottom: 10px;
}
.content {
  width: 550px;
  float: left;
}
.nav {
  width: 180px;
  float: right;
}
.footer {
  padding: 10px;
  text-align: center;
  border-top: 1px dotted #AAA;
}


.contentと.navを設定
  • li のリンクには、マウスオーバー時の設定をする
/* .content
------------------------------------------------------------*/
.content h2 {
  background: #C1F569;
  margin-bottom: 20px;
  padding: 12px 0 10px 18px;
}
.content p {
  line-height: 1.6;
  margin-bottom: 20px;
}

/* .nav
------------------------------------------------------------*/
.nav li a {
  display: block;
  padding: 12px 0 10px 1.0em;
  border-bottom: 1px solid #AAA;
  font-weight: bold;
  color: #333;
}
.nav li:first-child a {
  border-top: 1px solid #AAA;
}
.nav li a:hover {
  color: #F90;
}



@charset "UTF-8";

/* reset
---------------------------------*/
html, body, h1, h2, p, ul, li {
  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;
  color: inherit;
}
header, footer { display: block; }

/* body
---------------------------------*/
body {
  font-size: 16px;
  background: #E2E2E2;
}

/* layout
---------------------------------*/
.container {
  width: 760px;
  margin: 0 auto;
  padding: 20px;
  background: #FFF;
}
.wrapper {
  overflow: hidden;
  margin-bottom: 20px;
}

/* header
---------------------------------*/
header {
  width: 760px;
  height: 200px;
  margin-bottom: 20px;
  background: url(img/header01.jpg) no-repeat center top;
}
  header h1 {
    padding: 70px 0 10px 0;
    font-family: "Arial Black";
    text-align: center;
    letter-spacing: 1px;
    color: #FFF;
  }
  header p {
    text-align: center;
    color: #FFF;
  }
  
/* content
---------------------------------*/
.content {
  float: left;
  width: 544px;
}
  .content h2 {
    margin-bottom: 8px;
    padding: 12px 0 10px 16px;
    background: #6E9A00;
    color: #FFF;
    font-size: 22px;
  }
  .content p {
    margin: 0 1.0em 8px 1.0em;
    line-height: 1.6;
  }

/* sidebar
---------------------------------*/
.sidebar {
  float:right;
  width: 180px;
  text-align: center;
}
  .sidebar li {
    font-size: 14px;
  }
  .sidebar a {
    display: block;
    padding: 14px 0 12px 0;
    border-top: 1px solid #999;
  }
  .sidebar li:last-child a {
    border-bottom: 1px solid #999;
  }
  .sidebar a:hover {
    background: #E4E632;
    color: #FFF;
    font-weight: bold;
  }


/* footer
---------------------------------*/
footer {
  padding: 16px;
  text-align: center;
  border-top: 1px dotted #333;
}