HTML 過去問復習

よーた


HTML5の要素について

HTML5の特徴:

  1. HTML5では、要素が意味的に正しく使用されていることが重要
    例えばHTML4以前からdiv, nav, spanなどがある。
    これらは元々コンテンツを分類するために作られていたが、HTML5では、
    section, article, aside, header, main, footerなどさらに細かい要素が出てきたのでこれらを極力使うこと

divでコンテンツをデザインに使うのは最後の手段。

CSSがなかった時代はHTML要素でスタイルを作っていたがもうそういう時代じゃない。
見出しなら、見出し要素を、
divの代わりにsectionなどを、
を使う

  1. コンテンツモデルとは、各要素が内包できるコンテンツを定義したもの

  2. 要素は7種類のカテゴリに分類される
    HTML5ではほとんどの要素が7つのコンテンツモデルに分類される

リンクタイプについて

現在のドキュメントとリンク先の外部ファイルの関連。

  1. rel="stylesheet" 外部スタイルシート読み込み
    <link rel="stylesheet" href="test.css" type="text/css">

  2. rel="alternate" hreflangと組わせて別言語のページを示す
    <link rel="alternate" hreflang="en" href="https://test.com/en/">

  3. 大文字でも小文字でも両方指定できる

  4. link要素、a要素、area要素のrel属性は「半角スペース区切り」で「複数のリンクタイプ」を指定できる

例) stylesheetとiconの2つのリンクタイプを指定する
<link rel="stylesheet icon" href="styles.css" type="text/css" />

フラグメント

<h1 id="top">トップ</h1>

<a href="#top">トップへ行く</a>

グローバル属性

全てのHTML要素に指定できる属性の事

以下はグローバル属性でない例

  1. type

  2. rel

グローバル属性の例

  1. id

  2. class

  3. dir

  4. hidden

  5. lang

  6. style

  7. title

id属性 / class属性

id属性の特徴:

  1. 要素に固有の識別子を一意に指定するグローバル属性

  2. 空白文字を含んではいけない

class属性の特徴:

  1. 要素の種類、分類に指定するグローバル属性

  2. 複数の要素に同じclass名を指定できる

  3. 空白文字で区切ることで、class属性に複数の値を指定できる

HTML5の7つのコンテンツモデル

  1. セクショニングコンテンツ
    section
    article
    aside
    nav

  2. ヘディングコンテンツ
    h1~h6
    hgroup

  3. 組み込みコンテンツ
    video
    audio
    iframe
    img
    embed
    math
    object
    svg

  4. メタデータコンテンツ
    base
    command
    link
    meta
    noscript
    script
    style
    title

HTML5のセクション

セクションとは見出しとそれに関連するコンテンツによって構成される
ドキュメントの章や節を表す

セクションの構成:

  1. 見出し

  2. コンテンツ

セクション構造の決定ルール:

  1. セクション内で初めて現れる見出しが、そのセクションの見出しとなる

  2. 1の見出しと同じ、あるいは上のレベルの見出しは新しいセクションを始める

  3. 1の見出しよりレベルが低い見出しは、そのセクション内のサブセクションを始める

セクションの特徴:

  1. セクションはbody, section, article, aside, navタグで明示的に定義できる

  2. セクションは各々がそれ独自の見出し階層を持つことができる

  3. セクションを入れ子にした場合、内側のセクションはh1要素を持つことが出来る

  4. headerとfooterの場所は明確に決まってない
    headerを必ず冒頭に、footerを最後に配置しなくても良い

h1-h6によって暗黙的にセクションを定義できる
body, section, article, aside, navによって明示的なセクションの定義が出来る

セクションの要素 article, section, nav, aside, header, footer, address

