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

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

divの使い方と1カラムレイアウト

CSS基礎

f:id:yachin29:20160203184948p:plain

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

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


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

使用するテキスト

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

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

Concept

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

Service

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

Copyright 2017 Net Smart All Rights Reserved.

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


コーディングの一例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>1カラムレイアウト</title>
<style>
/* reset */
html,body,header,footer,h1,h2,p,small {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}

/*ページレイアウト*/
body {
  background: #CCC;
}
#container {
  width: 960px;
  margin: 0 auto;
  height:1000px;
}
header {
  background: #AAAAAA;
  width: 960px;
  height: 300px;
}
h1 {
}
header p {
}

#concept {
  width:960px;
  height:300px;
  background:#FFFFFF;
}
#concept h2 {
  font-size: 32px;
  padding: 40px 0 10px;
  width: 200px;
  margin: 0 auto;
  text-align:center;
  color: #09F;
  border-bottom: 5px solid #09F;
}
#concept p {
  width:600px;
  margin:40px auto 0;
  color: #09F;
  line-height: 2;
  text-align:center;
}
#service {
  background: #09F;
  width: 960px;
  height: 300px;
}
#service h2 {
  font-size: 32px;
  padding: 40px 0 10px;
  width: 200px;
  margin: 0 auto;
  text-align:center;
  color: #FFF;
  border-bottom: 5px solid #FFF;
}
#service p{
  color: #FFF;
  width:600px;
  margin:40px auto 0;
  line-height: 2;
  text-align:center;
}
footer {
  background: #333;
  height:100px;
}
footer p {
  text-align: center;
  color: #FFF;
  line-height:100px;
  font-size:18px;
}
</style>
</head>

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

<div id="concept">
<h2>Concept</h2>
<p>すべてのインターネットユーザーに快適でよりスマートさを。ネットスマートはデジタルのチカラを持って、皆様とそんな未来を創造していきます。</p>
</div>
<div id="service">
<h2>Service</h2>
<p>低価格&amp;高機能なCMS導入。充実の管理画面でサイト運用を効率的に。</p>
</div>

<footer><p><small>Copyright 2017 Net Smart All Rights Reserved.</small></p></footer>
</div>
</body>
</html>