HTMLでヘッダーを作る勉強です。
それぞれのサイトのデザインによりHTMLのマークアップの仕方は変わってきますが、勉強として基本的なHTMLの構造を作ってみたいと思います。
HTMLでマークアップしながら記事も書いていたら、ものすごく時間がかかりました。
完全に独学で趣味的に勉強してるのでポンコツな内容があったらすいません。
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でマークアップする場所は同じだということに後から気づく…
まぁ、勉強として、いざマークアップ。
ヘッダーのロゴはリンクしてから配置する
まずはロゴ画像をサイト名にするので勉強用サイトとしてロゴ画像を作成。ロゴはとりあえず勉強用サイト名として「HTML」とシンプルに。
ヘッダーのロゴ作成をまだしてない場合はロゴ作成してみた記事を参考に使ってください。
作成したロゴ画像はimageフォルダに入れます。imageフォルダに入れたロゴ画像はマークアップのときに「/image/画像名.png」とかになるので、めんどくさくないファイル名にしておく。
ヘッダーのロゴはサイトのタイトルにして、サイトのトップページに遷移できるようにHTMLでマークアップします。
<h1><a href="#"><img src="images/.png" alt="サイトタイトル"></a></h1>
このときロゴにはaタグhref属性でサイトのホームをリンクします。これがHTMLのハイパーリンク機能になる。
ロゴにh１タグを使うとSEOの不利なのでは？のようなことを読んだことがありますが、きちんとHTMLでh1タグの記述がしてあればロゴだとしても、クローラーはh1タグを認識できるのでSEOに影響はないと思っています。
私自身もそうですが、ウェブサイトやブログを見るときに、そのウェブサイトのホームに進みたいときには、ヘッダーのロゴが一番早く見つけやすいです。
ロゴ画像をクリックすればホーム(トップページ)に遷移しやすいということや、ユーザーが読みやすくなるウェブサイトをHTMLのマークアップで心がけるように意識したい。
HTMLでロゴのマークアップは、これで完了。
ブラウザでロゴが表示できてるか確認してみると表示されてるので、まずはオッケー。
HTMLのnav要素で主要なメニューを作る
続いてヘッダーのメニューですが、グローバルナビにします。
ヘッダーのグローバルナビにはHTMLのnavタグを書いてnav要素を作ります。
navタグはサイトの主要なナビゲーションで使うHTMLタグです。
そしてnav要素の中にはHTMLのリストタグのul、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マークアップは完了。
恒例のブラウザで表示を確認。
うむ表示できてる。
ヘッダーのメニューはウェブサイトの道案内的なサイトの主要なメニューです。
このページをアピールしておきたいってページをリンクして目立たせる。のような使い方が多いのではと思います。
なのでヘッダーにnav要素でメニューを置いた場合に、サイトの中で主要ではないメニューがあったら。例えばヘッダーメニューの他にサイドに使うメニューとかはnavタグを使うことがないはずです。
HTMLでヘッダー画像をマークアップする
ヘッダーにヘッダー画像を表示させるためにHTMLでマークアップします。
ヘッダーに画像を入れるHTMLタグはimgタグにalt属性をつけて使います。
<img src=”画像パス” alt=”画像の名前”>
ヘッダー画像にするHTMLの書き方はaタグでトップページをリンクしてimgタグで画像を貼るとかがいいかと思います。
<a href=”index.html”><img src=”画像パス” alt=”画像の名前”></a>
そして画像が表示できなかった場合を考えてalt属性で画像の説明を書いておくなどの書き方があります。
header要素の中にヘッダー画像を作るわけですが、それぞれのサイトでヘッダー画像をメニューやロゴ、他のコンテンツとどのように組み合わせて配置するかでHTMLのマークアップする配置も変わるかと思います。
個人的にはロゴとナビ要素の下にヘッダー画像をimgタグで画像にしてあげれば、あとでCSSを書くときにロゴとメニューをゴニョゴニョといじりやすいのかもと思いました。
もしくはHTMLでマークアップしたロゴとメニューをヘッダー画像に乗せて表示したい場合もあるかと思います。
その場合はHTMLではなくCSSで背景画像にすると良いです。
HTMLでマークアップしたheaderをCSSで確認
HTMLでマークアップしただけだと表示のイメージがしづらいのでHTMLでマークアップしたロゴとメニューとヘッダー画像に対してCSSを少し使って調整だけしてみました。
HTMLの要素は見やすいようにしたいので色分けしたままです。
ロゴとメニューを縦並びにしてセンター配置、その下にヘッダー画像です。
次はロゴとメニューを横並びにして、その下にヘッダー画像です。
ラストはヘッダーの背景画像の上にロゴとメニューを乗せて横並びです。
今回の勉強のHTMLでマークアップしたロゴとメニューの横並びのときはヘッダー画像の上にロゴとメニューを乗せてるので、CSSでヘッダー画像を表示させます。
header {background-image: url(画像パス.jpg);
このときにcssのプロパティでbackground-sizeやbackground-positionも使ってheader画像の位置ズレを調整しながら配置します。
ヘッダーをHTMLでマークアップの勉強はメディアクエリでブレイクポイントを決めてスマホの縦並びも問題ないようでした。
HTMLでヘッダーにロゴとメニューをマークアップした要素をCSSで横並びにする場合の記事も書いているので、よければ読んでみてください。
まとめ
HTMLのヘッダーにロゴとメニューと画像をマークアップする勉強をしてみて思ったことがあります。
ただHTMLを書けばいいって訳ではなくてCSSでHTMLの要素にデザインをしていく時のことも考えることが大切なんだと学べました。
今回はHTMLでヘッダーをロゴとメニューと画像を配置させる勉強だったので後ほどＣＳＳの勉強もしたときに、もっとHTMLの書き方の重要性が実感できるだろうなと思いますが今日はこの辺で。
