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

CSS基礎

カラムレイアウト
www.weblab.co.jp





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

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


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

使用するテキスト

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

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

Concept

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

Service

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

©️2020 Net Smart All Rights Reserved.

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


index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>1カラムレイアウトの作成</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</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><small>&copy; 2021 Net Smart All Rights Reserved.</small></p>
</div>
</div><!-- /.container -->
</body>
</html>

style.css

@charset "utf-8";

/* リセット部分 */
html,body,h1,h2,p{
margin: 0;
padding: 0;
}

/* スタイル部分 */
body{
background-color: #dbd8b0;
}
.container{
width: 960px;
margin: 0 auto;
}
.header{
width: 960px;
height: 350px;
background: url(../img/bg.jpg) no-repeat;
color: #FFF;
}
h1{
font-family: 'Ubuntu', sans-serif;
font-size: 42px;
padding: 30px 0 0 30px;
margin-bottom: 20px;
}
.header>p{
padding-left: 30px;
}
.concept{
width: 960px;
height: 400px;
background-color: #FFF;
}
h2{
text-align: center;
font-size: 40px;
font-family: 'Ubuntu', sans-serif;
padding: 50px 0 6px;
border-bottom: 6px solid #000;
width: 300px;
margin: 0 auto 30px;
}
.service{
width: 960px;
height: 400px;
background-color: #383a55;
color: #FFF;
}
.service>h2{
border-bottom: 6px solid #FFF;
}
.concept>p,.service>p{
width: 400px;
margin: 0 auto;
line-height: 2;
}
.footer{
width: 960px;
height: 100px;
background-color: #525151;
color: #FFF;
text-align: center;
}
.footer>p{
line-height: 100px;
}