HTMLでヘッダーにロゴとメニューと画像を配置する勉強

HTMLでヘッダーを作る勉強です。

それぞれのサイトのデザインによりHTMLのマークアップの仕方は変わってきますが、勉強として基本的なHTMLの構造を作ってみたいと思います。

HTMLでマークアップしながら記事も書いていたら、ものすごく時間がかかりました。

完全に独学で趣味的に勉強してるのでポンコツな内容があったらすいません。

1. HTMLでヘッダーを作成する基本構造
2. ヘッダーデザインの配置をイメージしておく
3. ヘッダーのロゴはリンクしてから配置する
4. HTMLのnav要素で主要なメニューを作る
5. HTMLでヘッダー画像をマークアップする
6. HTMLでマークアップしたheaderをCSSで確認
7. まとめ

HTMLでヘッダーを作成する基本構造

では始めよう⇐できる人っぽい

前回からHTMLの基礎や練習をしながら、HTMLの基本構造の骨組み作りだけはしておいたので、その続きでヘッダーをマークアップして勉強していこうと思います。

関連 HTMLの基本構造と必要なタグを理解して基礎練習をする

<header>
<div class="test">
<h1>
    <a href="#"><img src=".png" alt=""></a>
</h1>
<nav>
    <ul>
        <li><a href="#">htmlとは</a></li>
        <li><a href="#">html基礎</a></li>
        <li><a href="#">htmlタグ</a></li>
        <li><a href="#">html活用</a></li>
    </ul>
</nav>
</div>
        <img src=".png">
</header>

今回の勉強はヘッダー作成なので、サイトのヘッダーになる部分をbodyの中にマークアップしていきます。bodyの中でヘッダーにするためにheader要素を使います。

それぞれのマークアップの仕方によってheader要素の中は違いますが、header要素の中にはロゴとメニューと画像をHTML5で作成してみます。

ヘッダーデザインの配置をイメージしておく

はじめにヘッダーの仕上がりイメージを考えます。

イメージパターン１

ヘッダーにロゴ画像とメニューを縦並びにセンター配置。

ヘッダー画像はロゴとメニューの下に配置。

イメージパターン２

ロゴとメニューは横並び配置

ヘッダー画像はロゴとメニューの下に配置

なんかイメージしずらいので簡単にイメージ画像作ってみました。

横並び画像だけですが、HTMLを書くイメージは上記の画像です。

あとはCSSでヘッダー画像を背景画像にしてロゴとメニューをヘッダー画像の上に乗せる勉強も余裕があったら。

イメージした画像を作ったはいいけど、2パターンのHTMLでマークアップする場所は同じだということに後から気づく…

まぁ、勉強として、いざマークアップ。

ヘッダーのロゴはリンクしてから配置する

まずはロゴ画像をサイト名にするので、勉強用サイトとしてロゴ画像を作成してimageフォルダにポイっ。

とりあえず勉強用サイト名は「HTML」とシンプルに。

imageフォルダに入れたロゴ画像をマークアップのときに「/image/画像名.png」とかになるので、めんどくさくないファイル名にしておく。

ヘッダーのロゴはサイトのタイトルにして、サイトのトップページに遷移できるようにHTMLでマークアップします。

<h1><a href="#"><img src="images/.png" alt="サイトタイトル"></a></h1>

このときロゴにはaタグhref属性でサイトのホームをリンクします。これがHTMLのハイパーリンク機能になる。

ロゴにh１タグを使うことについては、そのサイトでユーザビリティとSEOを天秤にかけてどちらに比重をかけるかでもロゴにしないタイトルするとか、ロゴにしてタイトルとか使い方が変わるかと思います。

私自身もそうですが、ウェブサイトやブログを見るときに、そのウェブサイトのホームに進みたいときには、ヘッダーのロゴが一番早く見つけやすいです。

ロゴ画像をクリックすればホーム(トップページ)に遷移しやすいということや、ユーザーが読みやすくなるウェブサイトをHTMLのマークアップで心がけるように意識したい。

HTMLでロゴのマークアップは、これで完了。

ブラウザでロゴが表示できてるか確認してみると表示されてるので、まずはオッケー。

HTMLのnav要素で主要なメニューを作る

続いてヘッダーのメニューですが、グローバルナビにします。

ヘッダーのグローバルナビにはHTMLのnavタグを書いてnav要素を作ります。

navタグはサイトの主要なナビゲーションで使うHTMLタグです。

そしてnav要素の中にはHTMLのリストタグのul、liタグを使ってメニューを作ります。

関連【HTML】ul ol liの使い方を覚えてリストを作れるようにする

<nav>
    <ul>
        <li><a href="#">htmlとは</a></li>
        <li><a href="#">html基礎</a></li>
        <li><a href="#">htmlタグ</a></li>
        <li><a href="#">html活用</a></li>
    </ul>
</nav>

nav要素の中のリストタグのliのそれぞれがヘッダーでメニューの中で遷移先になるので、liタグごとにaタグで遷移先にリンクしておきます。

<a href=”パス”>表示するメニュー名</a>

ロゴにサイトのホームをリンクさせたのと同じマークアップのやり方です。

これでヘッダーのメニューのHTMLマークアップは完了。

恒例のブラウザで表示を確認。