学科 HTML基礎②（ヘッダー・タグ）

  1. 本日の訓練内容
      1. L2.3 文書情報
        1. L2.3.1 title要素（ページタイトル）
        2. L2.3.2 メタデータ（meta）
          1. （1）meta要素（文字コード指定/charset）
          2. （2）meta要素（ページの説明文/description）
          3. （3）meta要素（ページのキーワード/keywords）
          4. （4）meta要素（ページの作者情報/author）
          5. （5）meta要素（ビューポート/viewport）
        3. L2.3.3 link要素（外部CSSファイルの紐づけ）
          1. （2）link要素（ファビコンファイルの紐づけ）
      2. L2.4 文書本文
        1. L2.4.1 （文書本体のタグ分類）
          1. 注意事項
          2. コンテンツ・モデルコンテンツ
      3. L2.5 セクション分類タグ
        1. L2.5.1 セクション分類の構想例
        2. L2.5.2 h1～h6要素（見出し）
        3. L2.5.3 article要素
        4. L2.5.4 section要素（セクション）
        5. L2.5.5 header 要素（ヘッダー）
        6. L2.5.6 footer要素（フッター）
        7. L2.5.7 nav情報（ナビ）
        8. L2.5.8 aside要素（アサイド）
        9. L2.5.9 表示サンプル
      4. L2.6 コンテンツ分類タグ
        1. L2.6.1 p要素（段落（パラグラフ））
        2. L2.6.2 hr要素（区切り）
        3. L2.6.3 ul/li要素（順序のないリスト）
        4. L2.6.4 ol/li要素（順序のあるリスト）
        5. L2.6.5 dl/dt/dd要素（定義・説明リスト）
        6. L２.６.9 表示サンプル（ul/olタグにCSSでスタイルを設定）
        7. L2.6.10 表示サンプル（dlタグにCSSでスタイルを設定）
          1. 用語説明を「:」で区切る
      5. L2.7 テキスト分類タグ
        1. L2.7.1 a要素（ハイパーリンク）
        2. L2.7.2 em要素（強調）
        3. L2.7.3 strong要素（強い重要性）
        4. L2.7.4 small要素（免責・警告・著作権など）
        5. L2.7.4 small要素（声や心の中で思ったこと）
        6. L2.7.3 b要素（キーワードや商品名など）
        7. L2.7.7 span要素（ひとつの範囲）
        8. L2.7.8 br情報（改行）
        9. L.2.7.9 表示サンプル
      6. L2.8 コンテンツ埋め込みタグ
        1. L2.8.1 img要素（画像）
        2. L２.８.2 iframe要素（インラインフレーム）
  2. メモ
  3. -本日のアジェンダ-
  4. 本日のテーマ
  5. HTMLの基本構造について
    1. !DOCTYPE 宣言（ドキュメントタイプ宣言）
    2. html 要素（HTML の文書）
    3. head 要素（文書情報）
    4. body 要素（文書本文）
  6. 文書情報について
    1. title 要素（ページタイトル）
    2. meta 要素（文字コード指定/charset）
    3. meta 要素（ページの説明文/description）
    4. meta 要素（ページのキーワード/keywords）
    5. meta 要素（ページの作者情報/author）
    6. meta 要素（ビューポート/viewport）
    7. link要素（外部 CSS ファイルの紐付け）
    8. link要素（ファビコンファイルの紐付け）
  7. 文書本文について
    1. 参考サイト
    2. ブロックレベル要素とインライン要素について
      1. ブロックレベル要素
      2. インライン要素
      3. 参考サイト
  8. セクション分類タグについて
    1. h1～h6 要素（見出し）
      1. ワンポイントアドバイス
      2. 参考サイト
    2. article 要素（アーティクル）
    3. section 要素（セクション）
    4. header 要素（ヘッダー）
    5. footer 要素（フッター）
    6. nav 要素（ナビ）
    7. aside 要素（アサイド）
    8. 参考サイト
  9. コンテンツ分類タグについて
    1. p 要素（段落（パラグラフ））
      1. ワンポイントアドバイス
    2. hr 要素（区切り）
    3. ul/li 要素（順序のないリスト）
    4. ol/li 要素（順序のあるリスト）
    5. dl/dt/dd 要素（定義・説明リスト）
    6. div 要素（ひとつのかたまりの範囲）
    7. main 要素（メインコンテンツ）
  10. 本日の課題①
  11. 本日の課題②

