ほんっとにはじめてのHTML5とCSS3：HTML要素　索引

HTML要素　索引

最終更新日：2022年08月23日　（初回投稿日：2010年08月31日）

※このページは記事を掲載後、順次更新していきます。

A B C D E F H I K L M N O P Q R S T U V W その他

a: [11-1] 他のページにリンクしよう; [11-2] リンクの文字の色を変えよう（CSS使用）; [11-3] 同じページ内でリンクしよう; [11-4] 別のページの特定の箇所にリンクしよう; [11-5] 画像にリンクを貼ろう; [11-6] ボタン画像をマウスオーバー時に変化させよう（CSS使用）
abbr: [29] <abbr>で略語を示そう; [30] 定義語を示す<dfn>を、<abbr>や<dt>と一緒に使おう
address: [17-1] HTML5 の新要素でページ全体を組もう; [17-5] ヘッダーの header、フッターの footer、連絡先の address要素
area: [61] イメージマップ（リンク領域）を作ろう　map要素・area要素
article: [17-1] HTML5 の新要素でページ全体を組もう; [17-2] セクショニングの article要素、aside要素、section要素; [17-3] セクショニング要素と見出し要素のルール
aside: [17-1] HTML5 の新要素でページ全体を組もう; [17-2] セクショニングの article要素、aside要素、section要素; [17-3] セクショニング要素と見出し要素のルール
audio: [66] 音声をプラグイン無しで組み込もう <audio><source>; [67]「mediagroup属性」でメディア要素を同期させよう

b: [23] <b><i><small>もまだ使えます
base: [41] <base>でベースのURLを示そう
bdi: [34] 書字方向を指定する bdo要素と書字方向を隔離する bdi要素
bdo: [34] 書字方向を指定する bdo要素と書字方向を隔離する bdi要素
blockquote: [28] blockquoteで「引用されたブロック」を示そう
body: [2] タイトル（title要素）を設定しよう; [13-1] サイトの背景に色をつけてみよう; [13-2] サイトの背景に画像を表示しよう; [13-3] サイト背景にCSS3で線形グラデーションをつけよう (CSS使用)
br: [5] テキストを改行（<br>）してみよう
button: [50] button要素で送信・リセット・汎用ボタンを自由に作ろう

canvas: [69-1] canvas要素でグラフィックスを表示する領域を作ろう; [69-2] Canvasに基本的な図形を描こう; [69-3] Canvasに曲線を描こう（線のスタイルも）; [69-4] Canvasに画像を描画しよう（トリミングやクリッピングも）; [69-5] Canvasにグラデーションやパターン、シャドウを指定しよう; [69-6] Canvasにマウスの動きに合わせて描画しよう
（クリックやマウスムーブとの組み合わせと Math.random）; [69-7] Canvas上の重なった描画領域を指定しよう
　（globalCompositeOperationプロパティ）; [69-8] Canvasでテキストを描画しよう; （ちょっとメモ）Canvasで便利な javaScriptライブラリ; [69-9] Canvasでグラフィックスの変形をしよう（拡大・回転・移動・反転など）; [69-10] Canvasの描画の状態を保存・復元する save() と restore(); [69-11] Canvasでビットマップを操作しよう（ビットマップの明度や色調の変更）; [69-12] Canvasをサイトの背景に使おう; （ちょっとメモ）CanvasサイズをCSS3のvw, vhで取得してみたけど...; [69-13] Canvasで画像データをURLとして取得しよう; （ちょっとメモ）Canvasでグラフを自動生成する「flotr2」が便利; [69-14] Canvasのアニメーションの基本を見てみよう; （ちょっとメモ）API って何だ？（HTML5 の API について）
caption: [16-2] table にタイトルをつけよう（caption）
cite: [26] 参照先のタイトルを表す<cite>を使おう
code: [31-1] <code> と <pre> でソースを表示しよう
col: [16-6] table縦列グループ化（colgroup, col）
colgroup: [16-6] table縦列グループ化（colgroup, col）

