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

このチャプターでは、main要素のマークアップなどについて解説しています。

コンテンツのタイトル見出しをつける

コンテンツのタイトル見出しを入れます。h1要素はページのタイトルとしてすでに使用しているので、その次の見出しレベルであるh2で指定します。

main要素でマークアップするのは管理しているサイトやSNSなどのリンク一覧なので、見出し文言は「Link」としています。

<main class="main">
  <h2>Link</h2>
</main>

このハンズオンでマークアップしているHTML文書では見出しタグにclass属性は指定していませんが、付与しても構いません。今回制作するページは見出しのデザインも種類がないのでclass属性を指定しなくても問題ありませんが、同じレベルの見出し要素でページごとにデザインが違う場合などはclass属性を指定してスタイルシートを書く方が読みやすく書きやすいかと思います。

表示確認

この状態で保存したindex.htmlをブラウザで開くと、以下の表示がされます。h1の見出しに比べると、h2の見出しはすこし小さめに表示されます。

リンク一覧を作成する

いよいよメインとなるリンク一覧を作成します。リンク一覧をマークアップするHTMLの書き方はいくつかありますが、ここではリスト要素を使用してマークアップしていきます。

ul要素 / ol要素 / li要素（リスト要素）

HTML文書において、リスト表記に使用するHTML要素はulとolの2種類があり、それぞれ「順序なしリスト要素」「順序付きリスト要素」といいます。それぞれのリストの項目は、「リストアイテム要素」であるli要素でマークアップします。

<!-- 順序なしリスト -->
<ul>
  <li>順序なしリスト1</li>
  <li>順序なしリスト2</li>
  <li>順序なしリスト3</li>
</ul>

<!-- 順序付きリスト -->
<ol>
  <li>順序付きリスト1</li>
  <li>順序付きリスト2</li>
  <li>順序付きリスト3</li>
</ol>

上記のマークアップは、それぞれ以下のように表示されます。

• 順序なしリスト1
• 順序なしリスト2
• 順序なしリスト3

1. 順序付きリスト1
2. 順序付きリスト2
3. 順序付きリスト3

リストのマークはデフォルトではリストの種類により黒丸または数字が先頭に入りますが、スタイルシートによりマークをなくすまたリストのスタイルを変更することが可能です。また、li要素内はテキストのみに限らず、HTMLタグを入れることが可能です。

なお、リスト要素を入れ子にする場合は、以下のようにli要素の中でさらにリスト要素を展開します。

<!-- 順序なしリスト -->
<ul>
  <li>順序なしリスト1</li>
  <li>
    順序なしリスト2
    <ul>
      <li>順序なしリスト2-1</li>
      <li>順序なしリスト2-2</li>
      <li>順序なしリスト2-3</li>
    </ul>
  </li>
  <li>順序なしリスト3</li>
</ul>

リンクリストをマークアップする

リンクリストをとりあえずひとつだけマークアップします。このハンズオンで行うマークアップでいちばんボリュームのある内容です。

<main class="main">
  <h2>Link</h2>
  <ul>
    <li><a href="">
      <h3><i class="ph-fill ph-house" aria-hidden="true"></i>サイト名など</h3>
      <p>説明文が入ります</p>
      <i class="ph-fill ph-arrow-circle-right" title="サイトへ移動する"></i>
    </a></li>
  </ul>
</main>

本ハンズオンでは、各リンク項目を「順序なしリスト（ul要素）」を利用してマークアップしています。li要素の中には、以下の要素を入れています。

• リンク先URL（a要素）
• サイト・サービス名などリンク先テキスト（h3要素）
• 説明文（p要素）
• ワンポイントアイコン（i要素）

a要素（アンカー要素 / リンク指定要素）

a要素は「アンカー要素」というもので、サイト内の各コンテンツや外部サイトに遷移するためのリンク指定に利用するHTML要素です。通常テキストのほか、画像や上記のようにHTMLを含むテキスト一式を囲むことが可能です。

