HTMLタグ
html
HTML文書全体を表す
<html></html>head
HTML文書の設定（メタ情報）
<head></head>body
HTML文書の本体であることを表す
<body></body>title
HTML文書の名前を指定する
<head>内に記述する
<title></title>h1〜h6
見出しを表す
「heading」の「h」
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>p
段落を表す
「paragraph」の「p」
<p></p>a
段落を表す
「anchor」の「a」
href：「HyperText Reference」参照先の情報
<a href="URL"></a>ul
順番なしリストを表す
同格のリストや箇条書きに
「unordered list」のul
li：リスト項目
<ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ul>ol
順番ありリストを表す
手順や流れなど順序のあるリスト
「ordered list」のol
li：リスト項目
<ol>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>dl
定義リストを表す
言葉の説明などのリスト
「definition list」のdl
dt：定義する用語：「definition term」
dd：用語の説明：「definition description」
<dl>
<dt>用語1</dt>
<dd>用語1の説明</dd>
<dt>用語2</dt>
<dd>用語2の説明1</dd>
<dd>用語2の説明2</dd>
</dl>section
文章や情報のまとまりを表す
<section></section>div
グループ化する
<div></div>span
範囲指定する
<span></span>br
改行する
終了タグは不要
<br>img
画像を表示する
src=”画像のURL”
alt=”画像の説明”
終了タグは不要
<img src="https://idia.jp/cat.jpg" alt="ねこの画像">クラスとID
要素（タグ）に名前をつける2つの方法
クラス
ページ内で何度も使える
class=”クラス名”
ID
ページ内で一度しか使えない
id=”ID名”
<section id="my_id">
<ul>
<li class="my_class">ねこ</li>
<li class="my_class">いぬ</li>
<li class="my_class">とり</li>
</ul>
</section>iframe
現在のページに他のページを埋め込む
<iframe src="他のページのURL">
</iframe>table
表を表示する
table：表
tr：表の「行」を設定する
th：表の見出し
td：表の内容
<table>
<tr>
<th>見出し</th>
<td>内容</td>
</tr>
</table>CSS
基本
セレクタ（どれに対して）、プロパティ（何を）、値（どうする）、を指定する
セレクタ {
プロパティ: 値;
}
h1 {
}
#section-01 {
}
.catch-copy {
}文字に関するCSS
font-size: 値;
10px など
color: 値;
#ff0000 red など
font-weight: 太さの指定;
normal bold など背景に関するCSS
background: 値;
#ff0000 red など大きさや余白に関するCSS
width: 値;
100px など
padding: 値;
margin: 値;
10px などテキスト位置に関するCSS
text-align: テキスト位置;
center left right など枠線に関するCSS
border-color: 色の指定;
#ff0000 red など
border-width: 太さの指定;
10px など
border-style: 種類の指定;
solid dotted double など本日の提出課題例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学籍番号</title>
<style>
/* ここにCSSを書きます */
iframe {
width: 100%;
height: 100vh;
}
table {
width: 100%;
border-color: black;
border-width:1px;
border-style: solid;
}
th {
width: 50%;
padding: 10px;
background: gray;
color: white;
}
th {
width: 50%;
padding: 10px;
}
/* ここにCSSを書きます */
</style>
</head>
<body>
<section>
<h1>iframe</h1>
</section>
<section id="section-map">
<h2>YouTubeを埋め込む</h2>
<div>
<iframe></iframe>
</div>
</section>
<section id="section-map">
<h2>Googleマップを埋め込む</h2>
<div>
<iframe></iframe>
</div>
</section>
<section id="section-table">
<h2>Googleマップを埋め込む</h2>
<div>
<table>
<tr>
<th>番号</th>
<td>1234</td>
</tr>
<tr>
<th>名前</th>
<td>山田太郎</td>
</tr>
</table>
</div>
</section>
</body>
</html>