美しい Web サイト

W3.CSSで構築

<!-- head要素へ一行追加 -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css>

<!-- 各要素にクラス設定 -->
<div class="w3-container w3-padding"> こんにちは!</div>

受験者用リファレンス-HTML編

目次

グローバル属性

文書型宣言

ルート要素

ドキュメントメタデータ

スクリプティング

セクション

グルーピングコンテンツ

テキストレベルの意味

埋め込みコンテンツ

テーブル(表)

フォーム

文字実体参照

グローバル属性

id

<要素名 id="ID名">~</要素名>

IDを指定する。

class

<要素名 class="クラス名">~</要素名>

クラスを指定する。

文書型宣言

<!DOCTYPE html>

<!DOCTYPE html>

文書型宣言を定義する。

ルート要素

<html>

<html>~</html>

HTML文書の最上位要素(ルート要素)を定義する。

  • lang="言語"

lang="言語"

<html lang="言語">~</html>

言語を指定する。

言語
  • ja(日本語)
  • en(英語)など

ドキュメントメタデータ

<title>

<title>~</title>

HTML文書のタイトルを定義する。

<meta>

<meta>

メタ情報を定義する。

  • name="名前"
  • http-equiv="HTTPヘッダー"
  • content="値"
  • charset="文字エンコード"

name="名前"

<meta name="名前">

メタ情報における属性名を設定する。

名前
  • メタ情報における属性名

http-equiv="HTTPヘッダー"

<meta http-equiv="HTTPヘッダー">

HTTP通信時のヘッダー生成に用いる。

HTTPヘッダー
  • HTTPヘッダーの名前

content="値"

<meta content="値">

meta要素内での属性値を設定する。

  • name属性、またはhttp-equiv属性に対する属性値

charset="文字エンコード"

<meta charset="文字エンコード">

文字エンコードを設定する。

文字エンコード
  • utf-8など

スクリプティング

<script>

<script></script>

スクリプトを定義する。

  • src="URL"
  • type="MIMEタイプ"
  • charset="文字エンコード"

src="URL"

<script src="URL"></script>

読み込むスクリプトファイルのURLを指定する。

URL
  • ファイル名、ディレクトリ名/ファイル名等

type="MIMEタイプ"

<script type="MIMEタイプ"></script>

スクリプトのMIMEタイプを指定する。

MIMEタイプ
  • text/javascript(JavaScriptファイル)

charset="文字エンコード"

<script charset="文字エンコード"></script>

文字エンコードを設定する。

文字エンコード
  • utf-8など

<noscript>

<noscript>~</noscript>

スクリプトに対応していない環境を定義する。

セクション

<body>

<body>~</body>

HTML文書の内容を定義する。

<article>

<article>~</article>

完結できるセクションを定義する。

<section>

<section>~</section>

一般的なセクションを定義する。

<aside>

<aside>~</aside>

サイドバー、補足記事、広告などを定義する。

<h1>~<h6>

<h1>~</h1>、<h2>~</h2>、<h3>~</h3>、<h4>~</h4>、<h5>~</h5>、<h6>~</h6>

見出しを定義する。

<address>

<address>~</address>

連絡先を定義する。

グルーピングコンテンツ

<p>

<p>~</p>

段落を定義する。

<ol>

<ol>~</ol>

番号付きリストを定義する。

<ul>

<ul>~</ul>

箇条書きリストを定義する。

<li>

<li>~</li>

箇条書きリスト、番号付きリストのリスト項目を定義する。

<dl>

<dl>~</dl>

項目付きリストを定義する。

<dt>

<dt>~</dt>

用語や名前を定義する。

<dd>

<dd>~</dd>

用語や名前の説明を定義する。

<figure>

<figure>~</figure>

図版などを定義する。

<figcaption>

<figcaption>~</figcaption>

図版などのキャプション(タイトル)を定義する。

<div>

<div>~</div>

汎用要素を定義する。

テキストレベルの意味

<a>

<a>~</a>

ハイパーリンクを定義する。

  • href="URL"

href="URL"

<a href="URL">~</a>

ハイパーリンク先のURLを指定する。

<a href="#アンカー名">~</a>

同じHTML文書のアンカー位置へのハイパーリンクを指定する。

<a href="URL#アンカー名">~</a>

別のHTML文書のアンカー位置へのハイパーリンクを指定する。

<em>

<em>~</em>

強調を定義する。

<strong>

<strong>~</strong>

強い重要性を定義する。

<small>

<small>~</small>

注釈や細目を定義する。

<time>

<time>~</time>

日時や期間を定義する。

  • datetime="日時"

datetime="日時"

<time datetime="日時">~</time>

日時を設定する。

日時
  • YYYY-MM-DD(年-月-日)
  • HH:MM(時:分)

<i>

<i>~</i>

他と区別したい箇所を定義する。

<b>

<b>~</b>

意味的に区別したい箇所を定義する。

<span>

<span>~</span>

汎用要素を定義する。

<br>

<br>

改行する。

埋め込みコンテンツ

<img>

<img>

イメージを表示する。

  • src="URL"
  • width="幅"
  • height="高さ"
  • alt="代替テキスト"

src="URL"

<img src="URL">

表示するイメージファイルのURLを指定する。

URL
  • ファイル名、ディレクトリ名/ファイル名等

width="幅"

<img width="幅">

イメージの幅を指定する。

  • 数値(ピクセル数)

height="高さ"

<img height="高さ">

イメージの高さを指定する。

高さ
  • 数値(ピクセル数)

alt="代替テキスト"

<img alt="代替テキスト">

イメージの代替テキストを指定する。

代替テキスト
  • イメージの代わりに表示するテキスト(文章)

テーブル(表)

<table>

<table>~</table>

テーブル(表)を定義する。

