HTML5×CSS3 DOCUMENT WORKSPACE
HTML5×CSS3 DOCUMENT WORKSPACE
Reference from W3C document about HTML5.1 draft
HTML has been in continuous evolution since it was introduced to the Internet in the early 1990s.HTML4 became a W3C Recommendation in 1997.In 2006, the W3C indicated an interest to participate in the development of HTML 5.0 and in 2007 formed a working group chartered to work with the WHATWG on the development of the HTML specification.
 HTMLワーキンググループにより策定されHTML標準化仕様になったHTML5と新しく構造化文書を表現する方法として標準化になったCSS3を使用するサイト制作が主流になっていますが、当サイトではHTML標準化仕様のW3C HTML5/CSS3 Draftより要素・構文の変更点を確認し利便性・機能性の向上についてより理解を深めていきながら、W3Cドラフト仕様を広める目的でHTML5/CSS3を使用したサイト制作法と記述法のご紹介をしています。
 当サイトにつきましては制作過程であり定期的に更新をしています。誤表記や内容等の誤りにつきましては発見次第できる限り修正を図っていく意識で制作に取り組んで参りますのでご了承下さいますようお願いします。
▶SOCIAL-INFOKNOWLEDGE.COM
CorporateSite

HTML5×CSS3 DOCUMENT WORKSPACE

CONTACT

下記フォームに必要事項を入力後、確認ボタンを押してください。

ご用件
お名前 ※必須
電話番号(半角)
Mail(半角) ※必須
性別 男 
サイトを知ったきっかけ 友人・知人  検索エンジン
お問い合わせ内容

 

HTML5 DocumentWorkspace Root > HTML5 Element -Embedded content/Frow Content

HTML5 Element -Embedded content/Frow Content

 HTML5で使用される新要素についてメインページで軽く説明を致しましたが、ここでは更にエンベディット・コンテンツに属する外部コンテンツを読み込む要素について詳細内容を説明をしていきます。ここでは外部コンテンツの読み込みとしてiframe,embed,object要素を使用した例を取り上げていきます。

 HTML5による新要素についてW3Cによる詳細をご確認したい方は以下のリンク先より確認をお願いします。

W3C - The Markup Language (an HTML language reference)

iframe 要素

今回はiframeについて説明します。インラインフレームはHTML内部に更にフレームを内臓しHTMLコンテンツ等のテキストコンテンツを読み込むことを可能とする要素です。

コンテンツモデルはテキストを使用することが取り決めとなっています。

私が使用した例では画面左部にあるナビコンテンツ内にあるはiframeを試用してXMLデータを読み込みメインコンテンツ内に埋め込む形で表示をしています。 XMLデータを使用している理由はお勧め記事メニューをXMLデータを更新することによって即座に変えることができ、更にXSLTとCSSを使用することによってメインコンテンツと代わり映えのない表記を外部コンテンツ読み込みで簡単に表現したかったこと、あとは個人的に試用目的もあります。

XMLデータをiframeで表示させる時の注意点は開始タグと終了タグの間には何も入れないよう注意して下さい。尚、画面の表示がされない場合はブラウザの変更が必要です。私の場合はIE9では表示がされませんでしたが、google chrome,Firefoxの最新バージョンでは確認がとれています。

iframe自体はHTML5になってからの新要素ではありませんが、新たに属性が加わりましたのでその部分を踏まえて書いていこうと思います。その他メインコンテンツに外部コンテンツを埋め込む要素としては embed要素、object要素がありますが使用法が異なってきますので後日記述致します。


srcコンテンツ 属性

インラインフレームに埋め込むテキストを指定します。コンテンツはテキストを使用します。(html/xml)


srcdocコンテンツ 属性

html5からの新属性です。外部コンテンツを用意しなくてもフレーム内にHTMLコンテンツ等を表示させることが可能です。簡易的にiframeを使用したい場合での活用法となります。


nameコンテンツ 属性

nameコンテンツ属性はリンクターゲットに指定したい場合に使用されます。object要素等でも使用することが可能です。


sandboxコンテンツ 属性

HTML5で新たに追加された新属性でありフレーム内部のリンクターゲット、スクリプトを無効にする属性です。 iframeに組み込まれたスクリプトが勝手に動作して予期せぬバグを起こさないようなセキュリティ強化の目的を持つ属性であり、sandboxがセットされた場合リンクターゲット、スクリプト、フォームを無効にしてしまいます。

sandboxの制限をはずす場合はsandboxに次の指定をする必要があります。

・allow-same-origin:親ドキュメントと同様の扱いとなります。

・allow-forms:フォームのサブミット等が許可されます。

・allow-scripts:スクリプトが許可されます。


frameborderコンテンツ 属性

フレームの外部フレームを表示させるかどうかを指定します。フレームを表示させる場合は"1"を指定し、非表示の場合は"0"を指定します。

表示をさせない場合の例は以下のとおりです。


scrollingコンテンツ 属性

画面をスクロールさせるかどうかを指定します。自動で判断させる場合はauto、スクロールさせる場合はyes、スクロールさせない場合はnoを指定します。


外部コンテンツ-XMLData読み込み例

xmlデータをscrollさせないで埋め込んだiframeは次のようになります。メインコンテンツに外部コンテンツとしてXMLデータを読み込み、XMLデータをXSLTによって整形化しそこに通常のスタイルシートを組み合わせた方式です。

簡易的にXMLなどの外部リソースを読み込む場合に非常に有効な方法です。


HTML5 Element -外部コンテンツ読み込み embed/object

外部コンテンツ-embed要素

次にembed要素、object要素について説明をしていきます。ともに外部リソースを読み込むためのプラグインとして使われる要素ではありますが若干の違いがあり、object要素に関しては開始タグ、終了タグ、ともに必要ですが、embed要素は終了タグを必要としません。

その他大きな違いとして、現在は主流はobject要素が使われるのが一般的のようですがemebed要素はプラグインの要素として使われてきた要素であることから比較的古いブラウザでも動作がされるということです。

その為、作成するホームページの公開対象や仕様によって要素を使い分けをするようがよいようです。

その他FLASH組み込みの場合はembed要素が使われており、次のような記述となりますので例文として記載いたします。

外部コンテンツプラグイン object要素

object要素の使用例を記載します。

今回、外部コンテンツプラグインとしてiframe,embed,objectの3要素を記載いたしましたが、本ページではhtml上でのデータを読み込み程度にしか使用しておりませんので、iframeを使用してデータをXMLデータを読み込んでいます。

外部コンテンツプラグインとしての要素として、今後の使用法としてはHTML上での外部からのhtmlの読み込みにはiframe,FLASH等のホームページへの読み込みに関してはembed要素、その他の外部コンテンツ、イメージ、スクリプト、データに関してはobject要素を使用することがスタンダードな使用法かと感じられました。