この教材で使ったタグ・属性・CSS と、用語の意味をまとめます。表の右の列は、詳しい説明がある章です。
B.1 タグの早見表
「終了タグ」の列が「○」のタグは、終了タグを書きます。空欄のタグは、終了タグを書かない空要素です（第4章「終了タグを書かないタグ」）。
| タグ | 意味 | 終了タグ | 章 |
|---|---|---|---|
<!DOCTYPE html> |
HTML の文書であることを示す宣言。1行目に書く | 第3章 | |
<html> |
文書全体を囲む | ○ | 第3章 |
<head> |
ページについての情報を書く場所 | ○ | 第3章 |
<meta> |
ページについての情報。charset="UTF-8" で文字コードを伝える |
第3章 | |
<title> |
ページのタイトル。Chrome のタブに表示される | ○ | 第3章 |
<link> |
CSS のファイルを読み込む | 第7章 | |
<body> |
ページに表示する内容を書く場所 | ○ | 第3章 |
<h1> |
見出し | ○ | 第3章 |
<p> |
段落 | ○ | 第3章 |
<br> |
段落の中の改行 | 第3章 | |
<div> |
ひとまとまりの部分を囲む。前後で行が変わる | ○ | 第4章 |
<span> |
文章の一部を囲む。行は変わらない | ○ | 第4章 |
<a> |
リンク | ○ | 第5章 |
<img> |
画像 | 第5章 | |
<table> |
表全体 | ○ | 第6章 |
<tr> |
表の1行 | ○ | 第6章 |
<th> |
表の見出しのマス | ○ | 第6章 |
<td> |
表のデータのマス | ○ | 第6章 |
<form> |
フォームの範囲。中の入力欄の値が送られる | ○ | 第8章 |
<input> |
入力欄・ラジオボタン・チェックボックス・日付の入力欄（type で決める） |
第8章・第9章 | |
<label> |
入力部品と文字を囲む。文字をクリックしても選べる | ○ | 第9章 |
<select> |
プルダウン | ○ | 第9章 |
<option> |
プルダウンの選択肢 | ○ | 第9章 |
<textarea> |
複数行の入力欄。中の改行や空白はそのまま表示される | ○ | 第9章 |
<button> |
ボタン。type="submit" で送信ボタンになる |
○ | 第8章 |
B.2 属性の早見表
| 属性 | 書くタグ | 意味 | 章 |
|---|---|---|---|
charset |
<meta> |
ファイルの文字コード（UTF-8） |
第3章 |
class |
どのタグにも書ける | 要素に名前（クラス名）を付ける。CSS で見た目を付けるときに使う | 第4章 |
href |
<a>・<link>
|
リンク先・読み込む CSS のファイルの場所 | 第5章・第7章 |
src |
<img> |
表示する画像の場所 | 第5章 |
alt |
<img> |
画像の内容を表す文章。画像が表示できないときに代わりに表示される | 第5章 |
rel |
<link> |
読み込むファイルとの関係。CSS のときは stylesheet
|
第7章 |
action |
<form> |
フォームの送信先 | 第8章 |
method |
<form> |
送り方（get か post） |
第8章 |
type |
<input>・<button>
|
入力部品の種類（text・radio・checkbox・date）、ボタンの種類（submit） |
第8章・第9章 |
name |
<input>・<select>・<textarea>
|
入力した値の名前。送るときに「名前=値」の組になる。無いと値は送られない | 第8章 |
value |
<input>・<option>
|
送られる値。テキストの入力欄では、最初に入れておく文字 | 第9章 |
checked |
<input> |
ラジオボタン・チェックボックスを、最初から選んでおく | 第9章 |
selected |
<option> |
プルダウンの選択肢を、最初から選んでおく | 第9章 |
B.3 CSS の早見表
書き方
| 書くもの | 例 | 章 |
|---|---|---|
| ルール | h1 { font-size: 24px; } |
第7章 |
| コメント | /* ページ全体 */ |
第7章 |
| 文字コード |
@charset "UTF-8";（ファイルの1行目） |
第7章 |
セレクター
| 種類 | 例 | 選ばれる要素 | 章 |
|---|---|---|---|
| 要素 | th |
すべての <th>
|
第7章 |
| グループ | th, td |
すべての <th> と <td>
|
第7章 |
| 要素＋クラス | a.button |
class="button" が付いた <a>
|
第7章 |
| クラス | .error |
class="error" が付いた要素すべて |
第10章 |
プロパティ
| プロパティ | 意味 | 例 | 章 |
|---|---|---|---|
margin |
外側の余白 | margin: 24px; |
第7章 |
margin-bottom |
下側だけの外側の余白 | margin-bottom: 16px; |
第7章 |
padding |
内側の余白 |
padding: 6px 12px;（上下・左右） |
第7章 |
color |
文字の色 | color: #222; |
第7章 |
background-color |
背景の色 | background-color: #eee; |
第7章 |
font-size |
文字の大きさ | font-size: 24px; |
第7章 |
border |
罫線（太さ・種類・色） | border: 1px solid #999; |
第7章 |
border-collapse |
表のマスの罫線を1本にまとめる | border-collapse: collapse; |
第7章 |
border-radius |
角の丸み | border-radius: 3px; |
第7章 |
text-align |
文字をそろえる位置 | text-align: left; |
第7章 |
text-decoration |
文字の飾りの線 |
text-decoration: none;（下線を消す） |
第7章 |
display |
表示のされ方 |
display: inline-block;・display: inline;
|
第7章・第10章 |
B.4 用語集
| 用語 | 意味 | 章 |
|---|---|---|
| ブラウザ | Web ページを表示するソフトウェア。この教材では Google Chrome を使う | 第1章 |
| サーバー | リクエストに応じて、ページのファイルなどを返すコンピューターやソフトウェア | 第1章 |
| リクエスト | ブラウザからサーバーへの頼みごと | 第1章 |
| レスポンス | サーバーからブラウザへの返事 | 第1章 |
| URL | リクエストの宛先。http://localhost/html/ch03/hello.html のように書く |
第1章 |
| localhost | 自分のパソコンを表す名前 | 第1章 |
| ポート番号 | 1台のパソコンの中で、サーバーのソフトウェアがリクエストを受け付ける番号。80 番は URL に書かなくてよい | 第1章 |
| HTML | Web ページの内容と構造を書く言語 | 第1章 |
| CSS | Web ページの見た目を決める言語 | 第1章 |
| HTML Living Standard | 今の HTML の仕様。版を区切らずに更新し続けるので、番号が付いていない | 第1章 |
| CSS3 | CSS 2.1 より後に、機能ごとに追加・更新されてきた CSS をまとめた呼び名 | 第1章 |
| タグ |
< と > で囲んだ印。開始タグと終了タグがある |
第1章 |
| 要素 | 開始タグから終了タグまでの全体 | 第1章 |
| 属性 | 開始タグの中に 属性名="値" の形で書く、要素についての追加の情報 |
第4章 |
| 入れ子 | 要素の中に要素を入れること。後から開いたタグを先に閉じる | 第4章 |
| 親・子 | 入れ子で、すぐ外側の要素を親、すぐ内側の要素を子という | 第4章 |
| 空要素 | 内容を持たず、終了タグを書かない要素（<br>・<img> など） |
第4章 |
| インデント | 行の先頭に空白を入れて、行を右にずらすこと。表示には影響しない | 第4章 |
| フォーマット | Eclipse の、インデントや改行を自動で整える機能（Ctrl + Shift + F） | 第4章 |
| クラス名 |
class 属性で要素に付ける名前 |
第4章 |
| 文字コード | どの文字を何番で保存するかの決まり。この教材では UTF-8 を使う | 第3章 |
| 文字化け | 文字コードが合わず、日本語が読めない記号の並びで表示されること | 付録A |
| 相対パス | 今のページがあるフォルダーから見た位置で、ファイルの場所を書く書き方 | 第5章 |
| ルール（CSS） | CSS の1つのまとまり。セレクターと、{ } の中のプロパティと値でできている |
第7章 |
| セレクター | CSS で、見た目を付ける要素を選ぶ部分 | 第7章 |
| プロパティ | CSS で、見た目の種類を表す部分（margin・color など） |
第7章 |
| フォーム | 入力した内容をサーバーに送る仕組み。<form> で作る |
第8章 |
| GET | 入力した内容を URL の ? の後ろに付けて送る送り方 |
第8章 |
| POST | 入力した内容をリクエストの本体に入れて送る送り方。データを変えるときに使う | 第8章 |
| ステータスコード | レスポンスの結果を表す番号。404 は「見つからない」、200 は「正しく返された」 | 第2章 |
| Eclipse | ファイルの作成・編集やサーバーの起動を1つの画面で行う統合開発環境（IDE） | 第1章 |
| Tomcat | 作ったファイルを、リクエストに応じて Chrome に送るサーバーのソフトウェア | 第1章 |
| 拡張子 | ファイル名の最後の「.」から後ろの部分（.html・.css・.png など）。ファイルの種類を表す |
第2章 |
| ビュー | Eclipse の画面を作っている小さな画面（パッケージ・エクスプローラー、サーバー、コンソールなど）。閉じたり、場所を移したりできる | 第2章 |
| ワークスペース | Eclipse で作ったプロジェクトを保存しておくフォルダー | 第2章 |
| 動的 Web プロジェクト | Tomcat からブラウザにファイルを送るための、Eclipse のプロジェクトの種類 | 第2章 |
| コンテキスト・ルート | URL の http://localhost/html/ の html の部分になる、プロジェクトの名前 |
第2章 |
| テンプレート（Eclipse） | 「HTML ファイル」「CSS ファイル」で作るときに、最初から入るひな形 | 第3章 |
| テンプレート（Spring入門） | Spring入門で書く、th: で始まる属性を付けた HTML。サーバーのプログラムがデータを入れて表示する。Eclipse のテンプレートとは別のもの |
第10章 |
| デベロッパーツール | Chrome の、Web ページを作る人のための機能。「要素」タブでページの構造を確かめられる | 第3章 |
| Thymeleaf | Spring入門で使う仕組み。HTML に th: で始まる属性を足し、サーバーのプログラムがデータを入れて表示する |
第10章 |