96's blog

WEBサイト制作科 6ヶ月コース

実践演習課題H01C01

<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="utf-8">
<linkrel="stylesheet"href="css/H01C01.css"media="all">
<title>H01C01</title>
</head>
<body>
<divid="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";
/* CSS Document */
body, div, h1, h2, p {
  margin: 0;
  padding: 0;
  margin-bottom: 16px;
}
body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
#content {
  width: 550px;
  margin: 10px auto;
}
h1, h2 {
  color: #0052B8;
}
h1 {
  background-color: #EFF6FE;
  border-top: 8px solid #0052B8;
  border-bottom: 3px solid #d3d3d3;
  font-size: 26px;
}
h2 {
  background-color: #EFEFEF;
  border-left: 6px solid #0052B8;
  border-bottom: 1px solid #d3d3d3;
  font-size: 22px;
  line-height: 30px;
}

f:id:webtm2013:20130727185133p:image