data: [32] その他のプログラム関連を示す samp、kbd、var、data要素
datalist: [52] 入力候補のリストを作ろう　datalist要素
dd: [15-3] 説明リストを作ろう（ dl要素・dt要素・dd要素）; [15-7] リストでナビゲーション（ dl要素・dt要素・dd要素）
defs: [70-2] SVGフィルターを使ってみた
del: [24] 追加を示す<ins>と、削除されたことを示す<del>を使おう
dfn: [30] 定義語を示す<dfn>を、<abbr>や<dt>と一緒に使おう
div: [7] <div>や<span>で特定の範囲を指定しよう
dl: [15-3] 説明リストを作ろう（ dl要素・dt要素・dd要素）; [15-7] リストでナビゲーション（ dl要素・dt要素・dd要素）
dt: [15-3] 説明リストを作ろう（ dl要素・dt要素・dd要素）; [15-7] リストでナビゲーション（ dl要素・dt要素・dd要素）; [30] 定義語を示す<dfn>を、<abbr>や<dt>と一緒に使おう

em: [21] 重要度を示す<strong>と強調を示す<em>を使い分けよう
embed: [64] プラグインで再生されるコンテンツを組み込もう <embed>

fieldset: [48] フォーム部品のグループ化のための fieldset要素と legend要素
figcaption: [36] コンテンツをまとめる<figure>と、そのキャプション<figcaption>
figure: [36] コンテンツをまとめる<figure>と、そのキャプション<figcaption>
filter: [70-2] SVGフィルターを使ってみた
footer: [17-1] HTML5 の新要素でページ全体を組もう; [17-5] ヘッダーの header、フッターの footer、連絡先の address要素
form: [47] form要素で「送信先」と「送信方法」を指定しよう; [59] フォームの属性逆引き一覧 (どの属性がどの部品に使えるか); [60] フォームを美しく整えよう（CSS使用）

h1〜h6: [4] テキストに見出し（<h1>から<h6>）をつけてみよう; [17-3] セクショニング要素と見出し要素のルール
head: [2] タイトル（title要素）を設定しよう
header: [17-1] HTML5 の新要素でページ全体を組もう; [17-5] ヘッダーの header、フッターの footer、連絡先の address要素
hgroup: ＊<hgroup>はHTML5の仕様から削除されました。
hr: [35] 内容の区切りを示す<hr>要素
html: [1] テキストエディタで書いてみよう

i: [23] <b><i><small>もまだ使えます
iframe: [63] インライン・フレームで他のHTMLファイルを組み込もう <iframe>
img: [9-1] 画像を表示しよう; [9-2] 画像にテキストを回り込ませよう（CSS使用）; [10] 絶対URLと相対URL; [11-5] 画像にリンクを貼ろう; [14-2] GIFとJPEGの違い; [71] img要素の srcset属性で画像を切り替えよう
input: [49-1] input要素の属性一覧・type属性の値一覧; [49-2] input要素でテキストを入力してもらおう (text, search, tel, url, email, password); [49-3] input要素でラジオボタンやチェックボックスを作ろう (radio, checkbox); [49-4] input要素で時間を入力してもらおう (datetime-local, date, month, week, time); [49-5] input要素で「数」を入力してもらおう (number); [49-6] input要素で「レンジ（割合）」を選んでもらおう (range); [49-7] input要素で「色」を選んでもらおう (color); [49-8] input要素でファイルを送ってもらおう (file); [49-9] input要素で非表示のデータを送ろう ( hidden ); [49-10] input要素で送信ボタンやリセットボタンなどを作ろう (submit, reset, button); [49-10-2] input要素で作るボタン(submit, reset, button)の見た目を CSSで変えよう; [49-11] input要素で画像の送信ボタンを作ろう (image)
ins: [24] 追加を示す<ins>と、削除されたことを示す<del>を使おう

kbd: [32] その他のプログラム関連を示す samp、kbd、var、data要素
keygen: [58] 暗号鍵を作ろう　keygen要素（HTML5.2で削除されました）

label: [54] ラベルを付けて使いやすくしよう　label要素
legend: [48] フォーム部品のグループ化のための fieldset要素と legend要素
li: [15-1] リストを作ろう（ ul要素・li要素）; [15-2] 番号付きリストを作ろう（ ol要素・li要素）; [15-4] リストマーカーを画像や任意のテキストに変更する方法; [15-5] リストでナビゲーション（ li 要素を float で横に並べる）; [15-6] リストでナビゲーション（ li 要素を display で横に並べる）
link: [42-1] link要素で外部CSSファイルの読み込み・グループ化をしよう; [42-2] link要素の media属性で外部CSSをメディア別に切り替えよう; （ちょっとメモ）CSSの @import と @media（メディアクエリ）; [42-3] link要素の「rel属性」の値（リンクタイプ）; [42-4] link要素でショートカットアイコン（favicon）を表示させよう

