<?xml version="1.0" encoding="UTF-8"?>
<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>CSS05</title>
<style type="text/css">
body {
font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro W3", Osaka, sans-serif;
width: 580px;
margin: auto;
background-color: #ffffff;
}
h1 {
font-size: 1.05em;
}
.main {
position: absolute;
left: 265px;
margin-top: 5px;
}
.sub {
position: absolute;
left: 245px;
padding-top: 5px;
}
#content, #content2 {
width: 430px;
padding-left: 0.8em;
border-left: solid 5px #FF7F00;
}
p {
color: #808080;
font-size: 0.95em;
margin: 3em 0;
}
</style>
</head>
<body>
<h1 class="main">デザインの話</h1>
<div id="content">
<p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。
歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。</p>
<p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。
歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。</p>
</div>
<h1 class="sub">パッケージの色</h1>
<div id="content2">
<p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。</p>
<p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。</p>
</div>
</body>
</html>
