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

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

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要素で送信・リセット・汎用ボタンを自由に作ろう

C

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)

D

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>と一緒に使おう

E

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

F

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使用)

H

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

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>を使おう

K

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

L

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)を表示させよう

M

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要素

N

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

O

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

P

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

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

R

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

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スプライト

T

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

V

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

W

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 が使えます。
初心者が始めやすいサーバだと思います。

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

スポンサーリンク

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
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
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.