第2回 (2022/10/26)

参考書:P50 ~ P55

今回の学習内容

箇条書き(リスト)

ul

Unordered Listの略で、数的な順序がなく、その配置順に意味を持たない項目を持つリストを表す。

【参考資料】 developer.mozilla.org

<< 使用例 >>

<ul>
    <li>最初のリスト項目</li>
    <li>二番目のリスト項目</li>
    <li>三番目のリスト項目</li>
</ul>

<< 表示 >>

・最初のリスト項目

・二番目のリスト項目

・三番目のリスト項目

ol

Ordered Listの略で、順序のあるリストを表示する際に使用する。

【参考資料】 developer.mozilla.org

<< 使用例 >>

<ol>
    <li>最初のリスト項目</li>
    <li>二番目のリスト項目</li>
    <li>三番目のリスト項目</li>
</ol>

<< 表示 >>

1.最初のリスト項目

2.二番目のリスト項目

3.三番目のリスト項目

li

List Itemの略で、リストの項目を表す。

<ol>、<ul>、<menu>のいずれかの子要素として配置する必要がある。

<< 応用 >>

<ul>
  <li>first item</li>
  <li>second item
  <!-- ここには <li> の閉じタグはない -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  <!-- ここに </li> を記述し、要素を閉じている -->
  </li>
  <li>third item</li>
</ul>

説明リスト

dl

description listの略で、説明リストを表す。

【参考資料】 developer.mozilla.org

dt

説明または定義リストの中で用語を表す部分であり、

の子要素としてのみ用いることができる。

【参考資料】

developer.mozilla.org

dd

Definition Descriptionの略で、定義の説明を意味する。

【参考資料】

developer.mozilla.org

<< 使用例 >>

<dl>
    <dt>名前</dt>
    <dd>かぴぞう</dd>
    <dt>年齢</dt>
    <dd>3歳</dd>
</dl>

*簡単に説明すると、「dt」は情報のタイトル(名前、趣味、メールなど)で、「dd」は「dt」の説明文になる。

第1回 (2022/10/19)

参考書:P42 ~ P49

今回の学習内容

HTML構築の基本タグ(骨組み)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
本文
</body>
</html>

h1~h6(見出しタグ)

「heading」の略でページのタイトルや段落の見出しを設定し、文章構造を読者と検索エンジンにわかりやすく伝える。必ずh1~h6の順番通りに書く。

h1

コンテンツのテーマを表す。titleタグと本質的な役割が同じ。

h2(大見出し)

h1の次に重要なテキストに使用。

h3(中見出し)

h2の中のポイントとなるテキストに使用。

h4~h6(小見出し

h3で内容がまとまらないときに、補足的に使用。

【参考資料】 developer.mozilla.org

<< 使用例 >>

<h2>hタグの種類</h2>

<p>(本文)</p>

<h3>①h1タグ</h3>

<p>(本文)</p>

<h4>h1タグを使うときのポイント</h4>

<p>(本文)</p>

<h3>②h2タグ</h3>

<p>(本文)</p>

<h4>h2タグを使うときのポイント</h4>

<p>(本文)</p>

pタグ

段落を指定するためのタグ。「P」は「Paragraph」の略。

※文章ではなく文章のまとまりを表すタグ。

【参考資料】

developer.mozilla.org

brタグ

改行を行うためのタグ。「br」は「Break」の略。

【参考資料】

developer.mozilla.org