article
記事、ブログの投稿など。
ドキュメント内で自己完結したもの
article要素を入れ子にした場合、内側の要素と外側の要素は関連した記事を表す。
header
導入部分やナビゲーション。
footer
関連ドキュメントへのリンクや著作権情報など。
address要素やblockquote, q, cite要素も使うことがある
section
章立てや論文の番号付きセクションなど。
論理的な意味を持つコンテンツのまとまり。
aside
広告やサイドバーなど。
メインコンテンツと関連性の低いコンテンツ
address
問い合わせ情報
h1~h6
該当セクションの見出し。
新しいセクションの開始を表す。
なので、セクションを生成しない小見出しや副題には使わない。

main要素

mainの特徴:

  1. 理に適えば、ドキュメント内に複数のmain要素があってもいい

  2. フローコンテンツであり、ドキュメントのアウトラインに影響を与えない

  3. main要素はドキュメントのメインコンテンツである
    ページ固有のコンテンツを含む

div要素について

コンテンツの章立てには極力使わないこと
section, article, asideなど適切な要素を使うこと

こういう使い方はダメ:

  1. articleとかよりもdivを優先的に使う

  2. サイドバーや広告のマークアップに使う

  3. article要素内で、章立てに使う

divは他に適切な要素がない時の最終手段。

span要素

span要素はdiv、nav同様にそれ自身では何も意味しない。
class, id, lang属性を組み合わせて、スタイルやスクリプトの適用対象を指定する。

メモ: 強調や他のテキストを区別したいテキストがあれば、他の適した要素を使うこと

特徴:

  1. class属性と組み合わせて、スタイルの適用範囲を指定する

  2. id属性と組み合わせて、スクリプトの適用対象を指定する

  3. lang属性と組み合わせて、他の言語で書かれた範囲であることを示す

書式方向 bdo/bdi

bdoはタグで囲った文字列をdir属性で指定した方向にする
bdiはタグで囲った個所の読み方の方向を他の文字列と変える

<p>Here is some Hebrew text: <bdo dir="rtl">שלום עולם</bdo></p>

<p>Here is some Hebrew text: <bdi>שלום עולם</bdi></p>

振り仮名 ruby rb rt rp rcp

ruby要素内に、漢字とルビを書く

rb: ルビを振る漢字
rt: ルビ

rp: rubyが使えない場合に()内の文字を表示する
代替テキスト
<rp>(</rp>
<rt>ルビ</rt>
<rp>)</rp>

rtc
複数のrtをまとめる
<rtc>
<rt>kan</rt>
<rt>ji</rt>
</rtc>

<ruby>
<rb>大熊猫</rb>
<rt>ジャイアントパンダ</rt>

<rp>(</rp><rt>ジャイアントパンダ</rt><rp>)</rp>

</ruby>

こういう書き方もできる

・rbを省略してrtのみ書く
<ruby>
大熊猫
<rt>ジャイアントパンダ</rt>
</ruby>

・rtの前後をrp(代替テキストを指定)で囲む
<ruby>
大熊猫
<rp>(</rp>
<rt>ジャイアントパンダ</rt>
<rp>)</rp>
</ruby>

・rtcで別の振り仮名を記載
<ruby>
大熊猫
<rt>ジャイアントパンダ</rt>
<rtc>idiom</rtc>
</ruby>

更にこういう書き方もできる。

メモ: rb, rt, rp要素はその直後にrb, rt, rpが続く、または、ruby要素内にそれ以上の要素が存在しないなら、
省略可能。
メモ: rb, rtは終了タグを省略できる
メモ: rb, rtを省略しても「対象の文字列」と「ふりがな」の数が合えば正常になる
<ruby>
合言葉
<rt>あいことば
</ruby>

<ruby>
合
<rb>言</rb>
<rb>葉</rb>
<rt>あい</rt>
<rt>こと</rt>
<rt>ば</rt>
</ruby>

<ruby>
合
<rb>言
<rb>葉
<rt>あい
<rt>こと
<rt>ば
</ruby>

