HTMLでiFrameのサイズを変更する方法

ページ名：HTMLでiFrameのサイズを変更する方法

iFrameを使うと、YouTubeのビデオや広告、他のサイトのコンテンツなどの外部コンテンツを自分のウェブページに埋め込むことができます。HTMLやCSSを使ってiFrameのサイズを簡単に変更することができ、ユーザーの画面サイズに応じて自動的に調整することもできます。 このWikiHowでは、HTMLとCSSを使ってiFrameのサイズを変更する方法を紹介します。

方法1

HTMLを使う

  1. HTMLファイルを開きます。 HTMLファイルにはファイル名の後に".html "または".htm "という拡張子がついています。 HTMLファイルはメモ帳やテキストエディットなどのテキストエディタで編集できます。また、Adobe Dreamweaver、Codepen、HTML OnlineなどのHTMLエディタを使用することもできます。
    • お好みのテキストエディタまたはコードエディタでHTMLファイルを開くには、HTMLファイルを右クリックします。 次に、マウスカーソルを「Open with」の上に置きます。 HTMLファイルの編集に使用するプログラムまたはアプリケーションをクリックします。
  2. iFrame要素を探します。iFrameは通常、HTML文書の「<body>」セクションの下にあります。 <iframe src="というタグの後に、iFrame内に含まれるコンテンツのURLを引用符で囲んでください。
  3. width属性を編集します。 iframeタグのURLの後に "width="という属性があるはずです。 width="属性の後に、ピクセル単位の幅を引用符（" "）で囲んで編集します。 例えば、幅を300ピクセルにしたい場合は、タグのURLの後に "width="300px "と入力します。 width属性は、URLの後、閉じ括弧（>）の前であればどこでも入力できます。
    • また、iframeをユーザの画面やブラウザの幅に応じて自動的に調整したい場合は、固定幅ではなくパーセンテージを入力します。 例えば、iframeに幅の90％を使わせたい場合、"width="90%"という属性を追加します。
    • iframeタグに "width="属性がない場合は、タグに追加してください。 iframeのサイズが、HTMLタグではなくCSSコードによって決定されている可能性もあります。
  4. height属性を編集します。 iframeタグに "height="が表示されているはずです。height="属性の後に、ピクセル単位の幅を引用符（" "）で囲んで編集します。 例えば、高さを200ピクセルにしたい場合は、height属性として "height="200px "と入力します。 height属性は、URLの後、閉じ括弧（">"）の前であればどこでも入力できます。
    • また、iframeが利用可能なスペースに基づいて自動的にサイズを調整したい場合は、固定の高さの代わりにパーセンテージを入力することもできます。 例えば、iframeに利用可能なスペースの90%を使わせたい場合、属性として "height="90%""と入力します。 また、"height="auto"" 属性を使えば、幅に対して自動的に高さを調整することができます。
    • iFrameタグに "height="属性がない場合は、iframeタグに追加してください。 また、iFrameのサイズが、HTMLタグではなく、CSSコードによって決定される可能性もあります。
    • さらに、iframeをスクロールできるようにする必要がある場合は、閉じ括弧の前のheight属性の後に "scroll="true "を追加することができます。
  5. 閉じタグがあることを確認してください。 すべての属性を含むiframeタグの直後に、閉じタグを記述します。 閉じタグは単に</iframe>です。 iframeのHTMLコードは、以下のようになるはずです：
    <iframe src="iframe_contents.html" width="300px" height="200px" scroll="true"></iframe>.
  6. HTMLファイルを保存する。 HTMLファイルの編集が終わったら、上部のメニューバーで「ファイル」をクリックし、続いて「保存」をクリックしてファイルを保存するのが一般的です。
  7. HTMLをレンダリングする。HTMLファイルをレンダリングすることで、どのように見えるかを確認し、幅と高さが正しく設定されていることを確認できます。 HTMLファイルを任意のウェブブラウザでレンダリングすることができます。 HTMLファイルをダブルクリックすると、デフォルトのウェブブラウザで開きます。 または、ファイルを右クリックし、「Open with」にカーソルを合わせて、ファイルを開くウェブブラウザを選択することもできます。
方法2