本日の訓練内容

HTML での記述を始めましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋
...
html-css.hamaya2020.com

L2.3 文書情報

L2.3.1 title要素（ページタイトル）
<title>Webページのタイトル</title>
  • ブラウザのタイトルタブに表示される名称。
L2.3.2 メタデータ（meta）
（1）meta要素（文字コード指定/charset）
<meta charset="指定する文字コード">
<meta charset="UTF-8">
  • HTMLを記述している文字コードを指定する。使用する文字コードがUTF-8の場合は”UTF-8″と指定する。
  • charset = charactor set
（2）meta要素（ページの説明文/description）
<meta name="description" content="指定するサイトの説明文">
  • ページの概要を示す説明文を指定する。一般的には検索サイトで概要として表示される。PCでは120文字程度、スマートフォンでは80文字程度が表示文字数となる。
（3）meta要素（ページのキーワード/keywords）
<meta name="keywords" content="指定するキーワード">
（4）meta要素（ページの作者情報/author）
<meta name="author" content="指定する作者情報">
  • Webページの作者情報を指定する。
  • 使用されないことも多い。
（5）meta要素（ビューポート/viewport）
<meta name="viewport" content="指定する表示領域">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Webページの表示領域（幅）を指定する。
  • “width=device-width”は「デバイスの表示幅に合わせた表示領域」を示す。
  • “initial-scale=1.0″は「初期のズーム倍率が1.0倍」を示す。
  • viewportを指定していないWebページをスマートフォンで表示するとPC用の画面が縮小されて表示される。viwportを指定して複数のデバイスに対する表示デザインを実装することをレスポンシブWebデザインという。正しく実装するには、HTMLにviewportを記述すると同時にCSSにレイアウト調整を行う記述が必要となる。
viewportとは？HTMLのmeta要素の正しい書き方と意味を解説
...
gmotech.jp
L2.3.3 link要素（外部CSSファイルの紐づけ）
<link href="指定するスタイルシートファイルのパス名" rel="stylsheet" type="text/css">
  • 外部のスタイルシートファイルとの紐づけを指定する。
  • 共通のスタイルシートファイルを用いることで、サイト内の複数ページのデザインを一括で編集することができる。
  • href = hyper refference
  • rel = relation
（2）link要素（ファビコンファイルの紐づけ）
<link href="指定するファビコンファイルのパス名" rel="icon">
  • ファビコンファイル（Webページのシンボルアイコンファイル）との紐づけを指定する。
  • 一般的なファビコンファイル名は”favicon.ico”となる。

L2.4 文書本文

L2.4.1 （文書本体のタグ分類）

記事本文に記載するタグには以下の分類がある。

  • セクション分類タグ
  • コンテンツ分類タグ
  • テキスト分類タグ
  • コンテンツ埋め込みタグ
  • テーブルタグ
  • フォームタグ
注意事項
  • ブロックレベル要素（文書の骨組み）
    文書の骨組みとなる要素（見出し・段落など）。body要素の直接の子要素として配置することができる。
  • インライン要素（文書中の一部）
    文書中の一部として扱われる要素（文字の修飾など）。通常はブロックレベル要素内で使用する。
コンテンツ・モデルコンテンツ

HTML4.01まではブロックレベル要素とインライン要素に分類されていたが、現在のHTML5ではコンテンツの種類をコンテンツ・モデルとして再定義している。

  • メタデータ・コンテンツ
    文書情報や他の文書との関係を定義するもの。
  • フロー・コンテンツ
    子孫にテキストなどを持つもの。
  • セクショニング・コンテンツ
    見出しと概要を付けられるもの。
  • ヘッディング・コンテンツ
    セクションの見出しとなるもの。
  • フレージング・コンテンツ
    段落などの中に含まれる文節・語句など。
  • エンベンディッド・コンテンツ
    文書に他のリソースを埋め込むもの。
  • ユーザーによる操作に対応するもの。

L2.5 セクション分類タグ

L2.5.1 セクション分類の構想例
  • section：メインコンテンツ
  • article：おまけのコンテンツ
L2.5.2 h1～h6要素（見出し）
<h1>h1 レベル見出し情報</h1>
<h2>h2 レベル見出し情報</h2>
<h3>h3 レベル見出し情報</h3>
<h4>h4 レベル見出し情報</h4>
<h5>h5 レベル見出し情報</h5>
<h6>h6 レベル見出し情報</h6>
  • 原則h1レベルは1ページに1つだけ指定する（h2以下はいくつ指定してもよい）。
