読者です 読者をやめる 読者になる 読者になる

HTMLの勉強|Webサイト作りの基礎

初心者向けの向けのHTMLの勉強の仕方を綴っていきます。かくいう私もWebサイト作りの初心者です笑

HTMLでページを作成してみましょう!

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;
}