<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>見出しと段落のレイアウト</title>
<link rel="stylesheet" href="css/0804-h01.css">
</head>
<body>
<div id="content">
<h1>見出しと段落のレイアウト</h1>
<p>同じ内容の文章であっても、その表現の仕方によって読者に与える印象は大きく変化します。文章のレイアウトを考えることはより正確に、より効果的に情報を伝えるためにとても重要なことです。</p>
<h2>見出しのレイアウト</h2>
<p>見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で･･･といった具合に、重要なものから順々にマークアップいきます。</p>
<p>見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で･･･といった具合に、重要なものから順々にマークアップいきます。</p>
<h2>段落のレイアウト</h2>
<p>パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。</p>
<p>パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。</p>
</div>
</body>
</html>
@charset "utf-8";
body,div,h1,h2,p {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
color:#333;
line-height: 1.5;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
#content {
width: 500px;
margin:30px;
}
h1 {
font-size: 160%;
color: #03C;
background:#F0F8FF;
border-top:8px solid #03C;
border-bottom: 2px solid #999;
padding: 5px 0 0 2px;
margin-bottom: 10px;
}
h2 {
font-size: 120%;
color: #03C;
border-left: 5px solid #03C;
border-bottom: 1px solid #999;
background: #E6E6FA;
margin: 10px 0;
padding: 2px 0 0 2px;
}
p {
margin-bottom: 10px;
}