L2.5.3 article要素
<article>アーティクル定義情報</article>
  • 単独で成り立つコンテンツ
L2.5.4 section要素（セクション）
<section>セクション定義情報</section>
  • 章のブロック
L2.5.5 header 要素（ヘッダー）
<header>ヘッダー定義情報</header>
  • ヘッダーブロックを定義
L2.5.6 footer要素（フッター）
<footer>フッター定義情報</footer>
  • フッターブロックを定義
L2.5.7 nav情報（ナビ）
<nav>グローバルナビゲーション定義情報</nav>
L2.5.8 aside要素（アサイド）
<aside>アサイド定義情報</aside>
L2.5.9 表示サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML セクション サンプル</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
</style>
</head>
<body>
	<div class="container">
		<h1>h1 レベル見出し情報</h1>
		<h2>h2 レベル見出し情報</h2>
		<h3>h3 レベル見出し情報</h3>
		<h4>h4 レベル見出し情報</h4>
		<h5>h5 レベル見出し情報</h5>
		<h6>h6 レベル見出し情報</h6>
		<article>アーティクル定義情報</article>
		<section>セクション定義情報</section>
		<header>ヘッダー定義情報</header>
		<footer>フッター定義情報</footer>
		<nav>グローバルナビゲーション定義情報</nav>
		<aside>アサイド定義情報</aside>
	</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML セクション サンプル</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
</style>
</head>
<body>
	<div class="container">
		<h1>h1 レベル見出し情報</h1>
		<h2>h2 レベル見出し情報</h2>
		<h3>h3 レベル見出し情報</h3>
		<h4>h4 レベル見出し情報</h4>
		<h5>h5 レベル見出し情報</h5>
		<h6>h6 レベル見出し情報</h6>
		<article>アーティクル定義情報</article>
		<section>セクション定義情報</section>
		<header>ヘッダー定義情報</header>
		<footer>フッター定義情報</footer>
		<nav>グローバルナビゲーション定義情報</nav>
		<aside>アサイド定義情報</aside>
	</div>
</body>
</html>

L2.6 コンテンツ分類タグ

L2.6.1 p要素（段落（パラグラフ））
<p>段落情報</p>
L2.6.2 hr要素（区切り）
<hr>
  • テーマや話題の区切りを指定する。
L2.6.3 ul/li要素（順序のないリスト）
<ul>
	<li>リスト要素</li>
	<li>リスト要素</li>
</ul>
L2.6.4 ol/li要素（順序のあるリスト）
<ol>
	<li>リスト要素</li>
	<li>リスト要素</li>
</ol>
  • ol = orderd list
L2.6.5 dl/dt/dd要素（定義・説明リスト）
<dl>
	<dt>説明される言葉</dt><dd>説明文</dd>
	<dt>説明される言葉</dt><dd>説明文</dd>
</dl>
L２.６.9 表示サンプル（ul/olタグにCSSでスタイルを設定）
  • ulタグもolタグも同様の表示形態になる。

L2.6.10 表示サンプル（dlタグにCSSでスタイルを設定）
用語説明を「:」で区切る

L2.7 テキスト分類タグ

L2.7.1 a要素（ハイパーリンク）
<a htef="リンク先情報">ハイパーリンク定義情報</a>
<a href="リンク先情報" target="_blank">ハイパーリンク定義情報</a>
<a href="リンク先情報" target="_blank" rel="noopener noreferrer">ハイパーリンク定義情報</a>
  • ハイパーリンクする範囲を指定
  • 外部サイトなどにリンクするときは「target=”_blank”」を付けることで新しいタブで開くことができる。
  • 「target=”_blank”」使用時に悪意ある外部サイトを指定すると外部ライトから自サイトを操作される脆弱性がある。これを回避するために「rel=”noopenner noreferrer”」を同時に指定する。
L2.7.2 em要素（強調）
<em>協調定義情報</em>
L2.7.3 strong要素（強い重要性）
<strong>強い重要性定義情報</strong>
L2.7.4 small要素（免責・警告・著作権など）
<small>免責・警告・著作権など定義情報</small>
L2.7.4 small要素（声や心の中で思ったこと）
<i>声や心の中で思ったこと定義情報</i>
L2.7.3 b要素（キーワードや商品名など）
<b>キーワードや商品名など定義情報</b>
L2.7.7 span要素（ひとつの範囲）
<span>ひとつの範囲定義情報</span>
L2.7.8 br情報（改行）
<br>
  • 改行する箇所を指定。
  • 段落とは異なる
  • brタグを多用することで空白スペースをデザインすることは推奨されない（CSSを用いる）。
