• 3月, 金, 2023
  • HTML
要素（画像、動画、音声、フォーム）

media属性

media属性の値説明
all全てのメディア（デフォルト）
screen一般的なディスプレイ
printプリンタ
projectionプロジェクター
handheld携帯電話などの小さな機器
braille点字ディスプレイ
embossed展示プリンタ
speech音声読み上げソフト
ttyターミナル
tvテレビ

media要素

img要素

属性
srcデータのアドレス（必須）
alt画像が利用できない場合に代わりに使用されるテキスト
限定的な場合で省略可能
srcset候補画像　…　URLと記述子
sizesメディアクエリと表示幅
width
height		幅、高さ（整数）
  • 「x」は必ず小文字
  • 浮動小数点数
  • デフォルト値は「1x」

picture要素

picture要素は子要素にsource要素とimg要素をもち、画面幅にあわせて画像を切り替えて表示することができます。

CSSのdisplayプロパティを使い、表示・非表示を切り替える場合と違い、最適な画像のみ読みこむので、不要な画像の読み込みによる表示速度の低下が起きません。

<picture>
  <source media="(min-width: 961px)" srcset="img-pc.jpg">
  <source media="(min-width: 641px)" srcset="img-medium.jpg">
  <img src="img-small.jpg">
</picture>
  • imgは1個必須
  • sourceは0個以上

source要素

picture要素内のsource要素に指定可能な属性

source要素にsrc属性は指定できない

属性
media画像の使用条件　メディアクエリ
srcset候補画像　…　URLと記述子
必須
sizesメディアクエリと表示幅
type画像の種類　…　MINEタイプ
width
height		幅、高さ（整数）

video、audio要素内のsource要素に指定可能な属性

  • src
  • crossorigin
  • poster
  • preload
  • autoplay（論理属性）
  • loop（論理属性）
  • muted（論理属性）
  • controls（論理属性）
  • width
  • height
属性
srcデータのアドレス
必須
type画像の種類　…　MINEタイプ

audio要素

video要素

video要素で指定可能な属性

  • autoplay：自動再生
  • loop：ループ再生
  • muted：ミュート
  • controls：コントロール表示
  • playsinline：インライン再生
  • preload：事前読み込み
  • poster：サムネイル画像

＜javascriptで操作可能＞

  • コンテンツの再読み込み
  • 再生開始、中断
  • 再生位置の変更

＜データを取得利用＞

  • コンテンツが再生・早送り可能な状態か
  • 再生メニューの表示、非表示
  • ネットワークの状態
  • エラー内容
  • コンテンツの場所
  • コンテンツの長さ
  • 音量（0〜1）
  • トラック情報
<video controls>
 <source src="〇〇/〇〇" type="video/〇〇">
 <source src="〇〇/〇〇" type="video/〇〇">
</video>

コーデック

ファイルを圧縮・変換するためのアルゴリズム

オーディオコーデック　…　AAC（スタンダード）、MP3（古い動画圧縮形式）、Vorbis（Google陣営の標準）
ビデオコーデック　…　H.264（最新規格）、VP8、VP9（Google陣営の標準）、Theora（低普及、主にOGGコンテナで利用）

コンテナ

複数のコーデック（圧縮変換アルゴリズム）、データの種類をまとめたもの

＜video要素がサポートしているコンテナ＞

  • WebM
  • MP4
  • Ogg
ファイル形式（コンテナ）拡張子MINEタイプ
MPEG
古い動画形式		.mpg .mpegvideo/mpeg
MP4.mp4video/mp4
WebM
Google陣営の標準動画形式		.webmvideo/webm
Ogg
低普及		.ogvvideo/ogg
QuickTime.movvideo/quicktime
ファイル形式（コンテナ）拡張子MINEタイプ
MP3.mp3audio/mpeg
AAC.m4aaudio/aac
Ogg.oggaudio/ogg
WAVE.wavaudio/wav

track要素

  • audio要素もしくはvideo要素の子要素
  • 外部テキスト・トラックを指定する空要素
    テキスト用ファイル（WebVTT：Web Video Text Tracks）に、hh:mm:ss:tttの時間単位で指定

canvas要素

  • JavaScriptで図を作成できる要素
  • ビットマップで描画
  • ベクター画像の描画はできない
  • 拡大縮小で画像が荒くなる
  • PNG、GIF、JPEGなどの画像を利用できる
属性値説明
width正の整数描画できる領域の幅
（デフォルト300px）
height正の整数描画できる領域の高さ
（デフォルト150px）



form要素

＜<form>タグで定義したidを指定することで、<form>タグ外で定義したタグと、<form>の関連付けをします。＞

<form action="" method="post" id="form1">
<textarea name="in1" cols="30" rows="3" maxlength="90" required>
</textarea>
</form>
<input type="submit" name="test1" value="送信" form="form1">

