【CSS05】
【CSS05】
・空きはリセットをせず、個別に指定する
・XHTML 1.0 Transitional
<html> <head> <title>css05</title> <style type="text/css" > body{ font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "MS Pゴシック", margin:auto; width:400px; } .title{ position:absolute; font-size:1.0em; font-weight:bold; color:#000; width:8em; } .name{ position:absolute; font-size:1.0em; font-weight:bold; color:#000; width:8em; margin-top:250px; } #content1{ position:absolute; border-left:solid ; border-color:#FF7F00; margin-left:120px; width:350px; padding-left:10px; font-weight:bold; font-size:15px; } #content2{ position:absolute; border-left:solid; border-color:#FF7F00; margin-top:250px; margin-left:120px; width:350px; padding-left:10px; font-weight:bold; font-size:15px; } </style> </head> <body> <div class="title">デザインの話</div> <div id="content1"> <p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。 物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。</p> <p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。 物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります</p> </div> <div class="name">パッケージの色</div> <div id="content2"> <p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。</p> <p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。</p> </div> </body> </html>