今回はリスト内容全体をa要素で囲っています。

<a href="" target="_new" rel="noopener noreferrer">リンクテキスト</a>

<!-- 今回制作するHTML文書での例 -->
<li><a href="">
  <!-- ここに内容が入る -->
</a></li>

指定できる属性値のうち、とくに利用する頻度が多いのは以下の属性値です。

• href：リンク先を指定します
• target：遷移する際の挙動を指定します
  • _self：同一タブ（同一ウインドウ）内で開く（初期値）
  • _blank：別タブ（あるいは別ウインドウ）で開く
  • _new：別タブ（あるいは別ウインドウ）で開く
    • 正式な仕様ではない
• rel：リンク先URLとの関係性を指定します

href属性

href属性は値に「クリックして遷移（あるいはダウンロード）するページやファイルの情報」などを指定します。具体的には以下のような内容です。

• サイト内の各コンテンツや外部サイトのURL
• #つきのアンカーリンク（同一ページまたは別ページも可）
• PDFやzip形式のファイル　など

サイト内コンテンツのリンクの場合は、リンク先を相対パス・絶対パス・ルートパスのいずれかで指定できます。なおリンク先を相対パスで指定した場合にindex.htmlを省略すると、リンクをクリックした際にローカルPC上では当該ページが含まれるフォルダが開きます。

#つきのアンカーリンクは、指定したページ内のHTML文書内でid属性が付与された同一値の要素に遷移します。

<!-- これらリンクは -->
<a href="#anchor_a">メニューA</a>
<a href="./page.html#anchor_b">メニューB</a>
<a href="https://example.com/page2.html#anchor_c">メニューC</a>

<!-- それぞれ以下に遷移する -->
<h2 id="anchor_a">メニューA</h2> <!-- 同一ページ内 -->
<div id="anchor_b">メニューB</div> <!-- 遷移したpage.html内 -->
<p id="anchor_c">メニューC</p> <!-- 遷移したhttps://example.com/page2.htmlページ内 -->

target属性

target属性はリンクをクリックした際のブラウザなど遷移の挙動を指定します。現在では別窓（別タブ）でリンクを開く際に_blankの指定で使用されます。

• _self：同一タブ（同一ウインドウ）内で開く（初期値）
• _blank：別タブ（あるいは別ウインドウ）で開く
• _new：別タブ（あるいは別ウインドウ）で開く
  • 正式な仕様ではない

_newは正式な仕様ではありませんが、たいていのブラウザではサポートされています。すべてのブラウザにまだタブ機能が実装されていなかった時代に、_blankは別ウインドウを、_newはタブ機能を有しているブラウザでは別タブで開くという使い分けで使用されていました。

現在はおおむねのブラウザで同じ挙動として扱われますが、後述する脆弱性の関係で_blankを使用することを推奨します。

_blankの脆弱性について

target="_blank"（_newも同様）が指定されたリンクをクリックすると、ブラウザの機能を介して別窓（別タブ）が開きますが、信頼されていないリンクを開くときに「発信元の文書が改竄される」可能性があります。このため、対策としてtarget="_blank"（あるいは_new）を指定する際には、一緒にrel="noopener"を追加で指定する必要があります。

現在のブラウザでは、target="_blank"を指定すると自動的にrel="noopener"も付与される仕組みになっています。古いブラウザを対象としない限り、_blankの指定時にrel="noopener"の追加指定は不要です。

_newを指定する場合もおそらく同様かと思われますが、_newは正式な仕様ではないので、代わりに_blankを使用する、また_newを使用する場合はrel="noopener"を追加で指定しておく方が無難です。

rel属性

rel属性はリンク先URLとの関係性を指定します。指定できる値として、主に以下のようなものがあります。

• prev：ナビゲーションリンクで前のページへのリンクを表す
• next：ナビゲーションリンクで次のページへのリンクを表す
• noreferrer：遷移先のページでアクセス解析などによるリファラー情報の収集を拒否する
• noopener：ページ遷移する際に、リンク元へのアクセスを新しい閲覧コンテキスト（遷移先）に許可しない
  • リンク元のページの改竄を防ぐ

