HTMLのheader作成例
Webページには、ページ上部にサイト名や画像を表示する部分があります。
本ページでは、HTMLのheader部分の作成方法について説明します。
headerとは？
HTMLのheader要素は、ページのヘッダーや、記事のヘッダーとして使われます。
ページのヘッダーとは、「デザイン」で示した以下の赤枠部分です。
また、記事のヘッダーとしては、以下のように使われます。
<article>
<header>
<h1>ページのタイトル</h1>
<p>段落<p>
</header>
<h2>第一章</h2>
<p>段落<p>
</article>
articleは、主要な記事を意味します。赤字部分がheaderです。このように、headerは記事の導入部分でも使われます。
次からは、デザインの内容を例に、ページのヘッダーの作り方を説明します。
ヘッダーの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です。グローバルナビゲーション部分は、後で説明します。
@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であることを示しています。
それ以外の説明は、以下のとおりです。
| セレクタ | プロパティ | 説明 |
|---|---|---|
| body | margin | ボックスの外側の余白をすべて0にしています。これがないと、ヘッダーの上に余白ができることがあります。 |
| background-color | 全体の背景を水色にしています。 | |
| font-family | ブラウザで表示するフォントを指定しています。詳細は、「フォントの変更」をご参照ください。 | |
| #container | width | ページ全体の横幅を918pxにしています。ヘッダー画像が898pxのため、左右に余白を10px持たせると918pxになるためです。 |
| margin | 外側の上下の余白を0、左右をautoで真ん中に表示するようにしています。これで、コンテナがブラウザ画面の真ん中に表示されます。 | |
| background-color | コンテナの背景を白にしています。 | |
| #header | width | ヘッダーの横幅を898pxにしています。 |
| 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です。
#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;
}
以下は、それぞれの説明です。
| セレクタ | プロパティ | 説明 |
|---|---|---|
| #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をダブルクリックしてブラウザを起動させると、以下のように表示されます。
ヘッダーに関しては、トップページも記事ページも作りは同じです。ただし、トップページではサイト名がh1要素の部分を、記事ページではp要素に書き直すのを忘れないでください。
また、トップページと記事ページのCSSは異なるので、別々にファイルを作成します。そのため、HTMLのhead内に記述する<link rel="stylesheet" href="css/xxx.css" />で読み込むファイルも、赤字部分はそれぞれ作成したファイル名にする必要があります。
なお、トップページのHTMLファイル名はindex.htmlをお奨めします。通常、サーバーではドメイン名を入力し、ファイル名を入力しなかった場合、デフォルトではindex.htmlファイルを表示します。このため、ファイル名まで入力しなくてもトップページが表示されるようになります。
次のページ「HTMLのmain作成例」