＜部品が外部にあるとき＞
部品のform属性をform要素のid属性を指定して関連づけができる

【formの部品】

氏名：


【form要素】

<p>【formの部品】</p>
<p>氏名：<input type="text" name="name" form="test"></p>
<br>
<p>【form要素】</p>
<form method="post" action="" id="test">
<p><input type="submit" value="送信する"></p>
</form>

＜label要素にfor属性＞

<form action="" method="post">

<p>
<label for="name1">お名前1：</label>
<input type="text" id="name1" name="name1">
</p>

<p><input type="submit" value="送信"></p>

</form>
属性名
novalidate入力データのチェックを行わない
論理属性
autocomplete・前に入力した内容が入力候補として表示
・on（規定値）/off

input要素

属性名
typeフォーム部品の種類
accepttype=”file”のとき受付可能なファイル
MINEタイプ（カンマ区切り）
autocomplete要素のオートコンプリート機能
formフォーム部品を特定のform要素（id属性の値で指定）と関連づける
formnovalidate入力データのチェックを行わない
論理属性

＜autocompleteの属性値＞

属性値
on自動保管機能ON
off自動保管機能OFF
name氏名
email電子メール
new-password新規パスワード

＜input要素type属性一覧＞

text : password : search : email : url : tel : number : range : checkbox : radio : submit : reset : button : image（画像ボタン） : file : color : range : date : month : week : time : datetime-local（タイムゾーンなし） : hidden（表示させず送信する） :
type属性
email・「@」をがないと警告が出る
range・スライダー
file・accept=”MIMEタイプ”　…　ファイルの種類
・multiple=”論理属性”　…　複数データの許可
・required=”論理属性”　…　入力・選択を必須に

textarea要素

属性
cols1行に入力可能な文字数
rows入力欄の行数
resize・none　…　リサイズ不可。
・horizontal　…　水平方向のみリサイズ可。
・vertical　…　垂直方向のみリサイズ可。
・both　…　水平・垂直方向ともリサイズ可。（デフォルト）

capture 属性

値説明
userスマートフォンの画面側のカメラやマイクが起動
environment外向きのカメラやマイク起動

progress要素

  • 進捗状況
  • value=”〇〇”　…　現在の値
  • max=“〇〇”　…　全体の値
<p>progress要素　…　進捗状況 
<progress value="40" max="100">40%</progress>
</p>
<p>progress要素　…　value属性指定なし
<progress>処理中</progress>
</p>
<p>meter要素　…　〇〇の測定値
<meter value="91200000000" min="0" max="160000000000">91,200,000,000バイト使用</meter>
</p>

meter要素

value=””現在の値
必要属性
min=””最小値
max=””最大値
low=””低い領域
high=””高い領域
optimum=””最適な値

keygen

  • 公開鍵暗号方式
  •  秘密キーはローカル環境に保存され、公開キーはサーバーに送信
<form>
  <keygen name="key"/>
  <button>送信</button>
</form>

datalist要素

  • option要素でドロップダウン選択肢を作成
  • 【関連づける】datalist要素のid要素とinput要素のlist属性
<p>
 <label>
  学習している資格：
 <input type="text" list="study">
 <datalist id="study">
  <option value="HTMLプロフェッショナル認定試験">
  <option value="CCNA">
 </datalist>
 </label>
</p>

label要素

＜label要素とフォーム部の関連付け＞

（labelの中にフォームを入れる）

<label><input type="radio" name="form1" value="father">父</label>
<label><input type="radio" name="form1" value="mother">母</label>
（フォームのid属性を指定　→　labelのfor属性でid属性を関連付ける）

<input type="radio" name="form1" value="father" id="id1">
<label for="id1">父</label>

fieldset要素

  • フォーム関連の要素をグループ化

legend要素

  • fieldset要素のグループ名（キャプション）を表示させる

select要素

  • option要素でドロップダウン選択肢を作成
  • 選択肢以外は入力不可
<select id="drink">
  <option value="0">選択してください</option>
  <option value="1">オレンジジュース</option>
  <option value="2">コーヒー</option>
  <option value="3">紅茶</option>
  <option value="4">ウーロン茶</option>
</select>

embed要素

プラグインを使用して外部データを組み込むための空要素

object要素

  • 様々な形式の外部データを組み込みます
  • data属性でファイルを指定し、type属性でMIMEタイプを指定

param要素

  • この要素は廃止されてる
  • object要素によって呼び出されたプラグインのパラメータを設定
  • object要素の子要素

data属性

  • カスタムデータ属性と呼ばれる
  • JavaScriptと組み合わせて使う
  • 制限あり
    • xmlで始めない
    • コロン (:) 　×
    • 大文字のAからZ　×
<div data-〇〇=”□□”>サンプル</div>

セレクタ[data-○○=”□□”]{
　プロパティ：値；
}

kbd要素

キーボード入力

samp要素

コンピュータからの出力