練習1（エンベット）
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitinal//EN" "http//www.w3/org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-type" content="text/css" />
<title＞1カラムレイアウト</title>
<style type="text/css">
<!--
body{
color: #343434;
font-size: 0.8em;
font-famly:
"Hiragino Kaku Gothic Pro",
"ヒラギノ 角ゴ Pro W3",
Meiryo,
"メイリオ",
Osaka,
"MS PGothic",
"MS Pゴシック",
sans-serif;
line-height: 1.7;
margin: 20px 0;
padding: 0;
}
#container{
width: 350px;
margin:30px auto;
border: 1px solid #ff7f00;
}
.content{
margin: 0 0 20px 20px;
}
h1{
font-size: 1.5em;
color: #ffffff;
font-family:
Verdana,
Helvetica,
sans-serif;
margin: 0 0 24px 0;
padding: 5px 5px 5px 15px;
width: 330px;
background-color: #ff7f00;
}
h2{
font-size: 16px;
color: #ff7f00;
margin: 0 0 10px;
}
p{
margin: 0 1em 1em 16px;
}
-->
</style>
</head>
<body>
<div id="container">
<h1>Products</h1>
<div class="content">
<h2>デザインの話</h2>
<p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。</p>
<p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。</p>
</div>
<div class="content">
<h2>パッケージの色</h2>
<p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。</p>
<p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。</p>
</div>
</div>
</body>
</html>
練習2（外部リンク）
@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
body{
color: #333333;
font-size: 0.8em;
font-family:
"Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴpro W3",
"Meiryo,
"メイリオ",
Osaka,
"MS PGothic",
"MS Pゴシック",
sans-serif;
line-height: 1.7;
margin: 10px;
padding: 0;
background-color: #ffffff;
}
#container {
width: 540px;
margin: 50px auto 0 auto;
border: 1px dotted #0850b2;
}
.content{
width: 500px;
margin: 25px 20px 0;
}
h1{
color: #0850b2;
font-size: 1.5em;
background: #ffffff url(../images/heading_bg.gif) left bottom repeat-x;
border-top: 7px solid #0850b2;
border-bottom: 3px solid #cccccc;
margin: 0 0 20px;
padding: 10px 10px 5px 1em;
}
h2{
color: #0850b2;
font-size: 1.2em;
background-color: #efefef;
border-left: 5px solid #0850b2;
border-bottom: 1px solid #cccccc;
margin: 0;
padding: 10px 5px 4px 1em;
}
p{
margin: 16px 0 16px 20px;
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>1カラムレイアウト-2</title>
<link href="css/base2.css" rel="stylesheet" type="text/css" media="screen, print" />
</head>
<body>
<!--▼#container-->
<div id="container">
<!--▼.content-->
<div class="content">
<h1>見出しと段落のレイアウト</h1>
<p>
同じ内容の文章であっても、その表現の仕方によって読者に与える印象は大きく変化します。文章のレイアウトを考えることはより正確に、より効果的に情報を伝えるためにとても重要なことです。
</p>
</div>
<!--▲.content-->
<!--▼.content-->
<div class="content">
<h2>見出しのレイアウト</h2>
<p>
見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で･･･といった具合に、重要なものから順々にマークアップいきます。
</p>
<p>
見出しは、その章・節で述べられる話題を端的に示すものです。
見出しにはh1からh6までの、6レベルの見出しが用意されています。</p>
</div>
<!--▲.content-->
<!--▼.content-->
<div class="content">
<h2>段落のレイアウト</h2>
<p>
パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。</p>
</div>
<!--▼.content-->
</div>
<!--▼#container-->
</body>
</html>
