一昨日の改正版
伊東君に手伝ってもらい直しました。
もう大体理解したので次に進みたいと思います。
<?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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html: charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>外部css編</title> <link rel="stylesheet" href="gaibu.css" type="text/css" media="screen.print" /> <style type="text/css"> <!-- *{ margin: 0; padding: 0; font-size: 100%; font-style: normal; font-weight: normal; border: none; list-style-type: none; text-align: left; } #container{ width: 800px; height: 700px; margin:10px; padding:10px; background-color: #000; } #header{ width: 800px; height: 120px; text-align: center; line-height: 120px; font-size: 2.0em; top: 10px; background-color: #f0f; margin-bottom: 10px; } #wrapper{ background-color: #ff0; overflow: auto; } #content{ width: 530px; height: 500px; float: left; background-color: #00f; } #sidebar{ width: 260px; height: 500px; float: right; background-color: #333; } #nav{ width: auto; height: auto; margin: 10px; } #nav ul{ width: 120px; height: 120px; } #nav li{ width: 224px; height: 80px; text-align: center; font-size: 20px; border-top: 8px ridge #fff; border-right: 8px ridge #fff; border-bottom: 8px ridge #fff; border-left: 8px ridge #fff; } #nav li a{ width: auto; text-align: center; display: block; line-height: 80px; } #footer{ width: 800px; height: 60px; background: #090; margin-top: 10px; line-height: 60px; } address { text-align: center; } #nav a:link,#nav a:visited{ color: #f44; } #nav a:hover{ color: #fff; background-color: #777; } h1{ text-align: center; color: fdf; background-color: green; } --> </style> </head> <body> <div id="container"> <div id="header"> <h1>RIAL MAGZIN</h1> </div> <div id="wrapper"> <div id="content"> <p>コンテント内容&本文</p> </div> <div id="sidebar"> <div id="nav"> <ul> <li><a href="#">REGGAE</a></li> <li><a href="#">HIP-HOP</a></li> <li><a href="#">SOUL</a></li> <li><a href="#">JAZZ</a></li> <li><a href="#">FUNK</a></li> </ul> </div> </div> </div> <div id="footer"> <address>管理者からのお知らせ</address> </div> </div> </body> </html>