2-1. header要素のマークアップ

このチャプターでは、header要素のマークアップなどについて解説しています。このチャプター以降マークアップするHTMLは、すべて適宜ブラウザの画面に反映されていきます。

ページのタイトル見出しをつける

まずはタイトル見出しを入れます。header要素の中に、タイトル見出しとしてh1要素を記述します。

<header class="header">
  <h1>My Profile</h1>
</header>

h要素（見出し要素）

h要素は見出し要素として、h1〜h6まで用意されています。ページタイトルや記事タイトルなど、「HTML文書構造において見出しとなる文言」に対して、h要素でマークアップします。

見出し要素はh1から順番にマークアップしていきます。h1は、「ページのメインとなるタイトル」にマークアップします。サイトのトップページであれば「サイト名」がh1に相当しますが、それ以外のページではそのページの「メインコンテンツのタイトル」がh1に相当します。この場合、サイト名はh要素ではなく、div要素やp要素でマークアップされることが多いです。

どの文言を見出しとすればよいか悩む場合は、そのページの目次を想定して見出しをマークアップするとわかりやすいです。このハンズオンではh3までの見出しを使用していますが、以下のような見出し構造になっています。

• My Profile（h1）
  • Link（h2）
    • サイト名（h3）
    • サイト名（h3）
    • サイト名（h3）

1つのHTML文書内で、h2〜h6の同じレベルの見出し要素が重複しても問題ありません。h1はそのHTML文書のタイトルとなる見出しになるので、同一ページ内では重複させず一度だけの指定にとどめます。

また、HTML文書全体として見出しのレベルは飛ばさず、h1から順番に使用します（文書内にh3とh5のマークアップは存在するけど、h4のマークアップが存在しないというのはだめ）

表示確認

この状態で保存したindex.htmlをブラウザで開くと、以下の表示がされます。筆者の環境はMac＋Safariなので、OSやブラウザによってはフォントの見た目など若干違いがあるかと思いますが、サイト名が表示されていればOKです。

プロフィール画像を表示する

つづいてタイトル見出しの下にプロフィール画像を掲載します。ご自身で画像を用意する場合は、ここでは正方形サイズのものをご用意ください。

<header class="header">
  <h1>My Profile</h1>
  <figure class="prof_icon"><img src="./images/icon.png" alt="プロフィールのアイコン" width="80" height="80"></figure>
</header>

プロフィール画像を表示するfigure要素にclass属性をつけています。例では値をprof_iconとしていますが、ハイフンつなぎ（prof-icon）でもキャメルケース（profIconなど）でも構いません。この辺りはその人それぞれの好みです。

figure要素（本文の補足となる図表などを指定する要素）

figure要素は、以下の条件を満たすものに対してマークアップします。

• 画像やイラスト、図表など、文書の本文の流れから参照されるもの
• 本文に影響を与えず、文書の別の場所（文書末尾や付録的なページなど）に移動可能である

本ハンズオンで表示する画像は、h1要素でマークアップした文書の流れで参照される画像（プロフィール画像）であり、HTML文書の末尾に「プロフィール画像」として移動しても問題ないものなので、figure要素でマークアップしています。

たとえば、本文テキストを画像にしたものの場合は、別の場所に移動すると本文の意味がわからなくなってしまうので、figure要素でマークアップすることはできません。この場合は、主にp要素を利用します（一例であり、本文テキストを画像にして配置することは、アクセシビリティの観点などからも本来推奨されません）

なお今回は使用しませんが、figure要素内ではキャプション表示を行うためのfigcaptionという要素を利用できます。

<figure>
  <img src="画像パス" alt="画像の説明" width="100" height="100">
  <figcaption>画像のキャプション</figcaption>
</figure>

img要素（画像要素）

画像の表示には、img要素を使用します。

<img src="./images/icon.png" alt="プロフィールのアイコン" width="80" height="80">

img要素には、画像のパスやサイズなどの属性値を指定します。ここでは以下の属性値を指定しています。

• src：画像のパスを指定
• alt：画像の説明文（文言）を指定
• width：画像の横幅を数値で指定（単位はpx）
• height：画像の縦幅を数値で指定（単位はpx）

src属性

src属性で指定する画像パスについては、「1. HTML文書の基本構造をつくる」内で解説した内容をご参照ください。相対パスでの指定をおすすめします。

上記の例ではindex.htmlと同階層にある/imagesディレクトリ内のicon.pngを指定しています。

alt属性

alt属性には、画像の説明文を指定します。この属性に指定された値は、画像のパス切れなどで表示されない場合に大体テキストとして表示されたり、またスクリーンリーダー使用時にはこの値が読み上げられます。本文中で参照されるなど、意味のある画像については、必ずalt属性を指定します。

width属性 / height属性

width属性とheight属性では、画像の横と縦のサイズを指定します。数値のみを指定した場合は、自動的に単位がpxとなります。値には画像の原寸サイズの値を指定しますが、表示サイズが決まっている場合は、その表示サイズの指定で構いません。このハンズオンでは、後者で指定しています。

画像サイズを指定することにより、画像が読み込み前でも表示領域が確保され「レイアウトシフト（CLS）」を防ぐことができます。このため、HTML文書内に記述する画像については、width属性とheight属性でサイズを指定することを推奨します。

レイアウトシフト（CLS）について