main: [17-1] HTML5 の新要素でページ全体を組もう; [17-6] メインコンテンツを表す main要素
map: [61] イメージマップ（リンク領域）を作ろう　map要素・area要素
mark: [22] HTML5の新要素<mark>を使ってみよう（ <strong><em>との使い分け）
meta: [45-1] meta要素で基本情報（メタデータ）を指定しよう; [45-2] meta要素の charset属性で文字コードを指定しよう; [45-3] meta要素の name属性でサイトの情報を指定しよう; [45-4] meta要素の http-equiv属性で動作を指示しよう; [45-5] meta要素で OGPを設定しよう
meter: [56] 数量や割合のゲージを表示しよう　meter要素

nav: [17-4] ナビゲーションのセクションを表す nav要素; [17-3] セクショニング要素と見出し要素のルール; [15-5] リストでナビゲーション（ li 要素を float で横に並べる）

object: [62] 外部コンテンツを組み込もう <object> <param>
ol: [15-2] 番号付きリストを作ろう（ ol要素・li要素）
optgroup: [51] セレクトメニューを作ろう（select・option・optgroup要素）
option: [51] セレクトメニューを作ろう（select・option・optgroup要素）
output: [55] 計算結果の出力欄を作ろう　output要素

p: [6] 段落に <p>要素を使おう（ついでにCSSで整えてみよう）
param: [62] 外部コンテンツを組み込もう <object> <param>
picture: [72] デバイスに合わせた画像を表示できる picture要素
pre: [31-1] <code> と <pre> でソースを表示しよう; [31-2] <pre>要素と同じ効果のCSS「white-space : pre」
progress: [57] プログレスバー（進捗状況）を出そう　progress要素

q: [27] <q>で引用文を示そう

ruby: [19] テキストにルビをつけてみよう（ruby, rt, rb, rp, rtc）
rb: [19] テキストにルビをつけてみよう（ruby, rt, rb, rp, rtc）
rp: [19] テキストにルビをつけてみよう（ruby, rt, rb, rp, rtc）
rt: [19] テキストにルビをつけてみよう（ruby, rt, rb, rp, rtc）
rtc: [19] テキストにルビをつけてみよう（ruby, rt, rb, rp, rtc）

