CSS01
追記:ボーダーの囲いを足したので画像を差し替えて、CSSも書き足しました。
【CSS01】
- 以下の画像と同じように表示させるCSSを記述しなさい
- 記述場所はエンベッド
<?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>正しく構造化されたHTMLの例(CSSが適用されている場合)</title> <style type="text/css"> body { width: 400px; border: solid 1px #dcdcdc; padding: 0 10px; } h2 { color: #ffffff; font-size: 1em; background-color: #0060cf; margin-bottom: 0; padding: 5px 3px; } ul { list-style-type: none; margin-top: 0; padding: 3px; line-height: 1.6; } li { border-bottom: dotted 1px #c0c0c0; } </style> </head> <body> <div id="shopping"> <h2>今日買った物</h2> <ul> <li>豚肉</li> <li>じゃがいも</li> <li>たまねぎ</li> <li>にんじん</li> </ul> </div> </body> </html>
ul のmargin-top を0にしても隙間が空いてしまい困ったが、h2 のmargin-bottom も0にしたら余白がなくなった。