L.2.7.9 表示サンプル

L2.8 コンテンツ埋め込みタグ

L2.8.1 img要素（画像）
<img src="画像パス名" alt="代替テキスト">
  • 「代替テキスト」部分には画像が表示できないときに表示するテキストを指定する。
L２.８.2 iframe要素（インラインフレーム）
<iframe src="フレーム内に表示するURL" title="補足情報">フレームが表示できないときのメッセージ</iframe>
<iframe src="フレーム内に表示するURL" width="フレームの幅" height="フレームの高さ" title="補足情報">フレームが表示できないときのメッセージ</iframe>
  • インラインフレーム内に「フレーム内に表示するURL」で指定したURLの内容を表示する。「補足情報」には表示する内容の補足的な情報を指定する。
  • 「フレームの幅」と「フレームの高さ」には、作成するフレームの大きさを指定する。幅の初期値は300、高さの初期値は150。
  • 無断転載などを防止するため、iframeタグで呼び出すことができないように指定されるコンテンツも存在する。
学科 HTML基礎② | DEAUアカデミー WEBデザイナー養成科（短時間）A教室
samplesdl.me

メモ

  • WordPressブロック追加ショートカット
【Ctrl】＋【Alt】＋【Y】
  • タグの読み方を調べておくと理解の助けになる。

-本日のアジェンダ-

1限目
学科 HTML基礎②
文書情報（ヘッダー領域）について

2限目
学科 HTML基礎②
セクション分類タグについて

3限目
学科 HTML基礎②
コンテンツ分類タグについて

4限目
学科 HTML基礎②
HTMLのまとめ

5限目
学科 HTML基礎②
過去の訓練の復習

本日のテーマ

文書情報と文書構造を意識しましょう

HTMLの基本構造について

<!DOCTYPE html>
<html lang=”ja”>
<head>
　　（文書の情報を記述）
</head>
<body>
　　（文書の本体を記述）
</body>
</html>

!DOCTYPE 宣言（ドキュメントタイプ宣言）

ドキュメントタイプ宣言は、この文書のバージョンを宣言するメタ情報です。HTML5 であれば<!DOCTYPE html>と記述します。

html 要素（HTML の文書）

html 要素は、この文書が HTML の文書であることを表します。「lang=”ja”」の “ja” は日本語で書かれた文書であることを表します。

head 要素（文書情報）

head 要素は、この文書のメタデータを記述します。例えば、<title>～</title>でその文書のタイトルを記述することができます。

body 要素（文書本文）

body 要素は、この文書の本文を記述します。この body 要素で囲まれた領域が Web ページとして表示されます。

文書情報について

title 要素（ページタイトル）

<title>Webページのタイトル</title>

Web ページのタイトル名を記載します。多くのブラウザではブラウザのタイトルタブに表示される名称となります。

meta 要素（文字コード指定/charset）

<meta charset=”UTF-8″>

HTML を記述している文字コードを指定します。文字コードが UTF-8 の場合は “UTF-8” と指定します。

meta 要素（ページの説明文/description）

<meta name=”description” content=”サイトの説明文”>

ページの概要を示す説明文を指定します。一般的には検索サイトでページ概要として表示され、PC は 120 文字程度、スマホは 50 文字程度が表示文字数となります。

meta 要素（ページのキーワード/keywords）

<meta name=”keywords” content=”キーワード”>

ページの検索キーワードをカンマ（,）で区切って指定します。キーワードの有効可否は検索サイトに依存します。

meta 要素（ページの作者情報/author）

<meta name=”author” content=”作者情報”>

Web ページの作成者情報を指定します。

meta 要素（ビューポート/viewport）

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Webページの表示領域を指定します。 上記の “width=device-width” デバイスの表示幅に合わせた表示領域を使用することを示し “initial-scale=1.0” は 1.0 倍の倍率で表示することを示します。 viewportを指定していないWebページをスマホで表示するとPC用の画面が縮小されて表示されます。 viewportを指定して複数の装置のデザインを実装することをレスポンシブWebデザインといいますが正しく実装するには、HTML に viewport を記述すると同時に CSS にレイアウト調整を行う記述が必要となります。

