HTML、CSSの教科書
これでよかったらインプットアウトプットしてみてください。
完璧に覚える必要はないです。
p328のEXERCISE05ができれば十分かと思います。
HTMLの基本構造
HTMLの基本構造をみていきます。
index.html
<!DOCTYPE html> //html要素
<html lang="en">
<head> //head要素
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/main.css" /> //CSS適用
<title>Document</title>
</head> //head要素
<body> //body要素
<div class="line1">
<div class="message">Line1</div>
</div>
<div class="line2">
<div class="message">Line2</div>
</div>
</body> //body要素
</html> //html要素
まずはhtml要素で囲みます。これでHTMLを宣言します。
head要素はページの設定の記述をしていきます。
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
このmetaタグ（補足情報）です。
body要素はページの表示情報を記述していきます。
index.html
<body>
<div class="line1">
<div class="message">テスト</div>
</div>
<div class="line2">
<div class="message">テスト２</div>
</div>
</body>
//テスト1
//テスト２
これがbodyの部分です
おまけCSS
CSSも書いていきます。
main.css
.line1 {
font-size: 32px;
}
.line1 .message {
color: yellow;
}
.line2 {
color: aqua;
}
これでline1の部分がCSSで適用され、サイズが変わりテスト２より大きくなります。
.line1 .message を指定してテストの文字の色が黄色になります。
line２のテストの部分の文字サイズは変わりませんが色が青色になります。
HTMLのタグ
よく使うタグ
基本構造で出てくる超基本的な構造です。
| タグ | 意味 |
|---|---|
| html | HTMLを宣言 |
| mata | ページ情報の記述 |
| head | ページの設定の記述 |
| title | ページのタイトル |
| link | リンクで外部ファイル読み込み(CSSやURLなど) |
| body | ブラウザに表示される部分 |
VSCodeで開く時にhtmlと入力すると下のようなコードが出せます。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
この資料にもコードが書いてあります。
ブロックレベル要素とインライン要素
ブロックレベル要素は改行される特徴があります。
ex) div p h formなど
インライン要素は改行されない特徴があります。
ex) span a img inputなど
実査に動かすと
index.html
<body>
<div>divの確認</div>
<span>span</span>
<span>span2</span>
</body
//divの確認
//span span2
のようになります。
コンテンツ内のタグ
| タグ | 意味 |
|---|---|
| span | インライン要素 |
| h1~h6 | 見出し |
| p | 段落 |
| img | 画像読み込み |
| a | リンク |
| ul | 箇条書き |
| li | リスト |
| ol | 番号付きリスト |
| br | 改行 |
| hr | 区切り線 |
| strong | 太文字 |
| small | 法的表示 |
| blockquote | 引用文 転載文 |
| audio | 音声データ埋め込み |
| video | 動画データ埋め込み |
| script | JSなどのscript埋め込み |
| isindex | キーワード検索 |
| adresss | アドレス情報 |
⚫︎imag
index.html
<body>
<img src="https://radichubu.jp/files/topics/37337_ext_01_0.jpeg" />
</body>
//ビックベンの画像
⚫︎a
index.html
<body>
<a href="https://www.youtube.com/c/NKTofficial">Youtube大学</a>
</body>
//中田敦彦さんのYoutubeチャンネルにいく
⚫︎h
index.html
<body>
<h1>HTML学習</h1>
<h3>HTMLはプログラミング言語ではない</h3>
<h6>マークアップ言語です。</h6>
</body>
]
全部は載せられないのでご自身で挙動を確認してください。
表のタグ
| タグ | 意味 |
|---|---|
| table | 表を示す |
| thead | テーブル（表）のヘッダ行を定義 |
| tbody | テーブル（表）のヘッダ部分を定義 |
| tr | 表の行 |
| th | 表の見出し |
| td | データセルを表す |
| caption | 表題 |
表のタグはこれを参考に動かしてください。
動かしてみました。
index.html
<body>
<table border="1">
<tr>
<td>手持ちポケモン</td>
<td>タイプ</td>
<td>得意技</td>
</tr>
<tr>
<td>ピカチュウ</td>
<td>電気</td>
<td>10万ボルト</td>
</tr>
<tr>
<td>ミュウツー</td>
<td>エスパー</td>
<td>サイコキネシス</td>
</tr>
<tr>
<td>リザードン</td>
<td>炎</td>
<td>かえんほうしゃ</td>
</tr>
</table>
</body>
フォーム
| タグ | 意味 |
|---|---|
| form | 表を示す |
| input | テーブル（表）のヘッダ行を定義 |
| input type="checkbox" | チェックボックス |
| input type="radio" | ラジオボタン複数項目のうち一つ選択 |
| select | セレクトボックス |
| textarea | 複数行テキストの入力 |
| label | フォームのラベル |
| placeholder | 入力欄に(例)初期表示 |
資料
index.html
<body>
<h2>問い合わせフォーム</h2>
<p>問い合わせはこちらから</p>
<form>
<input type="text" name="/" />
<input type="submit" value="送信" />
</form>
</body>
グループ化するためのブロック要素
| タグ | 意味 |
|---|---|
| div | 意味を持たない |
| header | ページ上部 |
| nav | ナビゲーションバー |
| aside | 補足部分 |
| section | 1つのテーマのあるグループ |
| main | ページのメイン部分 |
| footer | ページの下部 |
参考資料