間違っている例

  1. rpで振り仮名の文字を記載している

  2. rtで代替テキストの記載

  3. 1つのrbに対して複数のrtを書いている
    <ruby>
    合言葉
    <rt>あい
    <rt>こと
    <rt>ば
    </ruby>

ドキュメントを追加・修正 ins/del要素

<p>
<ins>ここに下線が引かれる</ins>

<del>ここに取り消し線が引かれる</del>
</p>

それぞれ、下線、中央線が引かれるがこれはあくまで文書の追加と修正を表す。
単純に線が引きたいだけならCSSのtext-decorationを使うこと。

figure/figcaption 要素

figure要素
自己完結型の図表なので、本文から切り離すことが出来る。

figure要素内のアウトラインは、祖先のアウトラインに影響を与えない

figcaption要素
図表のキャプション

figure要素内にimg, figcaptionがある。

  1. figcaptionをfigure内に書いて、キャプションを持たせることが出来る

  2. figcaptionが必須じゃない

  3. figcaptionはfigure要素内ならどこでも配置できる

<figure>
<img src="test.jpg" alt="写真の説明文">
<figcaption>画像のキャプション</figcaption>
</figure>

テーブル要素 table

table要素内で要素を記述する順序:
table
caption 任意
colgroup 0個以上
thead 任意
tbody 0個以上、あるいはtr,tdを1個以上
tfoot 任意

table要素の中身:
caption 表のタイトル
colgroup 列のグループ化
thead ヘッダー
tbody 表の本体
tfoot フッター

table要素の注意点:

  1. テーブル要素内には、scriptやtemplate要素を配置できる

borderを付けたら枠線がつく
<table border="1">
<tbody>
<tr>
<th>種類</th>
<th>説明</th>
</tr>
<tr>
<td>Data 1-1</td>
<td>Data 1-2</td>
</tr>
</tbody>
</table>

リスト ul/li ol/li dl/dt/dd

リスト ul/li

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

番号付きリスト ol/li

type属性: マーカーの種類として、
　　　　　　1,a,A,i,I を指定できる
start属性 連番の開始番号
reversed 逆順にする(true/false)

<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>

説明リスト dl/dt/dd

<dl>
<dt>用語1</dt>
<dd>説明1</dd>

<dt>用語2</dt>
<dd>説明2</dd>

</dl>

要素名の組み合わせ

hr要素
水平の区切り線。

段落レベルのテーマの変わり目を表す

p要素
ドキュメント内の段落を表す
(ただし、より限定的な使い方をする要素があればそちらを使うこと)

blockquote要素
引用

q要素
cite要素

pre要素
整形済のテキストであることを示す

適切なマークアップの例

  1. strong要素: 重要なテキスト

  2. del要素: 取り消された用語

  3. small要素: ライセンス要件

  4. s要素: 取り消された内容

  5. i要素: 技術用語

strong要素 em要素 b要素 それぞれの違い

  1. strong要素 -> 重要なテキスト
    文字列が「重要」「申告」「緊急」であることを示す

  2. em要素 -> 文字列の「強調」に使う

適切な用途で要素を使うこと
他に適切な要素がない最終手段の場合のみ、b要素を使うこと

<strong>文字列</strong>

<em>文字列</em>

<b>文字列</b>

s要素

既に「正しくない」か、「関連性がなくなった情報」を表す

メモ: s要素もdel同様に中央線を引く
しかし、情報の訂正のために削除されたならdel要素を使うこと

<s>今なら1000円です</s>

small要素

以下のような小さい文字で表記されることを表す

  1. Copyright

  2. 免責事項

  3. 警告

  4. 法的規則

  5. 帰属

  6. ライセンス要件

mark要素、span要素、u要素 文のハイライトについて

mark要素 -> 目立たせたいテキスト
span要素 -> 適用対象の文を指定
u要素 -> 伝わりにくいテキスト、なじみの薄い単語

