つくばホームページ制作アドワークス｜茨城県土浦市

<iframe>…… インラインフレームを作る

<iframe>タグは、インラインフレームを作る際に使用します。インラインフレームとは、文書内に別の文書などの閲覧コンテンツを入れ子に配置したもののことです。

src属性は、文書内に別の文書をフレーム表示する際に使用します。src属性の値には、フレーム表示する文書のURLを指定します。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML5では、frameborder属性・marginheight属性・marginwidth属性・scrolling属性・longdesc属性が廃止されています。一方で、新しくsrcdoc属性・sandbox属性・seamless属性が追加されています。

■フレーム表示する内容をsrcdoc属性の値として指定

srcdoc属性は、フレーム表示する内容を属性値として指定する際に使用します。指定する内容の中にダブルクォーテーション（ " ）などの引用符が出てくる場合には&quot;とエスケープします。また、アンパサンド（ & ）が出てくる場合には、&amp;amp;と二重エスケープする必要があります。

src属性とsrcdoc属性を同時に指定した場合には、srcdoc属性が優先されます。srcdoc属性を使用すれば、インラインフレーム用の別文書を用意する必要が無くなりますが、srcdoc属性がサポートされていないブラウザを考慮するなら、別文書を用意してsrc属性も指定してやるとアクセシビリティーが高まるでしょう。

[html]
<iframe srcdoc="<p>フレーム表示される内容です。詳しくは、<a href=&quot;http://xxxxx.xxx/?p=1&amp;amp;r=1&quot;>こちらのページ</a>をご確認ください。</p>" src="http://xxxxx.xxx/"></iframe>
[/html]

■フレーム内コンテンツの表示にsandbox属性で制限を加える

sandbox属性は、悪意あるコンテンツから被害を受けるのを避けるために、フレーム内コンテンツの表示に制限を加える際に使用します。sandbox属性を指定すると、そのフレームのコンテンツは出処が別個のものと見なされて、フォーム・スクリプト・他の閲覧コンテンツへのリンク・プラグインが無効となります。

sandbox属性の値として指定できるのは、allow-same-origin・allow-forms・allow-scriptsの３種類です。

allow-same-origin

フレーム内のコンテンツの出処が、親ページと同じものとされる。

allow-forms

フレーム内のコンテンツのフォームを有効にする。

allow-scripts

フレーム内のコンテンツのスクリプトを有効にする。ただし、ポップアップは無効。

以下の使用例では、sandbox属性に３つの値すべてを指定しています。この場合、フレーム内のコンテンツの出処は同じものと見なされ、フォームとスクリプトは有効になります。ただし、ポップアップとプラグインは無効となります。

[html]
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://example.com/"></iframe>
[/html]

■seamless属性を指定すると、親ページの一部のように表示させられる

seamless属性は、フレーム内のコンテンツを、あたかも親ページの一部のように表示させる際に使用します。サポートされたブラウザでは、それがフレームかどうか一見しただけでは分からないような境界線の無い表示になると思われます。

逆に言えば、seamless属性が無ければインラインフレームには境界線が表示されるということになるのかもしれません。
（HTML5ではframeborder属性が廃止されているので）

■<iframe>～</iframe>の内容は何も意味を持たない

HTML4.01では、<iframe>～</iframe>の間には、インラインフレームをサポートしていない環境向けの内容を記述することになっていました。HTML5では、<iframe>～</iframe>に内容を指定しても、何も意味を持たないことになっています。

ただし、インラインフレームをサポートしていない旧いブラウザでは、<iframe>～</iframe>の内容がアクセシビリティーの向上に役立つでしょう。こうした環境に配慮するなら、<iframe>～</iframe>の中に何らかの内容を含めても良いでしょう。

■使用できる属性

src属性

フレーム表示する文書のURLを指定

srcdoc属性

フレーム表示する内容を属性値として指定

name属性

フレーム名を指定