CSSを使う

  1. HTMLまたはCSSファイルを開きます。 CSSはHTMLファイル内に埋め込むこともできますし、HTMLファイル内にリンクされた別のCSS（.css）ドキュメントにすることもできます。 通常、HTML文書のCSS部分は「<style>」タグの下にあります。 通常はHTML文書の「<head>」セクションにあります。 そこにCSSコード、または外部CSSドキュメントへのリンクがあります。
    • HTMLコードの中に別のCSSドキュメントがリンクされている場合は、"<link rel="stylesheet" href="css_document.css">"のようなタグの中にCSSドキュメントを見つけることができます。 これは通常、"<head>"セクション内にあります。
  2. iframe要素を探します。 CSSでは、iframe要素タグは "iframe {"のように見えます。 CSSコードの中からiframe要素を探します。 全ての属性は、CSS要素タグの下にリストされています。
    • あるいは、iframeのサイズを分割クラスで制御することもできます。 その場合は、"<div clearall">タグの横にある分割クラスの名前を見つけることができます。
  3. width属性を編集します。 iframe要素の下にある属性リストの "width: "属性の後に、iframeの幅をピクセル単位で入力します。 そして、属性の後にセミコロン（";"）を置きます。 例えば、iframeの幅を300ピクセルにしたい場合、width属性は "width: 300px; "となります。
    • また、iframeの幅をユーザの画面やウェブ・ブラウザのウィンドウの大きさに応じて自動的に調整したい場合は、固定サイズの代わりにパーセンテージを入力することもできます。
      • 例えば、
    • "width: 100%;" と入力すると、iframeの横幅を100%使用
      • するようになります。
    • width属性がない場合は、追加して
      • ください。
  4. height属性を編集する。 iframe要素の下にある属性リストの "height: "属性の後に、iframeの高さをピクセル単位で入力します。 そして、属性の後にセミコロン（";"）を置きます。 例えば、iframeの高さを200ピクセルにしたい場合、height属性は "height: 200px; "となります。
    • また、iframeの高さをユーザの画面やウェブ・ブラウザのウィンドウの大きさに応じて自動的に調整したい場合は、固定サイズの代わりにパーセンテージを入力することもできます。 例えば、"height: 100%;" という属性を入力すると、iframeは利用可能な縦方向のスペースの100％を使用することになります。 また、"height: auto; "と入力すれば、幅に対する高さを自動的に調整することができます。
    • height属性がない場合は、追加してください。
    • さらに、iframeをスクロールできるようにしたい場合は、"overflow: auto; "属性を追加することで、必要に応じてスクロールバーを追加することができます。
  5. 閉じタグがあることを確認します。 iframe要素に必要な属性をすべて入力したら、必ずリストの一番下に"}"を置いてiframe要素を閉じます。 iframe属性のプロパティは、HTMLコード内の全てのiframeに適用されます。 あなたのCSS iframe要素は、以下のようになるはずです：
    iframe { width: 300px; height: 200px; overflow: auto; }.
  6. HTML文書にiframeを追加します。 HTML文書にまだiframeタグがない場合は、追加することができます。 HTMLタグに "height "や "width "属性を追加する必要はありません。 以下のコードをHTML文書に入力し、iframeを追加してください。 content_url]」は、iframeの中に入るコンテンツのURLに置き換えてください：
    • <iframe src="[content_url]"></iframe>.
  7. HTMLファイルを保存します。 HTMLファイルの編集が終わったら、上部のメニューバーにある「ファイル」をクリックし、「保存」をクリックしてファイルを保存します。
  8. HTMLをレンダリングする。HTMLファイルをレンダリングすることで、どのように見えるかを確認し、幅と高さが適切かどうかを確認することができます。 HTMLファイルは、お好みのウェブブラウザでレンダリングできます。 HTMLファイルをダブルクリックすると、デフォルトのウェブブラウザで開きます。 または、ファイルを右クリックし、「Open with」にカーソルを合わせて、ファイルを開くウェブブラウザを選択することもできます。
方法3