使用例)

  1. webサイトの検索結果を表示する際、検索キーワードをハイライトする
    -> mark要素

  2. 引用文において引用者が重要だと思う箇所を目立たせる
    -> mark要素

  3. スペルミスのマークアップ
    -> u要素

  4. ソースコード等の構文のハイライト
    -> span要素

  5. 中国語で固有名詞をマークアップ
    -> u要素

引用 blockquote / q / cite

blokquote要素
　改行が必要な長い文を引用

q要素
　短い文を引用

cite要素
　出典

<blockquote>
<q>引用</q>
<cite>引用元</cite>
</blockquote>

<blockquote>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaa
</blockquote>

data要素 機械が識別可能なデータを加える

  1. value属性が必須

  2. 終了タグは省略できない

<data value="機械が識別可能なデータ名">テキスト</data>

<data value="INTRO101">入門クラス</data>

time要素 日時を表す

特徴:

  1. time要素内かdatetime属性に日時を指定する
    <time>正月</time>
    とだけ書くのはダメ

  2. 年月日は「ハイフン」で区切るの一般的

  3. 年月日と自国の間は「T」か「ハイフン」で区切る

<time datetime="yyyy-mm-dd hh:MM">日時</time>

<time datetime="1992-12-03 12:34:45">誕生日</time>

<time>2023-01-01</time>
<time datetime="2023-01-01">正月</time>

abbr / dfn 略語, 用語の定義

abbr 略語

dfn要素 用語の定義

  1. 用語の定義を示す
    内容が定義の対象となることを示す

<dfn title="HyperText Markup Language">HTML</dfn>

code要素

プログラミング言語のスニペットを表す

<code></code>

samp要素

他のプログラムやコンピューティングシステムからの出力を表す

<samp></samp>

kbd要素

ユーザからの入力を表す
キーボードだけでなく、音声入力、メニュー選択も含む

<kbd></kdb>

<kbd>入力方法</kbd>
kbd要素を入れ子にして実際のキー入力を表す
<p><kbd><kbd>F12</kbd></kbd>キーで指導する</p>
sampを入れ子にすることでシステムの出力に基づいた入力を意味する
<kbd><samp>契約詳細</samp></kbd>

br要素 / wbr要素

<br>
<wbr>

br要素

改行を表す
改行がコンテンツの一部となっているテキスト(詩など)で使う

注意: 意味的に段落として分割するならp要素を使うこと
brを行間の調整に使わないこと

wbr要素

改行しても良い箇所を探す

英単語で使う(日本語、中国語、韓国語は英語の改行ルールと違うのでwbrでも改行されない)

注意点:
wbrは指定した個所で必ず改行されるわけじゃない
テキストの長さや表示領域の幅によって改行されないことがある

br要素とwbr要素の違い

script要素

特徴:

  1. ドキュメント内にスクリプトを埋め込む
    head要素、body要素でも配置できる

  2. JavaScriptを使用する場合は、type="text/javascript" を省略できる

  3. スクリプト実行タイミングを制御できる
    async属性、defer属性を使う

<script>
スクリプト
</script>

noscript要素

スクリプトが向こうの環境で実行する内容を指定する

特徴:

  1. HTMLのみで有効
    XHTMLでは使えない

details要素 / summary要素

HTML5で追加された

特徴:

  1. ディスクロージャーウィジェットを作成する
    ユーザの操作によってウィジェットを開閉する

  2. detailsがディスクロージャーウィジェットを表す

  3. summaryは開示ウィジェットの見出しを表す

  4. summaryはウィジェットを閉じても表示される

  5. open属性をdetailsに指定すると開いたままになる

<details>
<summary>Click to show/hide details</summary>
<p>This is some detailed content that can be toggled.</p>
</details>

canvas要素

WebGL API, Canvas APIでアニメーションやグラフィックスを表示する

特徴:

  1. Canvas要素だけでは何も起こらないので、<script>で設定する

  2. width, heightを指定できる

  3. scr属性はない

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #000 ;"></canvas>

<script>
// Get the canvas element
var canvas = document.getElementById("myCanvas");