seamless属性

フレーム内のコンテンツを親ページの一部のように表示

sandbox属性

フレーム内のコンテンツの表示に制限を加える（allow-same-origin・allow-forms・allow-scripts）

width属性

フレームの横幅を指定

height属性

フレームの高さを指定

■HTML5での使用例

[html]
<article>
<footer><a href="/users/ch">編集長</a>　<time pubdate>2009-08-21T23:35Z</time></footer><br>
<iframe seamless sandbox="allow-same-origin" srcdoc="<p>表紙の写真はもう決まった?</p>"></iframe>
</article>
[/html]

参考：http://www.htmq.com/html5/iframe.shtml

<img>…… 画像を表示する

<img>タグは、画像を表示する際に使用します。必須属性のsrc属性で画像ファイルのURLを指定します。

一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。

alt属性には、画像が利用できない環境向けのテキストを指定します。HTML5ではalt属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。

<img>にtitle属性を指定すると、その値が画像のキャプション情報となります。また、<legend>を子に持つ<figure>～</figure>の中に、<img>を子として配置した場合には、その最初の<legend>～</legend>の内容が画像のキャプション情報となります。ここで言うキャプション情報とは、画像のタイトルや説明のための文字情報のことです。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML4.01では、img要素には画像のレイアウトを指定するための align属性・border属性・hspace属性・vspace属性が、非推奨とされながらも用意されていました。HTML5では、これらの属性は廃止されています。画像のレイアウト指定にはCSSを使用してください。

また、HTML4.01やXHTML1.1ではimg要素のalt属性は必須でしたが、HTML5では必須ではありません。HTML5ではimg要素にalt属性が無くても、src属性さえ指定されていればコンテンツの一部として意味を持ちます。ただし、img要素にalt属性を指定するかどうか、何を指定するかによって、img要素の意味が変化します。

alt属性に空文字を指定すると、文書内の他のコンテンツを装飾または補足するものとなります。例えば、以下の使用例では、メニュー項目の先頭に付ける装飾用のアイコンに alt=”” と空文字を指定しています。

逆に、画像自体をロゴとして機能させるには空文字ではなく、適切な文字列を指定してやる必要があります。この場合には、alt=”ロゴ” といった抽象的な内容ではなく、alt属性に指定する文字列がそのロゴの実体を表すような内容にしなくてはなりません。以下の使用例では、alt=”The XYZ company” と、会社名そのものを指定しています。

■使用できる属性

src属性

画像ファイルのURLを指定（必須属性）

alt属性

画像が利用できない環境向けのテキストを指定

usemap属性

イメージマップを利用する場合に、利用するイメージマップ名を指定

ismap属性

サーバサイド・イメージマップを指定

width属性

イメージの幅を指定

height属性

イメージの高さを指定

■HTML5での使用例

[html]
<h1><img src="images/logo_xyz.gif" alt="The XYZ company"></h1>
<nav>
<p><a href="help.html"><img src="images/icon_help.png" alt="">ヘルプ</a></p>
<p><a href="map.html"><img src="images/icon_map.png" alt="">サイトマップ</a></p>
</nav>
[/html]

参考：http://www.htmq.com/html5/img.shtml

<del>…… 削除された部分であることを示す

<del>タグは、削除された部分であることを示す際に使用します。

cite属性には、変更について説明する文書がある場合にそのURLを指定します。cite属性に指定するURLの文書が、例えば、会議の議事録のような長い文書になっている場合には、その文書内のどの部分が変更についての説明なのか分かるように、id属性で識別子を付けることが推奨されています。

datetime属性は、変更日時を指定する際に使用します。値はグローバル日時で指定します。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML4.01では、del要素の中にはブロックレベル要素を含めてはいけないことになっていました。HTML5ではブロックレベル要素という概念自体が廃止されており、
例えば、<del>～</del>の中に<p>を配置することもできるようになっています。

