以下は、シンプルなウェブページのテンプレートの例です。このテンプレートは、ナビゲーションバー、ヘッダー、コンテンツエリア、フッターの基本的なセクションで構成されています。
コピーして使用ください。
HTMLコードのテンプレート1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>適当なHTMLサンプル</title>
</head>
<body>
<h1>ようこそ！</h1>
<p>これは適当なHTMLサンプルです。</p>
<h2>リスト</h2>
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ul>
<h2>画像</h2>
<img src="https://via.placeholder.com/150" alt="サンプル画像">
<h2>リンク</h2>
<p>以下はGoogleのリンクです。</p>
<a href="https://www.google.com" target="_blank">Google</a>
<h2>テーブル</h2>
<table>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
<tr>
<td>商品A</td>
<td>1000円</td>
</tr>
<tr>
<td>商品B</td>
<td>1500円</td>
</tr>
</table>
</body>
</html>
テンプレート2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>適当なHTMLサンプル</title>
</head>
<body>
<h1>ようこそ！</h1>
<p>これは適当なHTMLサンプルです。</p>
<h2>リスト</h2>
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ul>
<h2>画像</h2>
<img src="https://via.placeholder.com/150" alt="サンプル画像">
<h2>リンク</h2>
<p>以下はGoogleのリンクです。</p>
<a href="https://www.google.com" target="_blank">Google</a>
<h2>テーブル</h2>
<table>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
<tr>
<td>商品A</td>
<td>1000円</td>
</tr>
<tr>
<td>商品B</td>
<td>1500円</td>
</tr>
</table>
<h2>フォーム</h2>
<form>
<label for="name">名前：</label>
<input type="text" id="name" name="name" required><br>
<label for="email">Eメール：</label>
<input type="email" id="email" name="email" required><br>
<label for="message">メッセージ：</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br>
<input type="submit" value="送信">
</form>
</body>
</html>
テンプレート3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>シンプルなウェブページ</title>
<style>
/* スタイルを追加する場合はここに記述 */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #444;
color: #fff;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
nav a:hover {
text-decoration: underline;
}
section {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>シンプルなウェブページ</h1>
</header>
<nav>
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">製品</a>
<a href="#">お問い合わせ</a>
</nav>
<section>
<h2>ようこそ！</h2>
<p>これはシンプルなウェブページのテンプレートです。</p>
</section>
<footer>
<p>© 2023 サンプルウェブサイト</p>
</footer>
</body>
</html>
まとめ
このテンプレートは、ナビゲーションバーにリンクを追加することでページ内の移動が可能です。
また、スタイルセクションで基本的なスタイルを設定していますが、デザインをカスタマイズする場合はCSSを追加・変更してください。
