本記事はこんな方にオススメ
「Webページに別のwebページを埋め込みたい方」
「web初心者で、HTMLを使ったインラインフレームを作る方法が知りたい方」
「HTMLのiframe要素を使えるようになりたい方」
本記事の内容
ブログやサイト等のページを作る際に、「ここに他のWebページを持ってこれたら…」と思ったことはありませんか？
その願いを叶えるのに必要なのは、HTMLのiframe要素かも知れません。
HTMLのiframe要素を使うと、ウィンドウ内の特定の範囲に、別のWebページを埋め込むことができます。
今回は、そのiframe要素を使った、インライン・フレームの作り方をご紹介していきます。
少し難しそうだと感じている方もいらっしゃるかも知れませんが、Web初心者の方でも分かりやすく、解説していきますので、安心して、読み進めてください♩
[Web初心者でも簡単] HTMLでインライン・フレームを作ってみよう（HTML実用編５）
今回の記事のゴール
今回作るインライン・フレームはこんなもの
今回作るインライン・フレームはこの様なものです。
この記事を読み進めると、Web初心者の方でも簡単に、Webページ内の特定の範囲に、別のWebページを埋め込むことができます。
箇条書きのどれかをクリックするとフレーム内に、正誤と解説が表示されるといった具合です。
このHTMLのiframe要素を使った、インライン・フレームの作り方は、想像よりも簡単に出来てしまいます。
とっても簡単です♩
今回のインライン・フレーム作りで身につく知識
- <iframe>の使い方
- name属性の使い方
- width属性/height属性の使い方
- target属性の使い方
インライン・フレームをHTMLで作るために
Webページ内の特定の範囲に、別のWebページを埋め込むことができるインライン・フレームを、
web初心者の方でも簡単に、HTMLで作る方法を早速見ていきましょう♩
インライン・フレーム作成で使うHTMLタグの公式
今回使うHTMLタグは、こちらです！
表示したいwebページのURLには、埋め込みたい別のWebページのURLを書きましょう。
そしてページのレイアウト等を決める属性は重要なので、以下に別にまとめます。
<inframe>中のname属性
Webページ内の特定の範囲に、別のWebページを埋め込むことができるインライン・フレーム。
HTMLで作る際に必要な属性を見ていきます。まずはname属性です。
name属性
Webページ内の特定の範囲＝フレームの名前の指定をします。
フレームの名前を指定することで、<a>で移動する、リンクのような機能をつけたときに、何という名前の場所に移動させればいいのかをHTMLで指示できます。
（これから下で紹介する具体例を見ていけば、どういう場合なのか分かるはずなので、ピンとこなかった方はname属性＝フレームの名前の指定ができるとだけ今は理解してください。）
<iframe>中のwidth/height属性
width/height属性
Webページ内の特定の範囲＝フレームをどのような形にするのかを、高さと幅で指定する機能と考えてください。
では次はこれらの公式と属性を使って、具体的にインライン・フレームを作成する方法を見ていきましょう。
具体的にインライン・フレームを作ってみよう
実際のHTMLを見てみよう
例えばこんなインライン・フレームを作る時、
HTMLはこの様になっています。
また、フレーム内にはじめに表示されるページのHTMLはこちらです。
そして箇条書きの３つの項目のどれかをクリックした時に表示されるページのHTMLはこのようなものです。
箇条書きの「新しく入ってくるモノから離れる」をクリックした時、フレーム内に表示されるページのHTMLはこちらです。
箇条書きの「モノの執着から離れる」をクリックした時、フレーム内に表示されるページのHTMLはこちらです。
ではなぜこのよなHTMLになっているのか、ひとつひとつ確認していきましょう。
<iframe>の中の意味
まずは今回の<iframe>のHTMLの中身を見ましょう。
このifarame要素では主に３つの指示が出されています。
順に追って、見ていきましょう。
<iframe src=”base-frame.html” name=”answer” width=”300″ height=”150″></iframe>
１つ目は「src=”base-frame.html”」の部分で、URLがbase-frame.htmlのページをフレーム内に表示するように指示を出しています。
２つ目は「name=”answer”」の部分ではname属性を使って、このフレームをanswerという名前に名付けています。
そして３つ目は「width=”300″ height=”150″>」の部分で、幅が300pixelで、高さが150pixelのフレームの形となるように指示しています。
別記事にHTMLのフォーマット基礎をまとめますので、そちらの記事でご確認ください。
<a>の中の意味
次に<a>の部分を見ていきましょう。
<a href=”tatu.html” target=”answer”>では主に２つの指示が表現されています。
１つ目は「href=”tatu.html”」の部分で、URL/ファイル名がtatu.htmlの場所に移動するようにとの指示です。
２つ目は「target=”answer”」の部分で、名前がanswerの部分にURL/ファイル名がtatu.htmlの内容を表示をするようにとの指示です。
ここで言う名前がanswerの部分とは、<iframe>中で「name=”answer”」と名付けたフレーム自体のことを指します。
この２つの指示により、箇条書きの３つのどれかをクリックすると、フレーム内に正誤が表示されるようになっています。
箇条書きリストを示す<ul><li>について詳しくを知りたい、または復習したいという方はこちらの記事にまとめていますのでご参考ください♩https://jazziblog.com/make-a-list-in-html
移動やリンク機能の役割を果たす<a>について詳しく知りたい、または復習したいという方はこちらの記事にまとめていますのでご参考ください♩https://jazziblog.com/put-a-link-in-html
インライン・フレーム具体例の骨組み
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>インライン・フレームのHTML</title>
</head><body>
<p>断捨離の「離」はどのような意味が込められているでしょうか？</p>
<ul>
<li><a href=”tatu.html” target=”answer”>「新しく入ってくるモノから離れる」</a></li>
<li><a href=”suteru.html” target=”answer”>「既に持っているモノから離れる」</a></li>
<li><a href=”hanareru.html” target=”answer”>「モノの執着から離れる」</a></li>
</ul>
<iframe src=”base-frame.html” name=”answer” width=”300″ height=”150″></iframe>
</body>
</html>
少し複雑に見えがちなHTMLかも知れませんが、しっかりと基礎を身につけていけば、怖くありません♩
HTMLではよく使うような頻出タグを抑えていけば、大枠が分かるようになるので、HTML初心者の方は特にその大枠を抑える部分を意識して、学習に臨むと効率的だと思います。
以上、jazziでした！
コメント