「レイアウトシフト（CLS）」とは、とくにスマホでWebページを閲覧する際に起こりがちな現象です。ページスクロール中に急に本文と本文の間に広告など画像が表示されたりして、現在見ているコンテンツが画面から消える（画面外に移動する）あの現象を指します。

はじめて訪れるウェブサイトやWebページでは、アクセスした時点ではまだ画像やその他リソースが読み込まれていません（2回目以降のアクセス時では、初回アクセス時に読み込まれたリソース情報をブラウザが記憶しているため、表示が速くなります。これがブラウザの「キャッシュ」機能です）

HTML文書において画像（img要素）にサイズ（width属性とheight属性）が指定されていない場合に、本来画像が表示される領域が事前に確保できず、画像が表示されるタイミングで画像のサイズ幅分の領域が一気に確保されます。その結果、現在見ているコンテンツが下にずれてしまい、今まさにタップしようとした領域に広告など別のコンテンツが表示され、誤ってクリックやタップをしてしまう原因となります。

なお、スマホなどブラウザの（とくに横の）画面幅が指定した画像サイズより小さい場合でも、スタイルシートを適切に書くことにより画面サイズにきちんと収まるようになるので、心配はいりません。

解説は後のチャプターで行いますが、以下のように記述します。

img {
  max-width: 100%;
  height: auto;
}

（補足）loading属性

ここでは指定していませんが、img要素にはloading属性を指定できます。これはブラウザの画像読み込み方法を指定する物で、画像が複数存在するページにおいて指定されることが多い属性です。以下の値を指定できます。

• eager：画像がブラウザの表示領域（表示画面）に達しているかどうかにかかわらず、ページアクセス時に画像を読み込む（初期値）
• lazy：画像がブラウザの表示領域（表示画面）に達してから画像を読み込む
  • ブラウザの設定でJavaScriptが有効化されている必要がある

loading="lazy"を指定するとページアクセス時には表示領域以外の画像読み込みが遅延されるため、とくにスマホでのページ閲覧時にファーストビューの表示速度が向上するというメリットがあります。反面、表示領域外の画像は画面がスクロールされブラウザの表示領域に達してから読み込まれるため、実際その画面までスクロールした時点ではまだ画像が表示されていないということもあります。

なお、loading="lazy"を指定したimg要素にwidth属性とheight属性が指定されていない場合、事前に画像表示領域が確保されず、読み込み時に先述のレイアウトシフトが起きてしまいます。loading="lazy"を指定する際は、かならずwidth属性とheight属性も指定するようにしてください。

表示確認

ここまでの状態で保存したindex.htmlをブラウザで開くと、以下の表示がされます。画像サイズは指定したサイズで表示されています。実際の完成ページでは画像が丸くなっていますが、この丸みはスタイルシートの記述で行うので、ここでは四角の画像のままで問題ありません。

プロフィール説明文を追加する

最後にプロフィールの説明文を追加します。

<header class="header">
  <h1>My Profile</h1>
  <figure class="prof_icon"><img src="./images/icon.png" alt="プロフィールのアイコン" width="80" height="80"></figure>
  <p>
    プロフィール・リンク一覧のサンプルページです。<br>
    ここにプロフィール紹介文を入れてください。
  </p>
  <p>
    ハンズオン記事は<a href="/ho_ref/handson-bio">こちら</a>です。
  </p>
</header>

p要素 / br要素（段落要素 / 改行要素）

p要素は主にテキストをマークアップするための要素で、段落要素といいます。br要素は改行要素を表します。br要素は閉じ要素（閉じタグ）が不要です。

今回は見出し（h1要素）の補足的な説明としたためheader要素内に収めていますが、プロフィールとしてしっかりと長めの文章を入れるのであれば、main要素に入れてもよいかと思います。

なお、a要素は次のチャプターで解説します。

表示確認

この状態で保存したindex.htmlをブラウザで開くと、以下の表示がされます。段落改行のp要素は、下に1行分空白が空いています。

ここまでに記述したコード

ここまで記述したHTML文書の中身です。

<!DOCTYPE html>

<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="format-detection" content="telephone=no">
  <meta name="robots" content="noindex,nofollow,noarchive">
  <title>My Profile</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>

<div class="wrapper">

  <header class="header">
    <h1>My Profile</h1>
    <figure class="prof_icon"><img src="./images/icon.png" alt="プロフィールのアイコン" width="80" height="80"></figure>
    <p>
      プロフィール・リンク一覧のサンプルページです。<br>
      ここにプロフィール紹介文を入れてください。
    </p>
    <p>
      ハンズオン記事は<a href="/ho_ref/handson-bio">こちら</a>です。
    </p>
  </header>

  <main class="main">
    <!-- mainの中身 -->
  </main>

  <footer class="footer">
    <!-- footerの中身 -->
  </footer>

</div>

</body>
</html>

index.htmlをブラウザで開くとHTML文書が表示されるので、すこしサイトを作っている感じが出てきたのではないでしょうか。次はmain要素のHTMLをマークアップしていきます。

参考情報など

このチャプターで解説した各HTML要素について、詳細の仕様を知りたい場合は、以下MDN (MDN Web Docs)のドキュメントもご覧ください。

• <h1>–<h6>: HTML の見出し要素 - HTML | MDN
• <figure>: キャプションが付けられる図要素 - HTML | MDN
• <img>: 画像埋め込み要素 - HTML | MDN
• <p>: 段落要素 - HTML | MDN
• <br>: 改行要素 - HTML | MDN