link要素（外部 CSS ファイルの紐付け）

<link href=”スタイルシートファイルのパス名” rel=”stylesheet” type=”text/css”>

外部のスタイルシートファイルとの紐付けを指定します。

link要素（ファビコンファイルの紐付け）

<link href=”ファビコンファイルのパス名” rel=”icon”>

ファビコンファイル（Web ページのシンボルアイコンファイル）との紐付けを指定します。一般的なファビコンファイル名は “favicon.ico” になります。

文書本文について

文書本文に記載するタグには、以下の分類があります。

  • セクション分類タグ
  • コンテンツ分類タグ
  • テキスト分類タグ
  • コンテンツ埋め込みタグ
  • テーブルタグ
  • フォームタグ

参考サイト

ブロックレベル要素とインライン要素について

要素の多くは、ブロックレベル要素とインライン要素に分類されます。
ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。

ブロックレベル要素

文書の骨組みとなる要素です（例えば見出しや段落など）。このタイプの要素は、body要素の直接の子要素として配置することができます。

インライン要素

文章中の一部として扱われる要素です（例えばリンクや文字の強調など）。このタイプの要素は、通常はブロックレベル要素内で使用します。

参考サイト

セクション分類タグについて

h1～h6 要素（見出し）

<h1>h1 レベル見出し情報</h1>
<h2>h2 レベル見出し情報</h2>
<h3>h3 レベル見出し情報</h3>
<h4>h4 レベル見出し情報</h4>
<h5>h5 レベル見出し情報</h5>
<h6>h6 レベル見出し情報</h6>

各レベルに従った見出しを指定します。一般的に h1 はページに 1 つだけ指定します。

ワンポイントアドバイス

h1タグ以外は、特に使用回数に制限はありません。h2やh3などは大きな見出しとなることが多いためたくさん使われると思います。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はありません。ただ、html5の場合は1ページにh1タグが複数あっても問題ありません。

参考サイト

article 要素（アーティクル）

<article>アーティクル定義情報</article>

単独で成り立つコンテンツのブロックを定義します。

section 要素（セクション）

<section>セクション定義情報</section>

章のブロックを定義します。

header 要素（ヘッダー）

<header>ヘッダー定義情報</header>

ページ上部のヘッダーブロックを定義します。セクション要素やアーティクル要素内のヘッダー情報としても使用可能です。

footer 要素（フッター）

<footer>フッター定義情報</footer>

ページ下部のフッターブロックを定義します。セクション要素やアーティクル要素内のフッター情報としても使用可能です。

nav 要素（ナビ）

<nav>グローバルナビゲーション定義情報</nav>

グローバルナビゲーションのブロックを定義します。

aside 要素（アサイド）

<aside>アサイド定義情報</aside>

ページの内容と関連がないブロックや補足情報のブロックを定義します。

参考サイト

コンテンツ分類タグについて

p 要素（段落（パラグラフ））

<p>段落定義情報</p>

段落（パラグラフ）を指定します。段落よりもふさわしい要素がある場合には使用するべきではありません。

ワンポイントアドバイス

マークアップに悩んだらとにかく「p」にしましょう。

hr 要素（区切り）

<hr>

テーマや話題の区切りを指定します。

ul/li 要素（順序のないリスト）

<ul>
　　<li>リスト要素</li>
　　<li>リスト要素</li>
</ul>

順序性のないリスト要素を指定します。

ol/li 要素（順序のあるリスト）

<ol>
　　<li>リスト要素</li>
　　<li>リスト要素</li>
</ol>

順序性のあるリスト要素を指定します。

dl/dt/dd 要素（定義・説明リスト）

<dl>
　　<dt>説明する言葉</dt><dd>説明文</dd>
　　<dt>説明する言葉</dt><dd>説明文</dd>
</dl>

説明文リストを指定します。

div 要素（ひとつのかたまりの範囲）

<div>ひとつのかたまりの範囲定義情報</div>

ひとつのかたまりの範囲を指定します。

main 要素（メインコンテンツ）

<main>メインコンテンツ定義情報</main>

ページのメインコンテンツブロックを定義します。

本日の課題①

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。

本日の課題②

過去の訓練の復習として訓練内容を「投稿ページ」にまとめてください。
投稿日は、該当する訓練の日時にしてください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。