ただし、HTML5ではdel要素は、段落の境界にまたがるべきではないとされています。詳しくはins要素のページを参照してください。

■使用できる属性

cite属性

変更について説明するURLを指定

datetime属性

変更した日時をグローバル日時で指定

■HTML5での使用例

[html]
<h1>今週やることリスト</h1>
<ul>
<li>プレゼン資料を作成する</li>
<li><del datetime="2009-10-11T01:25-07:00">ソフトウェアのマニュアルを読む</del></li>
<li><del datetime="2009-10-10T23:38-07:00">ソフトウェアをインストールする</del></li>
<li>プリンタ用紙を買う</li>
</ul>
[/html]

参考：http://www.htmq.com/html5/del.shtml

<ins>…… 追加された部分であることを示す

<ins>タグは、追加された部分であることを示す際に使用します。

■使用できる属性

cite属性

変更について説明するURLを指定

datetime属性

変更した日時をグローバル日時で指定

cite属性には、変更について説明する文書がある場合にそのURLを指定します。cite属性に指定するURLの文書が、例えば、会議の議事録のような長い文書になっている場合には、その文書内のどの部分が変更についての説明なのか分かるように、id属性で識別子を付けることが推奨されています。

datetime属性は、変更日時を指定する際に使用します。値はグローバル日時で指定します。

■グローバル日時について

ここで言うグローバル日時（global date and time）とは、協定世界時（UTC）をベースに指定する日時のことです。UTC（Universal Time, Coordinated、協定世界時）とは、世界の公式な標準時刻のことです。天体観測から決定されるグリニッジ標準時（GMT）とほぼ同じですが、UTCはセシウム原子時計が刻む国際原子時をもとに決定されています。日本のローカル時刻はUTCに対して9時間進んでいるので、以下の書式でグローバル日時として指定します。

YYYY-MM-DDThh:mm:ssTZD

YYYY

年（4桁）

MM

月（2桁／01～12）

DD

日（2桁／01～31）

T

ここから時間が始まることを表す文字（大文字のT）

hh

時（2桁／00～23）

mm

分（2桁／00～59）

ss

秒（2桁／00～59）

TZD

タイムゾーン（Z,+hh:mm,-hh:mm）
Z …… UTCそのものであることを表す文字（大文字のZ）
+hh:mm …… UTCよりローカル時刻が進んでいる場合
-hh:mm …… UTCよりローカル時刻が遅れている場合

例えば、｢日本時間の2010年8月24日22時40分00秒｣を表す場合、｢2010-08-24T22:40:00+09:00｣のように記述します。最後の｢+09:00｣はUTCに対して9時間進んでいるという意味で、日本時間であることを表しています。

また、表す日時がUTCそのものの場合には、「2007-12-19T00:00Z」という具合に大文字のアルファベットのZを付けます。例えば、「2007-12-19T00:00Z」は、「協定世界時の2007年12月19日の深夜0時0分」という意味です。

必要な場合にはミリ秒単位の指定も可能です。日時の記述方法についての詳細は、W3Cのウェブページでご確認ください。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML4.01では、ins要素の中にはブロックレベル要素を含めてはいけないことになっていました。HTML5ではブロックレベル要素という概念自体が廃止されており、例えば、<ins>～</ins>の中に<p>を配置することもできるようになっています。

ただし、HTML5ではins要素は、段落の境界にまたがるべきではないとされています。

参考：http://www.htmq.com/html5/ins.shtml

<wbr>…… 改行しても良い位置を示す

<wbr>タグは、改行しても良い位置を示す際に使用します。

wbr要素の内容は、その前後のテキストの一部とは見なされません。例えば、「アグリゲイティバクター・アクチノミセテムコミタンス」という言葉が長いからといって、「アグリゲイティバクター・<wbr>アクチノミセテムコミタンス」のように指定してしまうと、改行の前後がそれぞれ別の言葉として解釈されてしまうかもしれません。

