インラインフレームについて
本日の教材動画はこちら
今回の内容はインラインフレーム、略してiframeについて。インラインフレームは、特定のファイルをページの一部として表示させる機能を持つ。
＜iframe＞タグ
使い方は＜ifame＞＜/iframe＞で、タグ内に下記の属性をつけ足していって運用する。基本カッコ内の中身はなくてもいいが、インラインフレームに対応していないブラウザもある。そのため未対応の人用に、カッコ内に「このページはiframe対応ページでご覧ください」などいれておくと親切。
＜src＞属性について
表示させるファイルの場所を指定するのに使う。使い方はいつも通り src="パス"。
＜width＞属性と＜height＞属性について
表示させるインラインフレームの幅と高さを指定する。使い方は width="数字" height="数字"。フレーム内に収まらない場合はスクロールバーをちゃんと出してくれる賢い子。
＜iframe＞の基本的な使い方
上記3つの要素を組み合わせて使う（高さや幅指定しないと表示されないため）。そのため基本的な書き方は＜iframe src="パス" widht="幅" height"高さ"＞iframe対応ブラウザでご覧ください＜/iframe＞ となる。どのように表示されるかは下記画像の出来上がりページを参照されたし！
iframeに向かない場合とはどういった時か？
動画内で「iframeの手法が向かない場合もある」と言っていたが、果たしてどういう時なのか？調べてみたんですが…ぶっちゃけわかりませんでした！！装飾にはCSSを使わないとできないとか、Google検索はインラインフレーム内のページを除外するとか、そういう程度の事しかわかりませんでした。なので明確に「こういうページの場合は使わないほうがいい」っていうのは決まってないのかな…？
iframeを使う際の注意点
調べててわかったんですが、今と昔のiframeの取扱が結構変わってるようですね。注意点として下記が挙げられてましたのでメモしておきます。
・枠線の太さなどの指定はスタイルシートでする（ID属性やclass属性必須）
・HTML5のiframeは高さ指定はピクセル単位のみ（規定値は150px）
・サイズ指定はピクセル単位で指定（〇%という指定はもう使えない）
・縦のサイズを可変式にしたい場合はJavascriptで指定する
・scroll属性は廃止。表示させたくない場合はスタイルシートで指定。
確かに昔フレームを使ったサイトを作ったことがあったが、その時は height="100%" とかで記載してた覚えがあるなぁ。ボーダーサイズとかも全部そこで指定していたが、今ではもうできないらしい。教材にしてる動画のアップロード日が2016年ということを考えると、若干書き方を変えないとだめそうですね。
上記を踏まえて、正しい書き方は＜iframe src="パス" width="300px" height="400px"＞＜/iframe＞になるのかな？ほかにも色々と属性やらスタイルシートやらでできるみたいですが、調べ出すときりがなくまだ勉強していないことも含まれていたため、今回は一旦ここで切り上げます！
【参考サイト】HTMLのiframeタグの基本と正しい使い方について
