2. コンテンツをマークアップする

このチャプターでは、ブラウザに表示するためのコンテンツのマークアップ手法とHTMLタグの意味などについて解説しています。

マークアップ言語とは

HTMLの正式名称は「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」といいます。HTMLはマークアップ言語であり、HTMLを記述することを「マークアップする」といいます。

マークアップ言語とは「文書の構造と体裁を明確に記述するためのデータ記述言語」のことで、「マークアップする」ことは「文書の構造と体裁を明確に記述する」ことにあたります。

難しいことを書いてますが、ざっくりと「ブラウザが正しくページを解釈できるように、用途に見合う正しいHTMLタグを使用してHTMLを書く（マークアップする）」ということです。見出しならh1〜h6、リストならulあるいはolを使用してマークアップします。

適切にマークアップを行うことで、以下のメリットがあります。

音声読み上げ機能などアクセシビリティに配慮することができる
スタイルシート（CSS）が読み込まれない状況でも、文書として内容をわりと正確に把握することが可能

とはいえあまり難しく構えずに、とくにこのハンズオンではだいたいのふわっとした意味づけでマークアップするでOKです。

余談になりますが、マークアップ言語と呼ばれるものはHTMLの他にもいくつかあり、そのうちのひとつにRSSフィードやサイトマップの配信などで利用される「XML（Extensible Markup Language / エクステンシブル・マークアップ・ランゲージ）」があります。

コンテンツ構造の確認

このハンズオンで制作するプロフィールページは、大枠で以下の構造をしています。

最終的な完成形のindex.htmlを見ると構造は至ってシンプルなものなので、この程度であればheader main footerとわける必要もそこまでないのですが、HTMLの構造としてはわけておいたほうが見やすいのでわけています。

それでは、HTMLマークアップをはじめていきます。

コンテンツの大枠となる箱を用意する

ブラウザの画面に表示される内容は、基本的にはすべてbody要素の中に書いていきます。

ヘッダー部分の箱を用意します。ヘッダーは主にサイト名やサイト内コンテンツへのナビゲーションメニューなど、サイト全般にかかるメニューなどが置かれる領域です。

HTML文書においてヘッダーとなる要素header要素というそのままのものが用意されているので、これを使用します。現在のHTMLの仕様において、HTMLタグは改行タグ（br）など一部を除き、必ず「閉じタグ」が必要です（VS Codeなどのエディターでは、HTMLタグを入力すると閉じタグが補完されます）

<header>
  <!-- headerの中身 -->
</header>

main要素

つぎに、メイン部分の箱を用意します。メインはそのページのメインコンテンツ（およびそのナビゲーションメニュー）が置かれる領域です。

HTML文書のメインとなる要素にはmain要素というこれもそのままのものが用意されているので、これを使用します。

<main>
  <!-- mainの中身 -->
</main>

同様に閉じタグが必要です。閉じタグを書くことにより「ここからここまでが<HTML>の要素である」という宣言になります。

最後にフッター部分の箱を用意します。フッターもサイト名や著作権・その他権利に関する表記など、サイト全般にかかる情報が置かれる領域です。「ページ上部に戻る」リンクも、ここに置かれることが多いです。

HTML文書のフッターとなる要素にはfooter要素というこれもそのままのものが用意されているので、これを使用します。

<footer>
  <!-- footerの中身 -->
</footer>

各要素をグループ化する

今回制作するページにおいて、header main footerの各要素はすべて横幅が同じです。後々のチャプターでスタイルシート（CSS）をあてる際、これらの要素ひとつひとつに横幅などを指定していってもいいのですが、同じ記述をすることになり少し手間なので、これらをひとつのグループとしてまとめることにします。

<div>

  <header>
    <!-- headerの中身 -->
  </header>

  <main>
    <!-- mainの中身 -->
  </main>

  <footer>
    <!-- footerの中身 -->
  </footer>

</div>

header main footerの3要素をdiv要素で囲ってグループ化しました。

