HTMLのheader作成例

Webページには、ページ上部にサイト名や画像を表示する部分があります。

本ページでは、HTMLのheader部分の作成方法について説明します。

headerとは？

HTMLのheader要素は、ページのヘッダーや、記事のヘッダーとして使われます。

ページのヘッダーとは、「デザイン」で示した以下の赤枠部分です。

Webページの画面です。サイト名やサイトのイメージ画像、ナビゲーション部分を赤枠で囲っています。

また、記事のヘッダーとしては、以下のように使われます。

【記事のヘッダーとしての使われ方】

<article>

<header>
<h1>ページのタイトル</h1>
<p>段落<p>
</header>
<h2>第一章</h2>
<p>段落<p>

</article>

articleは、主要な記事を意味します。赤字部分がheaderです。このように、headerは記事の導入部分でも使われます。

次からは、デザインの内容を例に、ページのヘッダーの作り方を説明します。

ヘッダーのHTML

デザインしたヘッダーは、以下で構成されています。

コンテナが、ページ全体を囲っています。コンテナ内のヘッダーは、サイト名、ヘッダー画像、グローバルナビゲーションで構成されています。

上記をHTMLで記述すると、以下になります。文字の色は、上記画像の色と対応しています。

【ヘッダーのHTML】

<body>

<div id="container">

<header id="header">

<h1><a href="index.html"><img src="image/site-title.png" alt="キャンプ入門サイト"></a></h1>

<img src="image/header-image.png" alt="キャンプ入門サイトのヘッダー">

<nav id="nav">
<ul>
<li><a href="cat1/index.html">カテゴリ1</a></li>
<li><a href="cat2/index.html">カテゴリ2</a></li>
<li><a href="cat3/index.html">カテゴリ3</a></li>
<li><a href="cat4/index.html">カテゴリ4</a></li>
</ul>
</nav>

</header>

</div>

</body>

次からは、それぞれの内容について説明します。

body要素: body要素が、実質的にブラウザの表示領域全体を示します。
<div id="container">: <div id="container">は、ページ内の要素を包含したボックスで、コンテナとも呼ばれます。今回は、ヘッダーの作成例なのでheaderしか含んでいませんが、通常はそれ以降の記事やフッターなども含めます。
header要素: header要素が、ページのヘッダーを示します。緑字の要素は、ヘッダー要素の中に記述されています。
h1要素: ヘッダーのh1要素で、サイト名を示しています。画像を表示し、クリックするとトップページに移動するようにしています。トップページでは、サイト名がh1要素になりますが、記事ページの場合はここをp要素で記述します。h1要素は、記事のタイトルで使うためです。
img要素: サイト名の画像と、ヘッダー画像を挿入しています。srcの後に画像のファイル名を指定します。また、altは画像の説明で必須です。
nav要素: nav要素は、ナビゲーションを示します。リンクがあればnav要素という訳ではなく、ヘッダーにあるグローバルナビゲーションのように、主なナビゲーションで使います。子要素にulを作っていますが、このままではリストが縦に並んで表示されるため、CSSで調整が必要です。

ヘッダーのCSS

以下は、ヘッダーのためのCSSです。グローバルナビゲーション部分は、後で説明します。

【ヘッダーのCSS】

@charset "UTF-8";

body {
  margin: 0;
  background-color: lightblue;
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 'ＭＳ Ｐゴシック', 'Osaka', sans-serif;
}

#container {
  width: 918px;
  margin: 0 auto;
  background-color: white;
}

#header {
  width: 898px;
  margin: 0 auto;
}

#header h1 {
  margin: 0;
}

@charset "UTF-8";は、CSSファイルの文字コードがUTF-8であることを示しています。

それ以外の説明は、以下のとおりです。

【ヘッダーのCSS説明】
セレクタ	プロパティ	説明
body	margin	ボックスの外側の余白をすべて0にしています。これがないと、ヘッダーの上に余白ができることがあります。
	background-color	全体の背景を水色にしています。
	font-family	ブラウザで表示するフォントを指定しています。詳細は、「フォントの変更」をご参照ください。
#container	width	ページ全体の横幅を918pxにしています。ヘッダー画像が898pxのため、左右に余白を10px持たせると918pxになるためです。
	margin	外側の上下の余白を0、左右をautoで真ん中に表示するようにしています。これで、コンテナがブラウザ画面の真ん中に表示されます。
	background-color	コンテナの背景を白にしています。
