HTMLでページを作成してみましょう！ - HTMLの勉強|Webサイト作りの基礎

HTMLの勉強は進んでいますか？

今回は、HTMLでページを作る勉強をしてみましょう。

下記のように、HTMLを書いていって、ページを作り、

どこがどんな風にHTMLとして書かれているかを理解しながら書いてくださいね！

では、HTMLでページを作る勉強を始めましょう！

ページを作成する

index.html(トップページ)
｜
｜－－item－－index.html（商品ページ）
｜
｜－－order－－index.html（注文ページ）
｜
｜－－shop－－index.html（店舗ページ）
｜
｜－－contact－－index.html（お問い合わせページ）

トップページ

index.html

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>トップページ｜ケーキショップ</title>
<linkrel="stylesheet"href="css/style.css"media="all">
</head>
<bodyid="top">
<h1>トップページ</h1>
<ul>
<liclass="this">HOME</li>
<li><ahref="item/index.html">ITEM</a></li>
<li><ahref="order/index.html">ORDER</a></li>
<li><ahref="shop/index.html">SHOP</a></li>
<li><ahref="contact/index.html">CONTACT</a></li>
</ul>
</body>
</html>

商品ページ

item/index.html

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>商品ページ｜ケーキショップ</title>
<linkrel="stylesheet"href="../css/style.css"media="all">
</head>
<bodyid="item">
<h1>商品ページ</h1>
<ul>
<li><ahref="../index.html">HOME</a></li>
<liclass="this">ITEM</li>
<li><ahref="../order/index.html">ORDER</a></li>
<li><ahref="../shop/index.html">SHOP</a></li>
<li><ahref="../contact/index.html">CONTACT</a></li>
</ul>
</body>
</html>

注文ページ

order/index.html

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>注文ページ｜ケーキショップ</title>
<linkrel="stylesheet"href="../css/style.css"media="all">
</head>
<bodyid="order">
<h1>注文ページ</h1>
<ul>
<li><ahref="../index.html">HOME</a></li>
<li><ahref="../item/index.html">ITEM</a></li>
<liclass="this">ORDER</li>
<li><ahref="../shop/index.html">SHOP</a></li>
<li><ahref="../contact/index.html">CONTACT</a></li>
</ul>
</body>
</html>

店舗ページ

shop/index.html

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>店舗ページ｜ケーキショップ</title>
<linkrel="stylesheet"href="../css/style.css"media="all">
</head>
<bodyid="shop">
<h1>店舗ページ</h1>
<ul>
<li><ahref="../index.html">HOME</a></li>
<li><ahref="../item/index.html">ITEM</a></li>
<li><ahref="../order/index.html">ORDER</a></li>
<liclass="this">SHOP</li>
<li><ahref="../contact/index.html">CONTACT</a></li>
</ul>
</body>
</html>

お問い合わせページ

contact/index.html

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>お問い合わせページ｜ケーキショップ</title>
<linkrel="stylesheet"href="../css/style.css"media="all">
</head>
<bodyid="contact">
<h1>お問い合わせページ</h1>
<ul>
<li><ahref="../index.html">HOME</a></li>
<li><ahref="../item/index.html">ITEM</a></li>
<li><ahref="../order/index.html">ORDER</a></li>
<li><ahref="../shop/index.html">SHOP</a></li>
<liclass="this">CONTACT</li>
</ul>
</body>
</html>

スタイルシート（CSS）

・リストの黒丸をとる
・ナビゲーションを横に並べる
・リンクの下線をとる
・今いる場所に色をつける
・各ページの背景色を変える

@charset "UTF-8";

body#top {
  background: #FC9;
}
body#item {
  background: #6CF;
}
body#order {
  background: #FCF;
}
body#shop {
  background: #9F9;
}
body#contact {
  background: #CCC;
}
h1 {
  color: #FFF;
}
ul {
  list-style-type: none;
}
li {
  float: left;
  width: 150px;
  height: 50px;
  background: #FFF;
  text-align: center;
  line-height: 50px;
}
li a {
  display: block;
  text-decoration: none;
}
li.this {
  display: block;
  background: #FF4500;
}