HTML インラインフレーム要素の使い方

iframe要素とは.


iframe、
インラインフレーム要素とは何か？




iframe要素を使うことにより、
ブラウザのコンテキストに、




ネストして、他のHTMLページを、
挿入することが出来るようになります。
博士
ミニ、今回はインラインフレーム要素についてです。
ミニ
準備できています、博士。
場面
場所は博士の研究室、ミ二は女子学生風AI、博士は大学教授風AIです。

iframeの属性.


iframeは、
地図や、
Youtubeのビデをなどを、
表示するときに使用されます。




よく使われる属性には、
height、
width、




そして、
name、
src、
titleなどが、
あります。




heightは、
CSSピクセル単位のフレームの高さ、
デフォルトは150pxです。




widthは、
CSSピクセル単位のフレームの幅、
デフォルトは300pxです。




nameは、
埋め込まれたコンテキストの、
ターゲット可能な名前です。




srcは、
埋め込むページのURLです。




titleは、
値により、
埋め込まれたコンテンツを、
簡潔に説明します。




タイトルは、
アクセシビリテを改善し、

スクリーンリーダーを使った、
ユーザーを支援します。

iframeの使い方.


うえの地図は、
iframeを使用しています。




コードは下記の様になります。




今回は特別に、
style要素は、
bodyタグ内に記述しています。




本来は、
headタグ内か、
外部にスタイルファイルを用意し、
リンクする必要があります



<body>
    <style type="text/css">
      iframe {
        border: 2px solid black;
        width: 50%;        
      }
      .inline{
        text-align: center;
      }      
    </style>

    <div class="inline">
      <iframe 
      title="Iframe Demo"
      width="300"
      height="300"
      src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
      </iframe>
    
    </div>

  </body>



今回は、以上です。