0120-900-587
ヘッダーとは？～初心者のための基本解説～
ヘッダーはページの上部に表示される部分のことを指します。 Microsoft OfficeのWordやExcel、Webページなどで用いられることが多いものです。 ヘッダーにはどのような役割や目的があるのか、具体的な作成方法について解説していきます。
ホームページ制作.jpってどんなサービス？
- 運営10年！老舗のホームページ制作無料一括見積サービス。
- 審査済の優良ホームページ制作会社のみに見積もり依頼ができる。
- お見積もり無料。何度でもご相談無料。お断り代行も無料。
- 訪問無しのオンライン相談可能！
- しつこい営業は一切致しません！
全国通話無料
受付：年中無休/24時間電話受付0120-900-587
私たちが全力でサポート致します！
宇野（うの）
田丸（たまる）
真中（まなか）
このページの目次
1. ヘッダーとは？
ヘッダーとは、Microsoft OfficeのWordやExcelでは、ページの印刷範囲の上部に挿入される部分です。Webページにおいては1ページの上部に表示される部分で、メニューやページタイトル・ロゴが表示されます。 共通して、ページの上部に表示されるものがヘッダーと呼ばれます。
ヘッダーはフッターとも合わせて使われることがありますが、フッターはページの下部に表示されるものです。 ヘッダーは「頭」、フッターは「足」と覚えれば、どこに表示されるものかイメージしやすいでしょう。
2. ヘッダーの目的
ページの上部に情報を表示させることがヘッダーの役割ですが、その目的について解説します。
1. すべてのページに共通する情報を一度に設定できる
WordやExcelは作成したデータを印刷することもあるでしょう。 ヘッダーに文書の作成日付や、文書のタイトルなどを1ページごとに設定するのは、文書の量が増えるほど面倒くさい作業です。 ヘッダーに一度設定してしまえば、ページごとに設定する必要がなく、修正する際も1箇所だけ修正すればよいため、非常に手間を省けます。
Webページにおいても、ヘッダーにメニューやWebサイトのタイトルなどを作成することで、簡単に使い回すことが可能です。
2. ブランドイメージの請求、作成文書の統一感を出す
作業の手間を省けると共に、文書自体の統一感を出すことができます。 ヘッダーに文書名を挿入すれば、どのような文書かひと目で分かりますし、社名や会社ロゴを挿入すればどこの会社の文書かも分かりやすくなりますね。
ブランドイメージの請求という観点で言えば、Webページのヘッダーは特に重要です。 人間の目の動きはZを描くように左上から右下へと視線を動かすため、ヘッダーは最初に目にする部分となります。 最も目にする部分にWebサイトタイトルやメニューを置くことで、どのようなWebサイトであるのか、といったブランドイメージがユーザーに伝わりやすくなるということですね。
3. ヘッダーの作成方法：Word、Excel編
ここでは、WordやExcelで具体的にヘッダーを作成する手順を解説します。
1. メニューの「挿入」からヘッダーを追加
Wordは、デフォルトでページの上部と下部にスペースがあり、それぞれのスペースがヘッダーとフッターになります。 ヘッダーを挿入する際は、アプリケーション上部の「挿入」タブから「ヘッダー」をクリックしてヘッダーを追加できます。 Excelの場合は、アプリケーション上部の「挿入」タブから「ヘッダーとフッター」をクリックしてヘッダーを追加可能です。 Excelでは、アプリケーションの表示範囲が狭いと、「ヘッダーとフッター」メニューが隠れている場合があります。 アプリケーション上部の「挿入」タブをクリックして、「ヘッダーとフッター」メニューが見つからない場合は、「テキスト」メニューをクリックすると「ヘッダーとフッター」メニューが表示されますので、試してみてください。
2. ヘッダーが隠れてしまった場合の対応方法
先ほど紹介したメニューからヘッダーを追加する以外にも、Wordはヘッダー部分をダブルクリックすることで追加できます。 Excelも表示モードを切り替えることで、ヘッダーを追加できるようになるのですが、文書を作成するなかでヘッダーが隠れてしまう場合もありますよね。
ヘッダーが隠れてしまった場合の対応方法がありますので紹介します。 Wordでは、アプリケーション上部の「挿入」タブから「ヘッダー」をクリックし、「ヘッダーの編集」をクリックします。 「ヘッダーの編集」ではなく、ヘッダーを新規に追加してしまうと、ヘッダーの内容が消えてしまうため注意しましょう。 Excelでは、アプリケーション上部の「挿入」タブから「ヘッダーとフッター」をクリックすれば、ヘッダーとフッターの編集モードに切り替わるので、そこでヘッダーが表示されるようになります。
4. ヘッダーの作成方法：Webページ編
Webページのヘッダーを作成する方法は、いくつかありますが、ここではWebページのヘッダーをイメージしやすくするために、簡単なコードを紹介します。 パソコン上で簡単に試せるため、雰囲気を掴むためにも試してみてくださいね。
1. HTMLとCSSのコードをテキストに保存する
ヘッダーを表示するための簡単なHTMLとCSSのコード例を記載します。 本来は、CSSファイルは別ファイルとして保存するべきですが、サンプルであるため1つのファイルに記載しました。
<html>
<head>
<title>ヘッダー：サンプル</title>
<style type="text/css">
<!--
html,body {
margin: 0;
padding: 0;
}
div#header {
position:fixed;
width:100%;
height:140px;
background-color:#aaa;
}
ul#menulist li {
float:left;
width:100px;
}
div#contents {
clear:both;
padding:160px 0 0 0;
background-color:#ccc;
}
-->
</style>
</head>
<body>
<div id="header">
<h1>ヘッダーサンプル</h1>
<ul id="menulist">
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
</div>
<div id="contents">
コンテンツを記載
<br><br>※1
</div>
</body>
</html>
上記のサンプルコードをコピー＆ペーストして、テキストファイルに「header.html」として保存します。 ※1の「<br>」タグは、改行を意味しており、ヘッダーの動きを見るために10個ほど増やしてみましょう。
2. 保存したHTMLファイルをブラウザで実行する
保存した「header.html」ファイルをダブルクリックして実行すると、あなたが普段使っているWebブラウザ上にWebページが表示されます。
このサンプルコードでは、濃い灰色の背景部分がヘッダーとなり、コンテンツ部分が縦長に記載され続けても、ヘッダー部分は常に表示され続けるように作られています。 ヘッダー部分は、常に表示され続けるもの以外もありますが、わかりやすい例として常に表示され続ける作りとしました。
ヘッダーの中にWebサイトのタイトルやメニューのリンクを配置することで、ユーザーが見ているWebページがどんなWebサイトであるのかがひと目で分かるようになっています。
あくまでも一例ですので、さまざまなヘッダーの作り方や魅せ方がありますが、Webページにおけるヘッダーの役割を理解することができると思いますので、ぜひあなたのパソコン上で実行してみてください。
5. まとめ
ヘッダーはWordやExcel、Webページの上部に表示される部分のことを指します。 ヘッダーを用いると、ページごとに印刷時の設定をする必要がなく、会社名や会社ロゴ、Webサイト名などを挿入することで、ブランドイメージの請求ができます。
WordやExcel、Webサイトでのヘッダーの作成方法も解説しましたので、ぜひあなた自身の手で実際に動かしてみてください。
