【CSS013】CSS課題:ボックスモデル
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body{ margin-left: 0; background-image : url("20120417094230.jpeg"); background-repeat: repeat-y; } h2 { color: #ffffff; width: 80px; height: 40px; background: #C0C; text-align: center; } p { color: #000000; margin-left: 80px; } --> </style> </head> <body> <h2>BOX</h2> <p>この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p> </body> </html>
解答
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>css13</title> <style type="text/css"> <!-- body{ margin-left: 0px; background-image: url("20120417094230.jpeg") ; background-repeat: repeat-y; } h2 { color: #FFFFFF; font-size: 1.7em; width: 75px; background-color: #D046CD; } p { margin-left: 80px; } h2,p { padding: 5px; } --> </style> </head> <body> <h2>BOX</h2> <p>この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p> </body> </html>