分割クラスを使う

  1. HTMLファイルやCSSファイルを開きます。 HTML文書内のすべてのiframeのサイズを制御するために個々のCSS属性を使用することに加えて、iframeやその他のコンテンツのサイズを制御するために分割クラスを使用することもできます。 分割クラスは、文書の他の部分とは別にHTMLコードを保持するコンテナとして機能します。 複数の分割クラスを持つことができ、それぞれCSSを使ってスタイルを設定することができます。
  2. CSSセクションに移動してください。 CSSはHTMLファイル内に埋め込むこともできますし、HTMLファイル内にリンクされた別のCSS（.css）文書にすることもできます。 通常、HTML文書のCSS部分は「<style>」タグの下にあります。 通常はHTMLファイルの「<head>」セクションの下にあります。 そこにCSSコードまたはCSSドキュメントへのリンクがあります。
    • HTMLコードとは別にCSSファイルへのリンクがある場合は、文書の「<head>」セクションの下にある「<link rel="stylesheet" href="css_file.css">」のようなタグの中にCSSファイルを見つけることができます。
  3. 新しい分割クラスIDを作成する。 新しい分割クラスを作成するには、ピリオド（"."）の後に分割クラス名を入力します。 そして、最後に「{」を追加して、分割クラス要素を開きます。 ディビジョンクラスには好きな名前を付けることができますが、スペースを含めることはできません。
    • 例えば、.iframe_container {.
  4. width属性を追加します。 width属性を追加するには、"width: "と入力し、その後にピクセル単位の幅を分割クラス要素の下に入力します。 そして最後にセミコロンを追加します（例："width: 300px;"）。
    • また、分割クラスの幅をユーザーの画面やウェブ・ブラウザーのウィンドウの大きさに応じて自動的に調整したい場合は、固定サイズの代わりにパーセンテージを入力することもできます。 例えば、"width: 100%;" という属性を入力すると、分割クラスは利用可能な水平方向のスペースの100％を使用することになります。
  5. 高さ属性を追加する width属性を追加するには、"height: "と入力し、division class属性の下にピクセル単位の幅を入力します。 そして最後にセミコロンを追加します（例："width: 200px;"）。
    • また、分割クラスの高さをユーザーの画面やウェブ・ブラウザーのウィンドウの大きさに応じて自動的に調整したい場合は、固定サイズの代わりにパーセンテージを入力することもできます。 例えば、"height: 100%;" という属性を入力すると、分割クラスは利用可能な垂直方向のスペースの100％を使用するようになります。
    • さらに、分割クラスをスクロールできるようにしたい場合は、"overflow: auto; "属性を追加して、必要なときにスクロール・バーを追加することができます。
  6. 分割クラスを閉じる 分割クラスに追加したいCSS属性をすべて追加し終えたら、属性のリストの一番下に"}"を追加して、CSSの分割クラス要素を閉じます。
  7. 分割クラスのコンテナをHTMLファイルに追加します。 HTML文書のiframeを追加したい場所に移動します。 そして、"<div id=""と入力し、その後に分割クラスIDを引用符で囲みます。 そして、タグの最後に閉じ括弧（">"）を追加します。(例："<div >"）。
  8. iframeタグをdivision classタグの下に追加します。 iframeのHTMLタグに高さや幅の属性を追加する必要はありません。 分割クラスがiframeの高さと幅を決定します。 以下のコードをHTMLドキュメントに入力して、iframeを追加してください。 content_url]」はiframeの中に入るコンテンツのURLに置き換えてください：
    • <iframe src="[content_url]"></iframe>とします。
  9. HTMLドキュメントの分割クラスを閉じます。 HTMLを閉じるには、iframeタグとiframeの中に入れたい他のコンテンツの後に</div>とタイプします。 CSSを含むHTML文書は以下のようになるはずです：
    <HTML> <head> <style> .iframe_container { width: 300px; height: 200px; overflow: auto; } </style> </head> <body> <div [content_URL]"></iframe> </div> </body> </html
  10. HTMLファイルを保存します。 HTMLファイルの編集が終わったら、上部のメニューバーで「ファイル」をクリックし、続いて「保存」をクリックしてファイルを保存するのが一般的です。
  11. HTMLをレンダリングする。HTMLファイルをレンダリングすることで、どのように見えるかを確認し、幅と高さが正しく設定されていることを確認できます。 HTMLファイルは、お好みのウェブブラウザでレンダリングできます。 HTMLファイルをダブルクリックすると、デフォルトのウェブブラウザで開きます。 または、ファイルを右クリックし、「Open with」にカーソルを合わせて、ファイルを開くウェブブラウザを選択することもできます。
この記事は、CC BY-NC-SAの下で公開されている " How to Resize iFrames in HTML " を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。

シェアボタン： このページをSNSに投稿するのに便利です。

コメント

返信元（返信をやめる）

※ 悪質なユーザーの書き込みは制限します。
最新を表示する
NGIDの確認

NG表示方式

NGID一覧