はじめに
HTMLはWebページの構造を定義するための言語であり、正しい構造で記述することで、見やすく保守性の高いWebサイトを実現できます。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
この記事では、ホンダ社労士事務所のトップページHTMLを例に、その構成要素と役割を解説します。
書こうと思ったきっかけ
Webページを制作している際に「このタグって何のためにあるの？」「どうやってパーツを分けて構成するのが正解なんだろう？」と疑問に思うことがありました。
具体的なコードをもとに整理することで、HTMLの構造理解を深めたいと思い、この記事を書くことにしました。
HTML構成の解説
<head>要素
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ホンダ社労士事務所</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/index.css">
</head>
- ページの文字コード、レスポンシブ対応、タイトル、CSSの読み込みなど、基本設定をまとめています。
<header> ヘッダー部分
<header>
<div class="header-title">
<a href="index.html">
<img src="images/logo.png" alt="ロゴ" style="height: 50px; margin-right: 1000px;">
</a>
</div>
- ロゴ画像を表示し、トップページへのリンクとして機能します。
ハンバーガーメニュー
<div class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
- スマホでのメニュー開閉用のアイコン（3本線）を表示。
ナビゲーションメニュー
<nav class="nav-menu" id="nav-menu">
<a href="index.html">HOME</a>
<a href="office.html">事務所案内</a>
<a href="services.html">サービス案内</a>
<a href="contact.html">お問い合わせ</a>
<a href="support-a.html">就労支援A型</a>
</nav>
</header>
- サイト内を移動するためのリンクをまとめたナビゲーション。
<main> メインコンテンツ
<main class="container">
- サイトの主要なコンテンツを格納する領域です。
画像セクション
<section class="top-image">
<img src="images/bridge.png" alt="ホンダ社労士事務所の外観またはイメージ画像" />
</section>
- トップページ用の大きなイメージ。
新着情報・お知らせ
<section>
<h2>新着情報</h2>
<ul>
<li><a href="info/20241226093859.html">2024.12.26 ホームページを開設いたしました</a></li>
...
</ul>
</section>
- お知らせや更新情報をリスト形式で表示しています。
<footer> フッター
<footer>
<p>© ホンダ社労士事務所</p>
</footer>
- ページ最下部に事務所名や著作権表示などの補足情報を配置します。
<script> JavaScript
<script>
const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('open');
navMenu.classList.toggle('active');
});
</script>
- ハンバーガーメニューをクリックしたときにメニューの表示・非表示を切り替える処理です。
まとめ
このように、HTMLは要素ごとに役割を持たせて整理することで、可読性が高く保守もしやすい構造になります。
特に <header> <main> <footer> の三分割を意識しながら、ナビゲーションやセクションの使い分けを覚えると、実務でも役立つサイト構成が自然と身につきます。
今回のコード例を参考に、自分なりに構成をカスタマイズしてみるのもおすすめです！