#header	width	ヘッダーの横幅を898pxにしています。
#header	margin	外側の上下の余白を0、左右をautoで真ん中に表示するようにしています。これで、ヘッダーがコンテナの真ん中に表示されます。
h1	margin	外側の余白をすべて0にしています。h1は、デフォルトで余白があるためです。

marginは、ボックスの外側に余白を作ります。margin: 2px;と記述すると、上下左右すべて2pxの余白ができます。0pxの時は、単位を書かずに0と記述できます。

margin: 2px 4pxと記述すると、上下2px、左右4pxの余白ができます。左右がautoの時は、センタリング(中央に寄せる)します。また、margin: 1px 2px 3px 4pxと記述すると、上→右→下→左の順(時計回り)に余白を指定したことになります。

グローバルナビゲーションのCSS

以下は、グローバルナビゲーションのためのCSSです。

【グローバルナビゲーションのCSS】

#nav ul {
  padding: 0 1px;
  display: flex;
  list-style-type: none;
  text-align: center;
  margin: 4px 0 10px 0;
}

#nav li {
  flex: 1;
  border-style: solid;
  border-color: lightblue;
  font-weight: bold;
  padding: 4px;
}

以下は、それぞれの説明です。

【グローバルナビゲーションのCSS説明】
セレクタ	プロパティ	説明
#nav ul	padding	ボックスの内側の余白を上下0px、左右1pxにしています。
	display	フレックスコンテナにしています。これで、フレックスアイテムが左右に並んで表示されます。
	list-style-type	リストの前に記号がつかないようにしています。
	text-align	文字をセンタリングしています。
	margin-bottom	ボックスの外側の余白を上4px、左右0、下10pxにしています。
#nav li	flex	各フレックスアイテムを等幅にして、コンテナ一杯まで広げます。
	border-style	ボックスに枠線を引くようにしています。
	border-color	枠線の色を水色にしています。
	font-weight	文字を太字にしています。
	padding	ボックスの内側の余白をすべて4pxにしています。

paddingは、ボックスの内側に余白を作ります。文字が枠線から離れることで、見やすくなります。指定の仕方は、marginと同じです。

display:flexは、フレックスボックスを使うためです。ulの子要素のliはフレックスアイテムとなって、デフォルトでは左から右に並んで表示されるようになります。

flex:1は、各li要素が等幅になりますが、文字数によってli要素の幅を自動で変えたい(文字数が多いと幅を広く、文字数が少ないと幅を狭くしたい)場合は、flex:autoにします。

サイトタイトルの画像作成

サイトタイトルの画像の作り方として、1例を示します。

エクセルは、ワードアートが使えます。これで文字を記述した後にコピーして、ペイントソフトなどに貼り付けると、ワードアートの画像を取り込めます。

その後、範囲指定で必要な大きさを切り取り保存します。このようにして作成した画像が、以下です。

今回のデザインでは、898px × 60pxで切り取る必要があります。

写真をヘッダー画像に使う時も、同様にして一部を切り取って使います。

画像の扱いについては、「HTMLに画像を挿入する方法」をご参照ください。

ここまでの作成結果

「HTMLのDOCTYPE宣言とルート要素」と「HTMLのhead作成」、このページのHTMLをコピーして、ファイル名index.htmlで保存します。また、このページのCSSをコピーして、cssフォルダ配下のstyle.cssで保存します。保存する時は、文字コードがUTF-8になっていることを確認してください。

index.htmlをダブルクリックしてブラウザを起動させると、以下のように表示されます。

デザインしたWebページで、ヘッダーまでの作成結果が表示されています。サイト名、ヘッダー画像、グローバルナビゲーションがあります。

ヘッダーに関しては、トップページも記事ページも作りは同じです。ただし、トップページではサイト名がh1要素の部分を、記事ページではp要素に書き直すのを忘れないでください。

また、トップページと記事ページのCSSは異なるので、別々にファイルを作成します。そのため、HTMLのhead内に記述する<link rel="stylesheet" href="css/xxx.css" />で読み込むファイルも、赤字部分はそれぞれ作成したファイル名にする必要があります。

なお、トップページのHTMLファイル名はindex.htmlをお奨めします。通常、サーバーではドメイン名を入力し、ファイル名を入力しなかった場合、デフォルトではindex.htmlファイルを表示します。このため、ファイル名まで入力しなくてもトップページが表示されるようになります。

次のページ「HTMLのmain作成例」