■HTML4.01からHTML5へのバージョンアップによる変更点

<wbr>は、もともとはNetscape Navigator独自の要素で、HTML4.01の仕様には取り入れられていませんが、すでに一部のブラウザでサポートされています。HTML5では、標準仕様として採用される予定です。

■HTML5での使用例

[html]
<p>
<b>wbr要素ありの場合</b><br>
She<wbr>Sells<wbr>Sea<wbr>Shells<wbr>By<wbr>The<wbr>Seashore.<wbr>The<wbr>Shells<wbr>She<wbr>Sells<wbr>Are<wbr>Surely<wbr>Seashells.<wbr>So<wbr>If<wbr>She<wbr>Sells<wbr>Shells<wbr>On<wbr>The<wbr>Seashore,<wbr>I’m<wbr>Sure<wbr>She<wbr>Sells<wbr>Seashore<wbr>Shells.
</p>
<p>
<b>ちなみに意味は…</b><br>
彼女は海岸の近くで海の貝殻を売っている。彼女が売っている貝殻はきっと海の貝殻だ。もし彼女が海岸で貝殻を売っているなら、彼女は海岸の貝殻を売っているに違いない。
</p>
[/html]

参考：http://www.htmq.com/html5/wbr.shtml

<br>…… 改行する

<br>タグは、改行する際に使用します。

<br>は、例えば詩や住所などのように、改行が実際にコンテンツの一部を成すような場合にのみ使用します。文の長さを揃えたりレイアウトを整えるなどのスタイリング目的に<br>を使用してはいけません。

例えば、フォームの入力項目を見栄え上分かりやすくするために、入力項目ごとに<br>タグで改行するような使い方は誤りです。このような目的には<br>ではなく、それぞれの入力項目を<p>～</p>で囲むほうが適切です。

■HTML4.01からHTML5へのバージョンアップによる変更点

br要素は、HTML4.01からHTML5へのバージョンアップで大きな変更はありません。

■HTML5での使用例

[html]
<p>
株式会社ｘｘｘ<br>
東京都千代田区0-0-0<br>
ABCマンション000号室
</p>
<form action="postmail.php" method="post">
<p><label>お名前<br><input type="text" name="namae"></label></p>
<p><label>お問合わせ<br><textarea name="toiawase"></textarea></label></p>
<p><input type="submit" value="送信"></p>
</form>
[/html]

参考：http://www.htmq.com/html5/br.shtml

<span>…… ひとつの範囲として定義する

<span>タグは、ひとつの範囲として定義する際に使用します。

<span>はそれ自身では何も意味を持っていませんが、style属性・class属性・lang属性・dir属性などの属性と一緒に使用する場合に便利な要素です。これらの属性と組み合わせることで、<span>～<span>で囲まれた範囲にスタイルシートやスクリプトを適用したり、その範囲の言語や表記方向を指定することができます。

lang属性は、言語を指定する際に使用します。例えば、日本語の本文中に部分的に英語が混じる場合などに、読み上げブラウザなどへの影響を考慮して言語を指定します。lang属性の値は、日本語ならja、英語ならenとなります。

dir属性は、テキストの表記方向を指定する際に指定します。dir属性の値は、表記方向が左から右ならltr（left-to-right）、右から左ならrtl（right-to-left）となります。

■HTML4.01からHTML5へのバージョンアップによる変更点

span要素は、HTML4.01からHTML5へのバージョンアップで大きな変更はありません。

■使用できる属性

lang属性

言語を指定（日本語ならja、英語ならen）

dir属性

文字表記の方向を指定（左から右ならltr、右から左ならrtl）

■HTML5での使用例

[html]
<p>
絵の具の
<span style="background-color: #0099FF">青色</span>と
<span style="background-color: #FFFF00">黄色</span>を混ぜると
<span style="background-color: #33CC33">緑色</span>になります。
</p>
[/html]

