Ice Party -1column-
１カラムサイトの作成
下の文章をHTMLでマークアップしてみましょう。
マークアップの手順をしっかり確認したら、完成例を参考にCSSを設定してみましょう。
横幅:960px のレイアウトで作成
★Ｉｃｅ Ｐａｒｔｙ★
今日はアイスの日。
みんなでお出かけしてアイスを食べよう！
フンフン♪♪と楽しくトッピングしてくれるよ！
アイス画像１
アイス画像２
アイス画像３
★楽しいアイス★
・アイス盛り(バニラキャラメルアイス&チョコレートアイス&ブラウニー&バナナ) ￥700
・和風あいすくりん(バニラ&抹茶&あずき&柚子&みかん) ￥800
・ベリー尽くし(ブルーベリー、ミックスベリーソースのミルフィーユ仕立て) ￥1000
★ご飯メニュー★
・チーズフォンデュ ￥700
・チーズINハンバーグ、ライス添え ￥700
★いろいろなトッピング★
・甘酸っぱいミックスベリー
・ふわふわなマシュマロ&綿菓子
・さくさくな食感のオレオ
・とろ～り甘い、ハニー&ナッツ
(C)IceParty
使用画像
5/16日：授業内容
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Ice Party</title>
<style>
h1{
background-color: #00c753;
color:#fff;
}
span{
color: #ff0;
}
h2{
background-color: #00c753;
color:#fff;
}
table{
border:1px solid #222;
border-collapse: collapse;
}
th{
border: 1px solid #222;
}
td{
border:1px solid #222;
}
footer{
background-color: #00c753;
color:#fff;
}
</style>
</head>
<body>
<h1><span>★</span>Ｉｃｅ Ｐａｒｔｙ<span>★</span></h1>
<p>今日はアイスの日。<br>
みんなでお出かけしてアイスを食べよう！<br>
フンフン♪♪と楽しくトッピングしてくれるよ！</p>
<img src="img/46_ice01.jpg" alt="アイス画像１"><img src="img/46_ice02.jpg" alt="アイス画像２"><img src="img/46_ice03.jpg" alt="アイス画像３">
<h2><span>★</span>楽しいアイス<span>★</span></h2>
<table>
<tr><th>・アイス盛り(バニラキャラメルアイス&チョコレートアイス&ブラウニー&バナナ)</th><td>￥700</td></tr>
<tr><th>・和風あいすくりん(バニラ&抹茶&あずき&柚子&みかん)</th> <td>￥800</td></tr>
<tr><th>・ベリー尽くし(ブルーベリー、ミックスベリーソースのミルフィーユ仕立て)</th><td>￥1000</td></tr>
</table>
<h2><span>★</span>ご飯メニュー<span>★</span></h2>
<table>
<tr><th>・チーズフォンデュ</th><td>￥700</td></tr>
<tr><th>・チーズINハンバーグ、ライス添え</th><td>￥700</td></tr>
</table>
<h2><span>★</span>いろいろなトッピング<span>★</span></h2>
<ul>
<li>甘酸っぱいミックスベリー</li>
<li>ふわふわなマシュマロ&綿菓子</li>
<li>さくさくな食感のオレオ</li>
<li>とろ～り甘い、ハニー&ナッツ</li>
</ul>
<footer>
<p><small>©IceParty</small></p>
</footer>
</body>
</html>CSS設定
@charset "utf-8";
html,body,h1,p,h2,ul,li{
padding: 0;
margin: 0;
line-height: 1;
}
ul{list-style: none;}
img{vertical-align: bottom;}
/*container
----------------------*/
.container{
width:960px;
margin:0 auto;
}
/*header
-----------------------*/
.header{
margin-bottom: 40px;
}
.header h1{
padding: 20px 0;
margin-bottom: 20px;
background:#00c753;
color:#fff;
}
.header h1 span{
color:#ffff00;
}
.header p{
line-height: 1.65;
}
/*image
-------------------*/
.image {
margin-bottom:50px;
}
/*content
--------------------*/
.content{
margin-bottom: 80px;
}
.content h2{
padding: 10px 0;
margin-bottom: 10px;
background: #00c753;
color:#fff;
}
.content h2 span{
color:#ffff00;
}
.content table,
.content table th,
.content table td{
border:1px solid #000;
border-collapse: collapse;
}
.content table th,
.content table td{
padding: 5px;
line-height: 1.5;
}
.content ul{
list-style: disc;
padding-left:26px;
}
.content ul li{
margin-bottom:10px;
}
/*footer
--------------------*/
.footer{
padding:20px 0 50px;
background:#00c753;
}
.footer p{
color:#fff;
}