<caption>

<caption>~</caption>

テーブル(表)にキャプション(タイトル)や説明を定義する。

<tbody>

<tbody>~</tbody>

テーブル(表)の行グループ(本体)を定義する。

<thead>

<thead>~</thead>

テーブル(表)の行グループ(ヘッダー)を定義する。

<tfoot>

<tfoot>~</tfoot>

テーブル(表)の行グループ(フッター)を定義する。

<tr>

<tr>~</tr>

テーブル(表)の行を定義する。

<th>

<th>~</th>

テーブル(表)の見出しセルを定義する。

  • colspan="セル数"
  • rowspan="セル数"
  • scope="方向"

colspan="セル数"

<th colspan="セル数">~</th>

複数列に渡るセルを結合する。

セル数
  • 結合するセルの列数

rowspan="セル数"

<th rowspan="セル数">~</th>

複数行に渡るセルを結合する。

セル数
  • 結合するセルの行数

scope="方向"

<th scope="方向">~</th>

見出しセルに対応するデータの方向を指定する。

方向
  • row(行)
  • col(列)
  • rowgroup(行グループ)
  • colgroup(列グループ)

<td>

<td>~</td>

テーブル(表)のデータセルを定義する。

  • colspan="セル数"
  • rowspan="セル数"

colspan="セル数"

<td colspan="セル数">~</td>

複数列に渡るセルを結合する。

セル数
  • 結合するセルの列数

rowspan="セル数"

<td rowspan="セル数">~</td>

複数行に渡るセルを結合する。

セル数
  • 結合するセルの行数

フォーム

<form>

<form>~</form>

フォームを定義する。

  • action="アクション"
  • method="メソッド"
  • name="名前"

action="アクション"

<form action="アクション">~</form>

フォームデータを送信するURLを指定する。

アクション
  • 送信するURL

method="メソッド"

<form method="メソッド">~</form>

フォームデータ送信に使うHTTPメソッドを指定する。

メソッド
  • post
  • get

name="名前"

<form name="名前">~</form>

フォーム部品を識別するための名前を指定する。

名前
  • フォーム部品の名前

<label>

<label>~</label>

フォーム部品のラベルを定義する。

  • for="名前"

for="名前"

<label for="名前">~</label>

ラベルを付けるフォーム部品(コントロール)を指定する。

名前
  • 関連付けるフォーム部品のid名

<input>

<input>

フォーム部品を指定する。

  • name="名前"
  • value="初期値"
  • required(必須)

name="名前"

<input name="名前">

フォーム部品を識別するための名前を指定する。

名前
  • フォーム部品の名前

value="初期値"

<input value="初期値">

フォーム部品の初期値を指定する。

初期値
  • フォーム部品のデータの初期値

required(必須)

<input required>

フォーム部品の入力必須項目を指定する。

<input type="text">

<input type="text">

テキストフィールド(テキスト形式)を指定する。

<input type="tel">

<input type="tel">

テキストフィールド(電話番号形式)を指定する。

<input type="email">

<input type="email">

テキストフィールド(メールアドレス形式)を指定する。

<input type="checkbox">

<input type="checkbox">

チェックボックスを指定する。

<input type="radio">

<input type="radio">

ラジオボタンを指定する。

<input type="submit">

<input type="submit">

送信ボタンを指定する。

  • value="テキスト"

value="テキスト"

<input value="テキスト">

送信ボタンに表示されるテキストを指定する。

テキスト
  • 送信ボタンに表示されるテキスト

<input type="image">

<input type="image">

画像ボタンを指定する。

  • src="URL"
  • alt="代替テキスト"

src="URL"

<input src="URL">

画像ボタンとして表示するイメージファイルのURL を指定する。

URL
  • ファイル名、ディレクトリ名/ファイル名等

alt="代替テキスト"

<input alt="代替テキスト">

画像ボタンの代替テキストを指定する。

代替テキスト
  • 画像ボタンの代わりに表示するテキスト(文章)

<select>

<select>~</select>

選択リストを定義する。

  • name="名前"
  • multiple(複数選択)
  • size="数値"
  • required(必須)

name="名前"

<select name="名前">~</select>

フォーム部品を識別するための名前を指定する。

名前
  • フォーム部品の名前

multiple(複数選択)

<select multiple>~</select>

選択肢を複数選択する。

size="数値"

<select size="値">~</select>

表示する選択肢の数を指定する。

  • 数値

required(必須)

<select required>~</select>

フォーム部品の入力必須項目を指定する。

<option>

<option>~</option>

選択リストの項目を定義する。

  • value="値"
  • selected(選択済み)

value="値"

<option value="値">~</option>

選択リストの項目に対応する値を指定する。

  • 項目に対応する値

selected(選択済み)

<option selected>~</option>

選択済みとして表示する項目を指定する。

<textarea>

<textarea>~</textarea>

テキストエリアを定義する。

  • name="名前"
  • cols="幅"
  • rows="行数"
  • required(必須)

name="名前"

<textarea name="名前">~</textarea>

フォーム部品を識別するための名前を指定する。

名前
  • フォーム部品の名前

cols="幅"

<textarea cols="幅">~</textarea>

テキストエリアの幅を指定する。

  • テキストエリアの幅

rows="行数"

<textarea rows="行数">~</textarea>

テキストエリアの高さ(行数)を指定する。

行数
  • テキストエリアの行数

required(必須)

<textarea required>~</textarea>

フォーム部品の入力必須項目を指定する。

文字実体参照

(半角スペース)

&nbsp;

改行禁止スペース

(&)

&amp;

アンド(アンパサンド)

(")

&quot;

二重引用符

(<)

&lt;

小なり

(>)

&gt;

大なり

(©)

&copy;

著作権マーク

Δ
TOP