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>