第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
説明または定義リストの中で用語を表す部分であり、
- の子要素としてのみ用いることができる。
【参考資料】
dd
Definition Descriptionの略で、定義の説明を意味する。
【参考資料】
<< 使用例 >>
<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」の略。
※文章ではなく文章のまとまりを表すタグ。
【参考資料】
brタグ
改行を行うためのタグ。「br」は「Break」の略。
【参考資料】