webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

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

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>
html,body,div,h1,h2,p,small {
margin: 0;
padding: 0;
line-height: 1.0;
}
#container {
width: 960px;
margin: 0 auto;
}
#header {
width: 100%;
height: 300px;
background:url(bg02.jpg) no-repeat;
color: #FFF;
}
h1 {
padding-top: 60px;
margin:0 0 20px 600px;
}
#header p {
margin-left: 600px;
}
#concept {
width: 100%;
height: 300px;
background: #666;
color:#FFF;
text-align: center;
}
#concept p {
line-height: 1.5;
}
h2 {
font-size: 44px;
padding: 40px 0 10px;
margin:0 auto 40px;
width: 500px;
}
#concept h2 {
border-bottom: 4px solid #FFF;
}
#service h2 {
border-bottom: 4px solid #222;
}
#service {
width: 100%;
height: 300px;
background: #FFF;
color: #222;
text-align: center;
}
#footer {
width: 100%;
height: 100px;
background:#333;
color:#FFF;
text-align: center;
}
#footer p {
line-height: 100px;
}
</style>
</head>

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

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

<div id="service">
<h2>Service</h2>
<p>低価格&高機能なCMS導入。充実の管理画面でサイト運用を効率的に。</p>
</div>

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