- Macのホームページ作成ガイド >
- 無料ホームページ作成 >
- ホームページのヘッダ部分の作成 - 完全無料でホームページを作る！
ホームページのヘッダ部分の作成 - 完全無料でホームページを作る！
2011/08/06
このページでは、当サイトで配布している無料テンプレートをベースにして、ページのヘッダ部分の作成について解説しています。
基本的なHTMLとCSSで作成していますので、他のサイトで配布しているテンプレートや、独学で作成されたページに対しても応用できると思います。
また、ダウンロードしたテンプレートの圧縮ファイルを解凍してできたフォルダを、以降「テンプレートフォルダ」と呼びます。
ヘッダセクションの範囲
ヘッダセクションは、テンプレートHTMLソースの以下の部分です。<div id="header"> <h1>ページの大見出しを記入します</h1> </div>
ヘッダセクションは<h1>や、ホームページのタイトルロゴ画像などが設置されているのが一般的です。
その他にも当サイトのような感じで、グローバルメニュー（主要なページへのリンクメニュー）が設置されている事もあります。
ここではまず<h1>の設置と、ホームページのタイトルロゴを<img>タグ（イメージタグ）を使って設置するまでを解説します。
<h1>を設置する
<h1>はページの大見出しの部分で、ページの内容を要約したような文章を書きます。
ただ文章といってもそれほど長い文章を入れるのは、見出しとしては不適切かと思います。
一概には言えませんが、長くとも40文字程度で1行に収まるように書きましょう。
タイトルロゴ画像を設置する
ホームページのタイトルロゴ画像をヘッダセクションに設置します。 画像はimagesやimgといったフォルダにまとめておくのが一般的ですので、ご自分でホームページのロゴ画像を作成した場合は、imagesフォルダに保存しましょう。
ここではテンプレートフォルダの中にあるimagesフォルダに入っている、「rogo.png」を使って画像の設置方法を解説します。
画像は<img>タグ（イメージタグ）を使って設置します。 ロゴ画像を設置したヘッドセクションのHTMLソースは以下のようになります。
<div id="header"> <h1>ページの大見出しを記入します</h1> <img src="images/rogo.png" width="420" height="60" alt="サンプルサイト" /> </div>
imgタグのsrc属性に、表示させる画像へのパスを書きます。
画像の幅はwidth属性に、高さはheight属性にそれぞれ、ピクセル数で書きます。
もし画像の大きさが分からない場合は、幅と高さは書かなくても「とりあえず」問題はありません。
最後のalt属性ですが、これは画像の代替テキストです。
音声のブラウザなどの画像が表示されないブラウザを使っているユーザーに、どんな画像がそこに表示されているのかを知らせる為にあります。
alt属性に書かれたテキストは通常のブラウザでは見えないので、この部分に過剰なキーワードを書いてSEO対策をしていた時代もありました。
現在ではこういった行為はスパム行為になってしまう可能性が高いので、あくまでも画像に書かれた内容だけを書いておく方がベターでしょう。
これでとりあえず、シンプルなヘッダ部分ができました。
グローバルメニュー（主要なページへのリンクメニュー）の設置など、バージョンアップは後ほど解説いたします。
