1カラムレイアウトの作成 - WEBサイト制作の勉強

f:id:yachin29:20160203184948p:plain

divタグ　　・・ひとかたまりの範囲として定義する

divタグはそれ自身は特に意味を持っていませんが、DIVで囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。

今回はh1やpをdivの中に入れ、カラムレイアウトを作っていきます。
カラムとは段を組むこと（段組）を指します。今回は１つのカラムを組んでレイアウトしていきます。
また画像も自身で選び、Photoshopで適切なサイズにトリミングして使用しましょう。

使用するテキスト

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
Net Smart

よりスマートなインターネットライフを。

Concept

すべてのインターネットユーザーに快適でよりスマートさを。ネットスマートはデジタルのチカラを持って、皆様とそんな未来を創造していきます。

Service

低価格&高機能なCMS導入。充実の管理画面でサイト運用を効率的に。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>1カラムレイアウトの練習</title>
<style>
html,body,h1,h2,p {
  margin:0;
  padding:0;
  line-height:1.0;
}
.container {
  width:800px;
  margin:0 auto;
}
.header {
  height:400px;
  background: url(img/header.jpg) no-repeat;
}
.concept {
  height:300px;
  background:#EFFFF6;
}
.service {
  height: 300px;
  background:#626262;
}
.footer {
  height:100px;
  background:#9ADBEC;
}
h1 {
  padding-top:20px;
  margin:0 0 20px 30px;
}
h2 {
  width:260px;
  border-bottom:4px solid #444444;
  margin: 0 auto 40px;
  text-align:center;
  padding:20px 0 10px;
}
.concept h2 {
  color:#5C5C5C;
}
.service h2 {
  color:#FFFFFF;
  border-bottom:4px solid #FFFFFF;
}
.concept p {
  width:540px;
  margin: 0 auto;
  text-align:center;
  line-height:1.5;
}
.service p {
  width:540px;
  margin: 0 auto;
  text-align:center;
  line-height:1.5;
  color:#FFFFFF;
}
.footer p {
  text-align:center;
  line-height:100px;
}
</style>
</head>

<body>
<div class="container">
<div class="header">
<h1>Net Smart</h1>
<p>よりスマートなインターネットライフを。</p>
</div>
<div class="concept">
<h2>Concept</h2>

<p>すべてのインターネットユーザーに快適でよりスマートさを。ネットスマートはデジタルのチカラを持って、皆様とそんな未来を創造していきます。</p>
</div>
<div class="service">
<h2>Service</h2>

<p>低価格・高機能なCMS導入。充実の管理画面でサイト運用を効率的に。</p>
</div>
<div class="footer">
<p>Copyright 2017 Net Smart All Rights Reserved.</p>
</div>
</div>
</body>
</html>

divタグ ・・ひとかたまりの範囲として定義する

使用するテキスト

divタグ　　・・ひとかたまりの範囲として定義する