// Get the drawing context
var ctx = canvas.getContext("2d");

// Draw a red rectangle
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 100, 50);

// Draw a blue circle
ctx.beginPath();
ctx.arc(200, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
ctx.closePath();

</script>

sup/sub

superscript(上付き文字)
subscript(下付き文字)


上付き文字 sup

<pre>
<var>
x<sup>n</sup> +y<sup>n</sup> =z<sup>n</sup>
</var>
は数学最大の難問であるフェルマーの最終定理だ
</pre>

下付き文字 sub

<pre>
二酸化炭素は記号では<var>CO <sub>2</sub> </var>という言う
</pre>

template

その範囲がスクリプトによって生成される部分であることを示す

テンプレート作成
ただ作成しただけでは表示されない

<template id="testTemplate">
<p>template要素の例</p>
</template>

<div id="copyHereTemplate"></div>

<script>
// テンプレート(#testTemplate)をコピーして、
// div(#copyHereTemplate)に配置する

// div(#copyHereTemplate)にtemplate要素の例と表示される

// id=testTemplateのデータ取得
// importNodeは指定されたノードを文書内の別の文書または同じ文書内の異なる位置にインポートするためのメソッド

const template = document.getElementById('testTemplate');
const clone = document.importNode(template.content, true);
document.getElementById('copyHereTemplate').appendChild(clone);

</script>

img

webページに画像を埋め込む

  1. 最も適切な記述は
    <img src="ファイル名" alt="説明文">

  2. alt属性は省略できるけど、音声読み上げブラウザで閲覧する場合を考慮して,alt属性を入れたほうが良い
    <img src="ファイル名">

  3. border属性は廃止されている
    下記のような書き方は出来ない
    <img src="ファイル名" alt="説明文" border="0">

picture要素

要素内のimg要素に対して複数のリソースを指定する

<picture>
<source>
<source>
<img>
</picture

特徴:

  1. img要素をsource要素の前に配置すると、画像の切り替えが行われない

  2. ブラウザがpicture要素に「対応してない」なら、
    img要素のみが表示される

<picture>
<source srcset="sample1.png" media="(min-width: 600px)">
<source srcset="sample2.png" media="(min-width: 300px)">

<img src="sample3.jpg" alt="picture要素未対応のブラウザで表示する説明">
</picture>

video / audio 動画 / 音声

videoとaudioの共通点

  1. 属性
    src 動画ファイルのパス
    controls コントロールの表示(再生ボタンなど)
    autoplay 自動再生
    loop ループ再生(繰り返し再生)
    muted ミュート(音量を0に設定)

  2. ブラウザがvideo audioに対応してないなら「要素内の文字列」を表示する

source

<source src="動画/音声ファイル名" type="">

ファイル形式とMIMEタイプ
.mp4 video/mp4
.ogv video/ogg
.webm video/webm
.mov video/quicktime

注意: 「.ovg」のタイプは「ogg」
「.mov」のタイプは「quicktime」

<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm">

<source src="audio.mp3" type="audio/mp3">
<source src="audio.ogg" type="audio/ogg">

video

  1. 上記以外の属性
    width
    height
    poster 動画を再生できない場合に表示する画像
    preload 動画を事前に読み込みかどうか

<audio controls autoplay loop muted poster="poster_image.jpg" preload="auto">
<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm">
</video>

  1. track要素を使えば、字幕・説明・キャプションを付けられる
    src データのファイル
    拡張子はvtt(video tracking text)
    srclang ファイルの言語
    kind　テキストトラックの種類
    　　kind="subtitles" 字幕
    kind="captions" キャプション
    kind="descriptions" 説明
    kind="chapters" チャプター
    kind="metadata" メタデータ
    label トラックの選択時に表示するラベル
    default 環境に適したトラックがない場合のデフォルトを指定

<track src="ファイル名.vtt" kind="" srclang="言語" label="">

<audio controls autoplay loop muted poster="poster_image.jpg" preload="auto">
<source src="audio_file.mp3" type="audio/mpeg">
<source src="audio_file.ogg" type="audio/ogg">

<track src="captions_en.vtt" kind="captions" srclang="en" label="English">
</audio>

audio

  1. 属性は上記
    videoみたいなwidthとheightはない

<audio controls autoplay loop muted>
<source src="audio_file.mp3" type="audio/mpeg">
<source src="audio_file.ogg" type="audio/ogg">
</audio>

ビデオコーデック

動画データを圧縮/解凍するアルゴリズム

特徴:

  1. 動画データの圧縮・解凍に使う

  2. 代表的なビデオコーデックはH.264

  3. 動画用と音声用でビデオコーデックは違う

  4. 拡張子が同じでも、ビデオコーデックが異なる場合がある

  5. ブライ座が対応するビデオコーデックは標準化されてない
    ブラウザごとに対応するコーデックが異なる

フォーム

input

HTML5で追加された要素

  1. number

  2. email

  3. tel

  4. url

もしブラウザがHTML5で追加されたinputに対応してないなら、
-> 値に「text」が指定された場合と同様に表示される

メモ: inputのtype属性の初期値は「text」であるため

button

type属性にボタンの種類を指定する

typeに指定できる値

  1. submit

  2. reset

  3. button

  4. menu

<button type="submit">送信</button>

イベントハンドラ属性 onclick属性にJavaScriptの関数呼び出しを指定することが出来る

meter

要素は範囲内の数値を表し、value属性でその値を指定

<meter min="0" max="30000" value="15000">59%</meter>

progress

進捗を表示し、value属性で進捗の値を指定

<progress value="70" max="100">70%</progress>

fieldset / legend フォームの入力部品をグループ化してキャプションを設定する

<form>
<fieldset>
<legend>連絡先情報</legend>
<label for="name">名前:</label>
<input type="text" id="name" name="name"><br>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email"><br>
<label for="phone">電話番号:</label>
<input type="tel" id="phone" name="phone"><br>
</fieldset>

iframe

HTML5で廃止されてない

  1. iframe

HTML5で廃止された

  1. frame

  2. frameset

  3. noframes

  4. center

iframeの特徴

  1. srcにファイルのパスを指定する

  2. height, widthを指定できる

  3. webページ内に別ページの広告などを挿入するために使われる

  4. iframe要素はbody内で使用できる

ディスクロージャーウィジェット

ディスクロージャーウィジェットは開示ウィジェットとも言う
ユーザの操作によってウィジェットを開閉する

details要素とsummary要素を使う

<details>
<summary>詳細を表示</summary>
<p>ここに詳細が表示されます。</p>
</details>

output

計算結果などの出力を表示します。for属性でどのフォーム部品に関連するかを指定する。

<form oninput="outputのname.value=parseInt(input1のname.value)+parseInt(input2のname.value)">
<input type="number" name="num1" value="0">
<input type="number" name="num2" value="0">

<output name="result" for="num1 num2">0</output>
</form>

keygen

公開鍵および秘密鍵のペアを生成するための要素。ただし、この要素は非推奨とされている、代替手段が推奨される。

<keygen name="公開鍵"></keygen>

メニュー

menu要素はHTML5.1で追加され、HTML5.2で廃止された

contextmenu属性

contextmenu属性
コンテキストメニューと関連付ける要素を指定する
<p contextmenu="displayall">.</p>

メモ: menu要素の廃止に伴い、contextmenu属性はHTML5.2で廃止された

menu要素

特徴:

  1. 子要素してmenuitem要素を用いる

  2. コンテキストメニューを作成する場合、menu要素のtype属性に"context"を指定する

  3. menu要素の子要素としてhr要素を指定すると、区切り線を設定できる

  4. menu要素を入れ子にすることで、コンテキストメニューを階層化できる

この記事が気に入ったらサポートをしてみませんか？