このdivはheaderなどの要素とは違い、タグ自体に意味はありません。スタイルシートがあたるまでは、他の要素に影響も与えません。種類としては「コンテンツ区分要素」といい、HTMLの構造上で今回のように要素をグループ化するためなどに利用します。

このようにグループ化すると、親子関係となります。この場合は、親がdiv要素で、子がheader main footerの3要素となり、それぞれ親要素・子要素といいます（header main footerは兄弟関係（兄弟要素）になります）

この親要素・子要素の関係は、CSSを記述する際に重要になるので、なんとなく頭の片隅に置いておくとよいです。

また、header main footerそれぞれの要素の中にHTML要素が入ると、それらも親子関係となります。

なお、上記のコード例ではdivで囲われた要素のインデントを下げています。HTMLに限らず、スタイルシートやJavaScript、PHPなどでコードを見やすくするために適切にインデントを入れておくと、とくに長いコードになるとエディター上で閉じタグとの関係性がわかりやすく見やすくなったり、閉じタグ忘れを発見しやすくなったりします。エディターによっては改行時に自動でインデントが入ります。

各HTML要素にclass属性を付与する

コンテンツの大枠となる箱としては以上で完成ですが、もうひと手間、スタイルシートを書くときにあると助かるclass属性を付与することにします。

たとえば以下のようにHTMLでマークアップされた左右が横並びのレイアウト表示があるとします。

<div>
  <div>
    <p>左側の要素</p>
  </div>
  <div>
    <p>右側の要素</p>
  </div>
</div>

これをスタイルシートに書くと、以下のようになります（スタイルシートはのちのチャプターで解説するので、ここでは割愛します）

body > div {
  display: flex;
  align-items: center;
}

div > div {
  margin-right: 1em;
  padding: 1em;
  background-color: #eee;
  width: fit-content;
}

div p {
  margin: 0;
}

そこまでHTMLが複雑ではないのでこれはこれでアリですが、divがどこのdivを指しているのか、一見しただけではすこしわかりづらく感じるかと思います。また、HTML文書そのものからも「どういうレイアウトの構造なのか」が掴みづらいです。

これを以下のようにすると、コードが見やすくなったのではないでしょうか。

<div class="wrapper">
  <div class="box left_area">
    <p>左側の要素</p>
  </div>
  <div class="box right_area">
    <p>右側の要素</p>
  </div>
</div>

.wrapper {
  display: flex;
  align-items: center;
}

.box {
  margin-right: 1em;
  padding: 1em;
  background-color: #eee;
  width: fit-content;
}

.box p {
  margin: 0;
}

このようにHTMLタグにclass属性に適切な値を付与することで、レイアウトのイメージが掴みやすくなったり、スタイルシートも描きやすくなります。

class属性の付与

前置きが長くなりましたが、さきほどマークアップしたHTMLにclass属性を付与していきます。

class属性の値は、以下を除き基本的に自由に設定できます。これらはHTML文書として無効ということではなく、スタイルシートが反映される際に無効になります。

数字はじまり
ハイフン＋数字はじまり

日本語や絵文字も一応可能ですが、一般的には半角英数とハイフンおよびアンダーバーで構成されることがほとんどです。

<div class="wrapper">

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

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

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

</div>

class属性の値は基本的に自由に決めてよいですが、HTMLの構造上わかりやすい命名をした方がよいです。

なお、HTMLタグには同じくスタイルシートをあてることができるid属性も付与することができますが、今回は使用しません。

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

ここまで記述した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">
    <!-- headerの中身 -->
  </header>

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

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

</div>

</body>
</html>

この状態でも、まだindex.htmlをブラウザで開いても画面が真っ白でなにも表示されません。次はheader要素のHTMLをマークアップしていきます。

参考情報など

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

2. コンテンツをマークアップする

2. コンテンツをマークアップする

マークアップ言語とは

コンテンツ構造の確認

コンテンツの大枠となる箱を用意する

header要素

main要素

footer要素

各要素をグループ化する

各HTML要素にclass属性を付与する

class属性の付与

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

参考情報など

results matching ""

No results matching ""