参考：http://www.htmq.com/html5/span.shtml

<bdo>…… 文字表記の方向を指定する

<bdo>タグは、文字表記の方向を指定する際に使用します。アラビア語やヘブライ語のように右から左に記述する言語を表記する際などに使用します。

文字表記の方向は、dir属性で指定します。dir属性の値は、表記方向が左から右ならltr（left-to-right）、右から左ならrtl（right-to-left）となります。

<bdo>をスタイリング目的で使用するのは誤りです。そのような目的にはCSSを使用してください。
CSSでは、<p style="direction: rtl; unicode-bidi: bidi-override;">～</p>などと記述します。

■HTML4.01からHTML5へのバージョンアップによる変更点

bdo要素は、HTML4.01からHTML5へのバージョンアップで大きな変更はありません。

■使用できる属性

dir属性

文字表記の方向を指定（左から右ならltr、右から左ならrtl）

■HTML5での使用例

[html]
<p>
<bdo dir="rtl">いづれの御時にか、女御、更衣あまたさぶらひたまひけるなかに…</bdo>
</p>
<p>
<bdo dir="ltr">どの帝の御代のことであったか、女御や更衣たちが大勢お仕えなさっていたなかに…</bdo>
</p>
[/html]

参考：http://www.htmq.com/html5/bdo.shtml

<rp>…… ルビを囲む記号を指定する

<ruby>・<rt>・<rp>は ルビをふる際に使用します。

<rt>はRuby Textの略でルビのテキストを、 <rp>はRuby Parenthesesの略でルビのテキストを囲む括弧等の記号を、それぞれ指定します。<rt>と<rp>は、<ruby>～</ruby>の中で子要素として使用します。

<rp>～</rp>の内容は、<ruby>タグに対応したブラウザでは無視されます。<ruby>タグに対応していないブラウザでは、　漢(かん)字(じ)　のように表示されます。

■HTML4.01からHTML5へのバージョンアップによる変更点

<ruby>・<rt>・<rp>は、すでにInternet Explorer5以降で先行採用されていますが、HTML5では標準仕様となります。ただし、Ruby Baseの略でルビをふる対象となる文字本体を示す<rb>は採用されない予定です。HTML5では、<rb>タグは省略して<ruby>～</ruby>内に直接ルビベースを記述します。

■HTML5での使用例

[html]
<ruby>
漢<rt>かん</rt>
字<rt>じ</rt>
</ruby><br>

<ruby>
漢<rp>(</rp><rt>かん</rt><rp>)</rp>
字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
[/html]

参考：http://www.htmq.com/html5/rp.shtml

<rt>…… ルビのテキストを指定する

<ruby>・<rt>・<rp>は ルビをふる際に使用します。

<rt>はRuby Textの略でルビのテキストを、 <rp>はRuby Parenthesesの略でルビのテキストを囲む括弧等の記号を、それぞれ指定します。<rt>と<rp>は、<ruby>～</ruby>の中で子要素として使用します。

<rp>～</rp>の内容は、<ruby>タグに対応したブラウザでは無視されます。<ruby>タグに対応していないブラウザでは、　漢(かん)字(じ)　のように表示されます。

■HTML4.01からHTML5へのバージョンアップによる変更点

<ruby>・<rt>・<rp>は、すでにInternet Explorer5以降で先行採用されていますが、HTML5では標準仕様となります。ただし、Ruby Baseの略でルビをふる対象となる文字本体を示す<rb>は採用されない予定です。HTML5では、<rb>タグは省略して<ruby>～</ruby>内に直接ルビベースを記述します。

■HTML5での使用例

[html]
<ruby>
漢<rt>かん</rt>
字<rt>じ</rt>
</ruby><br>

<ruby>
漢<rp>(</rp><rt>かん</rt><rp>)</rp>
字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
[/html]

参考：http://www.htmq.com/html5/rt.shtml