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

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

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

コンテンツのタイトル見出しを入れます。h1要素は先のチャプターでページのタイトルとして使用したので、その次の見出しレベルであるh2を記述します。

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

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

h要素は先のチャプターで解説しているので、ここでは説明を割愛します。

このハンズオンでマークアップしているHTML文書では見出しタグにclass属性は付与していませんが、付与してもOKです。筆者はなるべくシンプルなHTML構造で書くことが好きなのでclass属性も最低限しか付与しませんが、このあたりも個々人の好みです。

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

Link書かれた見出しが追加されたブラウザ表示

リンク一覧を作成する

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

マークアップにおけるリスト要素について

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

リストのマークは、CSSによりマークをなくすまたリストのスタイルを変更することが可能です。また、li要素内はテキストのみに限らず、HTMLタグを入れることが可能です。

このハンズオンでは、各リンク項目を順序なしリスト（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>

li要素の中に、以下の要素を入れています。

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

リンク先を指定する

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

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

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

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

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

href属性は値にサイト内の各コンテンツや外部サイトのURL、#つきの同一ページ内のアンカーリンク、PDFやzip形式のファイルなどを指定できます。

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

target属性はリンクをクリックした際のブラウザなど遷移の挙動を指定します。_newは正式な仕様ではありませんが、たいていのブラウザではサポートされています。すべてのブラウザにまだタブ機能が実装されていなかった時代に、_blankは別ウインドウを、_newはタブ機能を有しているブラウザでは別タブで開くという使い分けがあったのですが、現在はおおむねのブラウザで同じ挙動として扱われます。

なお、ここでは詳細を省きますが、target="_blank"（_newも同様）の指定には脆弱性が存在し、対策としてrel="noopener"を指定する必要があります。現在のブラウザでは、target="_blank"を指定すると自動的にrel="noopener"も付与される仕組みになっています。_newを指定する場合もおそらく付与されますが、_newは正式な仕様ではないので、rel="noopener"を付与しておいたほうが無難です。

rel属性はリンク先URLとの関係性を指定します。ナビゲーションリンクで前のページへのリンクにrel="prev"、次のページへのリンクにrel="next"と付与するといった具合です。

リンク先のサイトでアクセス解析などによるリファラー情報の収集を拒否するnoreferrerも、rel属性の値として指定します。

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

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

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

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

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

なお、通常であれば<h3><a href="">サイト名など</a></h3>とするものですが、今回はリスト内容そのものをa要素で囲っているため、テキストに対してa要素によるマークアップは行いません。

説明文を指定する

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

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

説明文はp要素でマークアップしました。<div>説明文が入ります</div>としてもよいのですが、文章テキストは基本的にp要素（段落要素）でマークアップすると覚えるとよいです。上記の例では文言が短いですが、2行以上にわたる長いものでも、あとでCSSで調整するので問題ありません。

この状態で保存したindex.htmlをブラウザで開くと、以下のように表示がされます。各リスト項目をa要素で囲っているので、リンクとして表示されています。

リンクリスト（アイコンなし）のブラウザ表示

ワンポイントアイコンを追加する

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

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

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

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

Phosphor Iconsのスクリーンショット

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

ついでにi要素にtitle属性を付与しました。title属性はa要素などにも付与できる属性で、マウスオーバー時に指定したテキストをツールチップ的に表示します。なお、title属性は必須ではないので、付与せずとも問題ありません（付与していれば、音声読み上げ時に値を読み上げてくれます）

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

つづいて、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"を付与しています。これを付与すると、音声読み上げ時にその要素は読み上げをスキップされます。音声読み上げに限らずデバイスなどが有するアクセシビリティ機能から除外とする設定なので、なんにでも指定することはおすすめしませんが、今回のアイコンはワンポイントで使用しているだけなので、この属性を付与しておきます。

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タグとしてよく利用されますが、とくにアイコンの表示に特化しているということではありません。

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

<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)のドキュメントもご覧ください。

results matching ""

    No results matching ""