見出し画像

デイトラ Web制作コース 中級編 DAY 10-12 LP制作 2（HTMLのタグと属性）

MIO

ご覧いただき、ありがとうございます！

DAY5から21までLP制作を行いました。
今回は、HTMLのタグや属性にフォーカスを当てて、説明していきます。


アクセシビリティとユーザービリティとは

HTMLのタグと属性の説明をする前に、この2つの概念について簡単に説明します。

アクセシビリティとユーザービリティは、どちらもWebサイト制作において重要な概念で、異なる視点からユーザー体験を向上させるためのものです。
（Webサイトにフォーカスを絞っています）

アクセシビリティとは、全てのユーザーがWebサイトを利用できるようにすることを指します。

具体的には、視覚障害や聴覚障害があるユーザーがコンテンツにアクセスしやすくなるための取り組みのことをいいます。
画像を入れたときに、"alt属性"を追加するのもこの取り組みの1つです。

ユーザービリティは、ユーザーがそのWebサイトを「どれだけ使いやすいと感じるか」、「どれだけ効率的に目的に達成できるか」を指します。

例えば、「フォームの入力がわかりやすい」、「エラーメッセージが適切に表示される」、「ロード時間が短くストレスを感じない」といった取り組みのことをいいます。

適切なタグを使用することによって、アクセシビリティの向上に繋がり、結果としてユーザービリティの向上にも繋がります。

HTMLのタグと属性について

HTMLについて書くことが少なかったので、今回使用したタグと属性について書きます。

日付や時間で使う"<time>タグ"

ホームページやLPでもよく登場するNEWSのセクション。
「日付や時間」を書くときは、以下のように<time>タグの使用が推奨されます。

<div class="news__lists">

  <!-- 1つ目 -->
  <a href="" class="news__list news-link">
    <div class="news-link__meta">
      <time class="news-link__date" datetime="2022-12-15"
        >2022年12月15日< /time
      >
    ：

<time>タグの中には、"datetime属性"を入れます。
この2つはセットで使うのが一般的です。

  • <time>タグ：日付や時間を表示するためのHTMLタグ

  • datetime属性：<time>タグ内で、日付や時間をコンピューターが読み取れる形式で書く

<time>タグを使用することで、「日付と時間」という情報が明確になり、SEOの向上にも繋がります。

日付や時間を扱うセクションでは、<time>タグと"datetime属性"の使用をおすすめします。

他のコンテンツを埋め込むための"<ifrane>タグ"

続いては、動画やGoogleマップなど他のコンテンツを埋め込むために使う<iframe>タグについて、解説します。
（読み方は、inframe＝インラインフレーム）

今回はYouTube動画を埋め込むために使用しています。

<div class="movie__iframe">
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/〜"
    title="YouTube video player"
    allowfullscreen
  ></iframe>
< /div>

上記のコードは動画を埋め込む場合に一般的に使われる属性です。

  1. widthとheight：埋め込む動画の表示サイズを指定

  2. src：埋め込む動画のURLを指定

  3. title：動画の説明

    1. スクリーンリーダー※使用している人にもコンテンツが何かわかりやすくなります

  4. allowfullscreen：動画をフルスクリーンで再生できるようになる

スクリーンリーダー：
目の不自由な人や視覚に障害のある人が使用するソフトウェア。
画面上に表示されている文字や情報を音声で読み上げてくれるツール

他の追加属性についても知りたい方は、以下のサイトで詳しく説明してくれています。


<time>タグや<iframe>タグを<div>タグで囲う理由

今回ご紹介した<time>タグや<iframe>タグを両方とも、<div>タグで囲みました。

<div>タグで囲むことは一般的で、多くのWebサイト制作において役立ちます。
どんな利点があるのかご紹介します。

１. スタイリング
CSSでのレイアウト調整が簡単になります。
例えば、動画を中央に配置したり、余白を加えたりできます。

２. 要素をグループ化
<div>タグで囲むことによって、似た内容をグループ化できるので、見やすくなります。

３. JavaScriptの実装がしやすくなる
<div>タグにJavaScriptで使用するときの"id"や"class"を設定し、囲んでおくことで、<div>タグの中身に対する操作を行いやすくします。

４. コンテンツに意味を追加
コンテンツの意味を整理して、アクセシビリティを改善。スクリーンリーダーを使用している人が内容を理解しやすいようにします。

どれも重要ですが、私の中で4番目の項目はとても重要だと思っています。
まだデイトラでは出てきていませんが、最近覚えた"WAI-ARIA"という属性について少しお話しします。

WAI-ARIAとは

WAI-ARIA属性とは、視覚や聴覚に障害のある閲覧者にもコンテンツを理解しやすく、使いやすくするための特別な属性です。

<div role="region" aria-labelledby="event-heading">
  <h2 id="event-heading">タイトル</h2>
  <time datetime="2024-07-20">2024年7月20日</time>
</div>

上記の「role="region" aria-labelledby="event-heading"」の部分が"WAI-ARIA属性"にあたります。

まず「role="region"」によって、<div>タグが1つのセクションとして定義され、スクリーンリーダーがその部分を「特別なセクション」と認識します。

「aria-labelledby="event-heading"」の部分は、どの要素がこのセクションのタイトルになっているかを示します。
「id="event-heading"」を持つ、<h2>タグがそのタイトルとなります。

WAI-ARIA属性と<time>タグを使うことによって、全てのユーザーがセクションの意味や内容を理解しやすくなります。

WAI-ARIA属性については、私もまだ勉強中です。
適切に使用すれば、アクセシビリティを向上させてくれますが、無闇に使うと逆効果になることもあります。

以下の記事は、使わないことにも焦点を当てて、解説してくれています。
よかったら参考にしてみてください。


感想

今回は、HTMLのタグや属性に焦点を絞って書きました。

最後にしたWAI-ARIA属性については、今回デイトラで出てきていませんが、実際の現場環境では非常に重要です。

また、私はHTMLのタグや属性をあまり使いこなせていなかったため、今回HTMLについて書くことにしました。

次回のセクションでは共通パーツの作成について学んだので、共通パーツについて書いていきます。

最後までお付き合いいただき、本当にありがとうございました🌸

Xで毎日デイトラの学習記録つけてます！
応援していただけると嬉しいです✨
X : https://twitter.com/totoro_mi8


この記事が気に入ったらサポートをしてみませんか？