HTMLでのシングルページサイトの構築 – HTMLで始めるホームページ作成
HTMLでシングルページサイトを構築することは非常に効果的な方法です。シングルページサイトは、ユーザーが連続して情報を受け取りやすく、ナビゲーションもシンプルです。
シングルページサイトのメリット
- ナビゲーションが簡単
- 読み込み速度が速い
- モバイルフレンドリー
基本的なHTML構造
シングルページサイトの基本的なHTML構造は以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>シングルページサイト</title>
</head>
<body>
<section role="group">
<header></header>
<main></main>
<footer></footer>
</section>
</body>
</html>
具体的なページのレイアウト
さらに、具体的なページのレイアウトを次のように構築します。
ヘッダー
ヘッダーには、ロゴやナビゲーションリンクが含まれます。
<header>
<div class="logo">ロゴ</div>
<nav>
<ul>
<li><a href="#home" rel="nofollow" target="_blank" title="ホームリンク" aria-label="ホームリンク">ホーム</a></li>
<li><a href="#about" rel="nofollow" target="_blank" title="アバウトリンク" aria-label="アバウトリンク">アバウト</a></li>
<li><a href="#contact" rel="nofollow" target="_blank" title="コンタクトリンク" aria-label="コンタクトリンク">コンタクト</a></li>
</ul>
</nav>
</header>
メインコンテンツ
メインセクションでは主要な情報を提供します。
<main>
<section id="home" role="group">
<h2 class="wp-block-heading">ホーム</h2>
<p>ここにホームセクションの内容が入ります。</p>
</section>
<section id="about" role="group">
<h2 class="wp-block-heading">アバウト</h2>
<p>ここにアバウトセクションの内容が入ります。</p>
</section>
<section id="contact" role="group">
<h2 class="wp-block-heading">コンタクト</h2>
<p>ここにコンタクトセクションの内容が入ります。</p>
</section>
</main>
フッター
フッターにはコピーライト情報や追加リンクが含まれます。
<footer>
<p>© 2023 Your Company</p>
</footer>
まとめ
シングルページサイトは、簡潔で効果的なウェブプレゼンスを提供します。HTMLを用いて基本的な構造を作成し、さらにCSSやJavaScriptを追加することで、より魅力的なサイトを構築することが可能です。
スタートアップ企業のウェブサイトには、シングルページサイトが理想的だといえます。