複数の値を指定する場合は、rel="noopener noreferrer"のように半角スペースを空けて指定します。

サイト名などリンク先テキストを指定する

リンクリストのリンク先テキストを指定します。

<li><a href="">
  <h3>サイト名など</h3>
</a></li>

コンテンツの見出しとしてh2を使用しているので、ここでは次の見出しレベルであるh3を使用します。

リンクリストのリンク先テキストのマークアップは見出し要素でなくても問題ないのですが、「目次」として考えた際にこの部分のテキストを見出しとしてマークアップすることは適切だという判断です。

説明文を指定する

リンクに対する説明文を指定します。

<li><a href="">
  <h3>サイト名など</h3>
  <p>説明文が入ります</p>
</a></li>

説明文はp要素でマークアップしました。上記の例では文言が短いですが、2行以上にわたる長いものでも、あとでCSSで調整するので問題ありません。

表示確認

この状態で保存したindex.htmlをブラウザで開くと、以下のように表示がされます。li要素は掲載するリストの数だけ増やして中身を書き換えています。

各リスト項目をa要素で囲っているので、リスト内のテキストはリンクとして表示されています。

リンクリストにワンポイントアイコンを追加する

このままでもリンクリストとしては十分機能しますが、デザインのアクセントとしてもうひとつ、ワンポイントアイコンを追加することにします。

このハンズオンでは、アイコンにPhosphor Iconsを使用します。導入も手軽で、MITライセンスで公開されているので個人・商用問わず利用可能です。今回はフォント（アイコンフォント）として利用しますが、PNGやSVG形式でファイルをダウンロードして利用することもできます。

まず、リスト項目がリンクでありクリック（タップ）できることがわかるようにするため、矢印のアイコンを追加します。

Phosphor Iconsのサイトのアイコン検索画面で「arrow」と入力し、表示されるアイコンの中から「arrow-circle-right」を選択します。アイコンの種類は「Fill（塗り）」にしています。

アイコンを選択すると表示されるメニューで「Web」のタブをクリックし、表示されたHTMLタグをコピーしてHTML文書の説明文の下にペーストします。

<li><a href="">
  <h3>サイト名など</h3>
  <p>説明文が入ります</p>
  <i class="ph-fill ph-arrow-circle-right" title="サイトへ移動する"></i>
</a></li>

上記のコードでは、i要素にtitle属性を付与しています。title属性はa要素などおおむねのHTML要素に付与できる属性（グローバル属性）で、マウスオーバー時に指定したテキストをツールチップ的に表示します。

title属性は必須ではないですが、付与していれば音声読み上げ時に値を読み上げてくれます。

つづいて、h3内にもアイコンを入れます。同様にアイコン検索画面で「house」と入力し、表示されるアイコンの中から「house」を選択します。アイコンの種類は「Fill（塗り）」にしています。アイコンを選択すると表示されるメニューで「Web」のタブをクリックし、表示されたHTMLタグをコピーしてHTML文書のh3内にペーストします。

<li><a href="">
  <h3><i class="ph-fill ph-house" aria-hidden="true"></i>サイト名など</h3>
  <p>説明文が入ります</p>
  <i class="ph-fill ph-arrow-circle-right" title="サイトへ移動する"></i>
</a></li>

このi要素にはaria-hidden="true"を付与しています。aria-hidden属性はアクセシビリティに関するもので、値をtrueとすると、音声読み上げ時にその要素は読み上げをスキップされます。

aria-hidden属性は、音声読み上げに限らずデバイスなどが有するアクセシビリティ機能から除外とする設定なので、なんにでも指定することは推奨しませんが、ここで指定したアイコンはHTML文書内での意味はないに等しいので、この属性を付与しておきます。

