はじめに
HTMLの<head>タグ内では、文字コードの指定やスタイルシートの読み込みなど、Webページの土台を構成する大切な情報を記述します。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
今回は、ホンダ社労士事務所のWebサイトに実際に使用された<head>タグの構成とその役割について解説します。
書こうと思ったきっかけ
複数のCSSファイルをページごとに読み込む際、「読み込み順って影響あるの？」「どこまでが共通でどこが個別？」と混乱した経験がありました。
初心者の方が理解しやすいように、自分の理解を整理するためにまとめました。
内容の説明（の構成と解説）
以下は実際に使用している<head>タグのHTMLコードです。
<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">
<link rel="stylesheet" href="css/support-a.css">
</head>
各要素の解説
-
<meta charset="UTF-8">- 文字コードをUTF-8に指定。日本語を含むコンテンツでは必須です。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">- スマホなどの画面幅に合わせて表示を調整するための指定。レスポンシブ対応には欠かせません。
-
<title>- ブラウザのタブや検索結果に表示されるページのタイトル。
-
<link rel="stylesheet" href="css/style.css">- 全ページ共通の基本スタイルを記述したCSSファイル。
-
<link rel="stylesheet" href="css/index.css">- トップページ専用のスタイル。style.cssの上に追加・上書きする内容。
-
<link rel="stylesheet" href="css/support-a.css">- 就労支援A型ページ専用のスタイル。必要に応じて追加。
CSSは上から順に読み込まれるため、共通→ページ固有の順で書くと整理しやすく、効率的です。
まとめ
<head>タグ内の構成は、Webサイト全体の安定性と可読性に直結する重要なポイントです。
共通のCSSとページ固有のCSSを分けて管理することで、スタイルの再利用性が高まり、保守性も向上します。
今後は、SEO対策用の<meta>タグやSNSシェア用のOGPタグなども組み合わせて、より充実した構成にしていきたいと思います！