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>
CSS
基本
セレクタ(どれに対して)、プロパティ(何を)、値(どうする)、を指定する
セレクタ {
プロパティ: 値;
}
文字に関する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を書きます */
h1 {
text-align: center;
font-weight: normal;
}
.box-ul {
border-color: red;
border-width: 5px;
border-style: double;
}
/* ここにCSSを書きます */
</style>
</head>
<body>
<section id="section-1">
<h1>犬と猫、どっちがかわいい?</h1>
</section>
<section id="section-2">
<h2>犬のほうがかわいい!</h2>
<div class="box-ul">
<ul>
<li>人に懐く</li>
<li>一緒に散歩できる</li>
<li>頼りになる</li>
</ul>
</div>
</section>
<section id="section-3">
<h2>猫のほうがかわいい!</h2>
<div class="box-ul">
<ul>
<li class="box-li">時々甘えてくれる</li>
<li class="box-li">やわらかい</li>
<li class="box-li">孤高の存在</li>
</ul>
</div>
</section>
</body>
</html>