Phosphor IconsはCSSにより表示が制御されているので、head内に指定のCSSファイルを読み込みます。

<head>
  <!--（略）-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css">
</head>

「Fill（塗り）」以外のアイコンを使用している場合は、URLの/fill/の部分をそのスタイルのものに置き換えてください。

i要素（慣用テキスト要素）

i要素は「慣用テキスト要素」といい、何らかの理由で他のテキストと区別されるテキストの範囲を表すために使用します。

i要素はイタリック体（斜体 / font-style: italic;）をデフォルトのスタイルとして割り当てているブラウザが多く、実際に過去のHTMLの仕様ではイタリック体（斜体）のマークアップとして使用されていました。

現在はアイコン（アイコンフォント含む）をマークアップするHTML要素としてよく利用されます。記述がiなので勘違いされることもままありますが、とくにアイコンの表示に特化しているということではありません。

表示確認

さて、他にもリストを追加して、リンクリストとしては以下となりました。

<main class="main">
  <h2>Link</h2>
  <ul>
    <li><a href="">
      <h3><i class="ph-fill ph-house" aria-hidden="true"></i>サイト名など</h3>
      <p>説明文が入ります</p>
      <i class="ph-fill ph-arrow-circle-right" title="サイトへ移動する"></i>
    </a></li>
    <li><a href="">
      <h3><i class="ph-fill ph-x-logo" aria-hidden="true"></i>X(Twitter)</h3>
      <p>説明文が入ります。多少長くなっても大丈夫です。説明文が入ります。多少長くなっても大丈夫です。説明文が入ります。多少長くなっても大丈夫です。</p>
      <i class="ph-fill ph-arrow-circle-right" title="サイトへ移動する"></i>
    </a></li>
    <li><a href="">
      <h3><i class="ph-fill ph-cube" aria-hidden="true"></i>サイト名など</h3>
      <p>説明文が入ります</p>
      <i class="ph-fill ph-arrow-circle-right" title="サイトへ移動する"></i>
    </a></li>
  </ul>
</main>

この状態で保存したindex.htmlをブラウザで開くと、以下のように表示がされます。アイコンが表示されていることが確認できます。

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

ここまで記述した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">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/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">
    <h2>Link</h2>
    <ul>
      <li><a href="">
        <h3><i class="ph-fill ph-house" aria-hidden="true"></i>サイト名など</h3>
        <p>説明文が入ります</p>
        <i class="ph-fill ph-arrow-circle-right" title="サイトへ移動する"></i>
      </a></li>
      <li><a href="">
        <h3><i class="ph-fill ph-x-logo" aria-hidden="true"></i>X(Twitter)</h3>
        <p>説明文が入ります。多少長くなっても大丈夫です。説明文が入ります。多少長くなっても大丈夫です。説明文が入ります。多少長くなっても大丈夫です。</p>
        <i class="ph-fill ph-arrow-circle-right" title="サイトへ移動する"></i>
      </a></li>
      <li><a href="">
        <h3><i class="ph-fill ph-cube" aria-hidden="true"></i>サイト名など</h3>
        <p>説明文が入ります</p>
        <i class="ph-fill ph-arrow-circle-right" title="サイトへ移動する"></i>
      </a></li>
    </ul>
  </main>

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

</div>

</body>
</html>

メインコンテンツのマークアップが終了しました。次は最後のfooter要素のHTMLをマークアップしていきます。

参考情報など

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

• <ul>: 順序なしリスト要素 - HTML | MDN
• <ol>: 順序付きリスト要素 - HTML | MDN
• <li>: リストアイテム要素 - HTML | MDN
• <a>: アンカー要素 - HTML | MDN
• <i>: 慣用テキスト要素 - HTML | MDN
• aria-hidden - ARIA | MDN
• rel="noopener" - HTML | MDN

rel="noopener"については、英語の情報ですが以下サイトに詳細が掲載されています。専門的な内容になりますが、興味があればこちらもご参考ください。

• About rel=noopener