実践課題【CSS01】今日買った物
課題
【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> </head> <body> <div id="shopping"> <h2>今日買った物</h2> <ul> <li>豚肉</li> <li>じゃがいも</li> <li>たまねぎ</li> <li>にんじん</li> </ul> </div> </body> </html>
解答
実践課題【CSS01】 リストを装飾 - jsdo.it - share JavaScript, HTML5 and 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"> div#shopping { font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "MS Pゴシック", sans-serif; } h2 { color: #ffffff; font-size: 1.0em; margin: 0; padding: 3px; background-color: #2262ff; } ul { list-style-type: none; margin: 0; padding: 0; } li { font-size: 1.0em; padding: 3px; border-bottom-style: dotted; border-color: #888888; border-width: 1px; } </style> </head> <body> <div id="shopping"> <h2>今日買った物</h2> <ul> <li>豚肉</li> <li>じゃがいも</li> <li>たまねぎ</li> <li>にんじん</li> </ul> </div> </body> </html>