ウェブ学のすすめ

Study of Web Design & Programing

実践課題【CSS10】 おいしい卵料理レストラン Cockyolly

課題

【CSS10】

  • 以下の画像と同じように表示させるCSSを記述しなさい
  • リセットは、全称セレクタ
  • 記述場所はエンベッド
  • XHTML 1.0 Transitional
  • 背景画像は作成する(アプリケーションは自由選択)
  • メニューは擬似クラスで指定

引用元:CSS10〜11 float - Webデザインの勉強|忘筌

解答

実践課題【CSS10】 おいしい卵料理レストラン Cockyolly - 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>おいしい卵料理レストラン Cockyolly</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body {
    font-family:
	"Hiragino Kaku Gothic Pro",
	"ヒラギノ角ゴ Pro W3",
	Meiryo, 
	"メイリオ", 
	Osaka, 
	"MS P Gothic", 
	"MS Pゴシック", 
	sans-serif;
}

#container {
    width: 740px;
    height: auto;
    background-image: url(http://jsrun.it/assets/A/b/v/c/Abvc8.gif);
    background-repeat: repeat-y;
    background-position: 153px 40px;
}

#wrapper {
    width: 700px;
    height: auto;
    overflow: auto;
}

#sidebar {
    width: 160px;
    height: 760px;
    float: left;
    background-color: #F09100;
    background-image: url(http://jsrun.it/assets/v/o/q/e/voqeh.gif);
    background-repeat: no-repeat;
    background-position: 40px 30px;
}

#content {
    width: 460px;
    height: auto;
    float: right;
    border-bottom: 2px solid #aaa;
    margin-bottom: 0;
    padding: 50px 20px;
    
}

h1 {
    text-align: center;
}

h2 {
    font-size: 1.275em;
    color: #805356;
    border-left: 10px solid #E37E12;
    padding-left: 10px;
    margin: 50px 0 20px;
}

p {
    font-size: 1.0em;
}

.menu {
    float: right;
    margin: 0 5px;
}

.price {
    font-size: 1.2em;
    font-weight: bold;
    padding-bottom: 20px;
    color: #f90;
}

ul {
    list-style-type: none;
    padding: 150px 0 0 20px;
}

li {
    padding: 5px 0;
}

li a {  
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
}
li a:link,li a:visited {
    color: #fff;
}

li a:hover {
    color: #EDE07A;
}

#footer {
    float: right;
    width: 460px;
    text-align: center;
    margin: 10px 0;
}

address {
    color: #aaa;
    font-weight: bold;
    font-style: normal;
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">今月のおすすめ</a></li>
<li><a href="#">オリジナル雑貨</a></li>
<li><a href="#">マップ</a></li>
<li><a href="#">メール</a></li>
</ul>
</div>
<div id="content">
<h1><a href="#"><img src="http://jsrun.it/assets/t/g/9/U/tg9Ui.gif" alt="今月のおすすめ" title="今月のおすすめ" /></a></h1>
<h2>きのこのオムライス</h2>
<p><img src="http://jsrun.it/assets/d/e/q/4/deq4J.jpg" alt="きのこのオムライス" class="menu" />ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。</p>
<p class="price">800円</p>
<h2>シーフードスパゲッティシーフードスパゲッティバルサミコ風味</h2>
<p><img src="http://jsrun.it/assets/1/B/O/B/1BOBQ.jpg" alt="シーフードスパゲッティシーフードスパゲッティバルサミコ風味" class="menu" />エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。</p>
<p class="price">900円</p>
</div>
<div id="footer">
<address>Copyright(c)2012 Cafe Cockeyolly</address>
</div>
</div>
</div>
</body>
</html>

Valid XHTML 1.0 Transitional 正当なCSSです!