Felica Study Site

Lesson Data Down Load

Ice party -マークアップ演習-

html

Ice party -マークアップ演習-

説明画像１

１カラムサイトの作成

下の文章をHTMLでマークアップしてみましょう。

★Ｉｃｅ　Ｐａｒｔｙ★
今日はアイスの日。
みんなでお出かけしてアイスを食べよう！
フンフン♪♪と楽しくトッピングしてくれるよ！

アイス画像１
アイス画像２
アイス画像３

★楽しいアイス★
・アイス盛り(バニラキャラメルアイス&チョコレートアイス&ブラウニー&バナナ) ￥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>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">

<div class="header">
<h1><span>★</span>Ｉｃｅ　Ｐａｒｔｙ<span>★</span></h1>
<p>今日はアイスの日。<br>
みんなでお出かけしてアイスを食べよう！<br>
フンフン♪♪と楽しくトッピングしてくれるよ！
</p>
</div><!--/.header-->

<p class="image">
<img src="img/46_ice01.jpg" alt="アイス画像１"><img src="img/46_ice02.jpg" alt="アイス画像２"><img src="img/46_ice03.jpg" alt="アイス画像３">
</p>

<div class="content">
<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>
</div><!--/.content-->

<div class="content">
<h2><span>★</span>ご飯メニュー<span>★</span></h2>
<table>
<tr><th>・チーズフォンデュ</th><td>￥700</td></tr>
<tr><th>・チーズINハンバーグ、ライス添え</th><td>￥700</td></tr>
</table>
</div><!--/.content-->

<div class="content">
<h2><span>★</span>いろいろなトッピング<span>★</span></h2>
<ul>
<li>甘酸っぱいミックスベリー</li>
<li>ふわふわなマシュマロ&綿菓子</li>
<li>さくさくな食感のオレオ</li>
<li>とろ～り甘い、ハニー&ナッツ</li>
</ul>
</div><!--/.content-->

<div class="footer">
<p>&copy; IceParty</p>
</div><!--/.footer-->

</div><!--/.container-->
</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;
}