s: （ちょっとメモ）u要素と s要素は復活（HTML5で廃止ではありません）
samp: [32] その他のプログラム関連を示す samp、kbd、var、data要素
script: [44] script要素で HTMLにスクリプトを読み込む or 直接書く
section: [17-1] HTML5 の新要素でページ全体を組もう; [17-2] セクショニングの article要素、aside要素、section要素; [17-3] セクショニング要素と見出し要素のルール
select: [51] セレクトメニューを作ろう（select・option・optgroup要素）
small: [23] <b><i><small>もまだ使えます
source: [65] 動画をプラグイン無しで組み込もう <video> <source>; [66] 音声をプラグイン無しで組み込もう <audio><source>
span: [7] <div>や<span>で特定の範囲を指定しよう
strong: [21] 重要度を示す<strong>と強調を示す<em>を使い分けよう
style: [43] style要素で CSS を HTML文書内に書こう
sub: [20] 上付き文字と下付き文字を使おう（sup, sub）
sup: [20] 上付き文字と下付き文字を使おう（sup, sub）
svg: [70-1] svg要素でベクターグラフィクスを埋め込もう; [70-2] SVGフィルターを使ってみた; [70-3] CSSだけで作る SVGのドローイングアニメーション; [70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション; [70-5] 複数のSVGを1つにまとめて個別に呼び出す SVGスプライト

table: [16-1] table（表）を作ろう（まずは基本の table, tr, th, td）; （ちょっとメモ）テーブルをレスポンシブ対応させるCSS
tbody: [16-5] table横列グループ化（thead, tbody, tfoot）
td: [16-1] table（表）を作ろう（まずは基本の table, tr, th, td）; [16-7] テーブルセルで使う scope属性と headers属性について
template: [46] template要素でテンプレートを作ろう
textarea: [53] 文章 (複数行のテキスト) を入力してもらおう　textarea要素
tfoot: [16-5] table横列グループ化（thead, tbody, tfoot）
th: [16-1] table（表）を作ろう（まずは基本の table, tr, th, td）; [16-7] テーブルセルで使う scope属性と headers属性について
thead: [16-5] table横列グループ化（thead, tbody, tfoot）
time: [25] 新しい要素<time>で正確な日時を記述しよう
title: [2] タイトル（title要素）を設定しよう
tr: [16-1] table（表）を作ろう（まずは基本の table, tr, th, td）
track: [68] 動画や音声に字幕やキャプションを表示しよう <track>

u: （ちょっとメモ）u要素と s要素は復活（HTML5で廃止ではありません）
ul: [15-1] リストを作ろう（ ul要素・li要素）; [15-4] リストマーカーを画像や任意のテキストに変更する方法; [15-5] リストでナビゲーション（ li 要素を float で横に並べる）; [15-6] リストでナビゲーション（ li 要素を display で横に並べる）

var: [32] その他のプログラム関連を示す samp、kbd、var、data要素
video: [65] 動画をプラグイン無しで組み込もう <video> <source>; [67]「mediagroup属性」でメディア要素を同期させよう

wbr: [33-1] 改行可能位置を示す <wbr> を使ってみよう

HTML要素以外: [3] !DOCTYPE宣言をしよう; lang="ja"　→HTML文書の言語コード（ [3] !DOCTYPE宣言をしよう）; meta charset=" "　→HTML文書の文字エンコーディング（ [3] !DOCTYPE宣言をしよう）; [8]コメントを入れよう（  HTMLのコメント ）; [10] 絶対URL と相対URL; [12-1] CSSを外部ファイルにしよう; [12-2] なんでHTMLとCSSはセットなの？（ウェブのアクセシビリティ）; [14-2] 画像形式について（GIF、JPEG、PNG の違い）; [14-3] データの容量を示す単位（バイト、キロバイト、メガバイト）; [14-4] 色指定について（16進数, 色名, 10進数, HSL, accessibility）; [37] HTML5要素の「カテゴリー」を見てみよう（「カテゴリー」と属する要素一覧）; [38-1] 「コンテンツ・モデル」で要素のルールを見てみよう; [38-2] 「コンテンツ・モデル」一覧; [39] 全要素に使える「HTML5グローバル属性」を見てみよう; target属性（「[41] base でベースの URL を示そう」の後半）; 正規表記　→ pattern属性でマッチング（ [49-1] input要素でいろんな部品を作ろう）; フォームの属性逆引き一覧　→（ [59] どの属性がどのフォーム部品に使えるか）; [60] フォームを美しく整えよう（CSS使用）
ちょっとメモ・余談: index.html という名のファイル（デフォルトドキュメント）; HTML5で廃止される要素一覧; CSS のベンダープレフィックスについて; HTML5の文法チェックサイト; MIMEタイプ; <link>よりスマートな CSSの @import と @media; 文字コード, 文字集合, エンコードについて（1）2進法、ビットとバイト、JIS; 文字コード, 文字集合, エンコードについて（2）Shift_JIS、Unicode、UTF-8; 整理しよう。フォームのプッシュボタン比較（ <input> <button> ）; HTML5 での省略可能なタグについて; 属性の「引用符」や「値」の省略について; canvasで便利な javaScriptライブラリ; StatCounter でブラウザのシェアを調べる; API って何だ？（HTML5 の API について）; （ちょっとメモ）FC2ブログで OGP設定（Facebook, Twitter Cardsも）; Prism の使い方

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2022-08-23（Tue）│
投稿日：2010-08-31（Tue）│
カテゴリ：INDEX & Profile

Pagetop ↑

« next ホーム prev »

08 | 2023/09 | 10
日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

ほんっとにはじめての HTML5 と CSS3

HTML要素 索引

A

B

C

D

E

F

H

I

K

L

M

N

O

P

Q

R

S

T

U

V

W

その他

初心者にも使いやすい（と思う）レンタルサーバー

HTML要素　索引