こんにちは、フローです。
今回もHTMLについて書いていきたいと思います。
前回の記事はこちらです。
HTMLの記述例
私もそうでしたが、初心者のうちはとにかく、何度も何度も繰り返しHTMLやCSSを書いて覚えるのが早いです。
書いているうちに、色々なパターンを覚えていくので、他のサイトでも使い回しが効くようになっていきます。
では、記述例をみていきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>デモサイト</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">製品</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>デモサイトへようこそ</h1>
<p>ここにテキストが入ります。</p>
</section>
<section>
<h2>製品</h2>
<div class="product">
<img src="product1.jpg" alt="製品1">
<h3>製品1</h3>
<p>製品1の説明が入ります。</p>
</div>
<!-- 他の製品の情報も追加 -->
</section>
</main>
<footer>
<p>© 2023 デモサイト. All Rights Reserved.</p>
</footer>
<script src="scripts.js"></script>
</body>
</html>
次に、CSSです。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
}
header {
background-color: #333;
padding: 20px;
}
nav ul {
display: flex;
justify-content: space-around;
list-style: none;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
main {
padding: 40px;
}
h1 {
margin-bottom: 20px;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
}
.product img {
width: 100%;
max-width: 200px;
height: auto;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
簡単なサイトだとこのくらいですみます。
ここに、レスポンシブデザインやパララックスなど画像を追加したりして、デザインを整えていきます。
まとめ
今回は簡単なHTMLの記述例を紹介しました。
コピペも、もちろんオッケーですが、最初はとにかく指を動かす事で覚えます。
是非やってみて下さい。
次回は、この例をもとにもう少し深掘りして紹介していきたいと思います。
レッツチャレンジ!
最近のコメント