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

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

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

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

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

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

見出し要素はh1から順番にマークアップします。HTMLを書く中でどの文言を見出しとすればよいか悩む場合は、そのページの目次を想定して見出しをマークアップするとわかりやすいです。

このハンズオンではh3までの見出しを使用していますが、以下のような見出し構造になっています。

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

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

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

なお、サイト名にh1をマークアップすることは、ページ数の多いサイトにおいては考える余地がありますが（別のハンズオンで機会があれば、その際に補足します）、今回は1ページだけなので、気にせずtitle要素にも書いたサイト名をh1としてマークアップします。

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

My Profileと書かれた見出しのブラウザ表示

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

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

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

figure要素は以下の条件を満たすものにマークアップするHTMLタグです。

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

今回制作するページでは、h1でマークアップした文書の流れで参照される画像（プロフィール画像）であり、HTML文書の末尾に「プロフィール画像」として移動しても問題ないものなので、figureでマークアップしています。

たとえばこれが本文テキストを画像にしたものの場合は、別の場所に移動すると本文の意味がわからなくなってしまうため、figureでマークアップすることはできません。この場合は、主にp要素を利用します（本文テキストの画像かはあまりおすすめしませんが…）

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

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

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

画像表示について

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

<img src="./images/icon.png" alt="プロフィールのアイコン" width="80" height="80">
  • src：画像のパスを指定します
  • alt：画像の説明文（文言）を指定します
  • width：画像の横幅を数値で指定します（単位はpx）
  • height：画像の縦幅を数値で指定します（単位はpx）

さきのチャプターでhead要素内でリソースファイルのパスを指定したときと同様、src属性で指定するパスは相対パス・絶対パス・ルートパスいずれでの指定も可能です。PC上で作業する場合は、相対パスでの指定をおすすめします。

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

alt属性には画像の説明文を指定します。画像のパス切れ時や音声読み上げ時に代替テキストとして表示・読み上げされるので、基本的には指定しておく方がよいです（アクセシビリティの観点から適した説明文というのもありますが、ここでは説明を割愛します）

width属性とheight属性は、基本的には画像の原寸を指定するでOKです。表示サイズが決まっている場合は、その表示サイズの指定で構いません。このハンズオンでは、後者で指定しています。

画像サイズを指定することにより、画像の読み込み前でも表示領域が確保され「レイアウトシフト（CLS）」を防ぐことができるので、とくに装飾じゃない本文中における画像についてはサイズを指定しておくとよいです。

「レイアウトシフト（CLS）」とはとくにスマホでWebページを閲覧する際に起こりがちな現象です（ページスクロール中に急に本文と本文の間に広告など画像が表示されたりして、画面がガクンと移動するように感じるあの現象です）

Webページにアクセスした時点ではまだ画像やその他リソースが読み込まれていないため、画像の横幅やとくに縦幅が指定されていない場合に本来画像が表示される領域が確保されず、画像の表示がされるタイミングで画像の幅分の領域が一気に確保されます。その結果、見てる画面が下にずれてしまったり、誤タップをしてしまう原因になります。

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

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

画像を追加したブラウザ表示

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

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

<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要素は改行要素のタグです。なお、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)のドキュメントもご覧ください。

results matching ""

    No results matching ""