最強のスマホ・パソコンライフ: HTML5で廃止された【frame要素】の代わりにiframe要素を使用する記述する方法‐HTML・CSSを学ぶ

前回、HTML5で廃止された【frame要素】の代わりにobject要素を使用する記述方法を検証しました。非常に簡単でフレームを表示できたのでこれは良い方法を見つけたと思っていました。

object要素でフレーム表示すると文字が大きく表示される

ホームページに取り入れて実際の表示を見てみると、今までと変わりなくフレームが表示されていましたが、何かおかしな点があることに気付きました。

フレーム内に表示された別ページのテキストなのですが、そのテキストの文字がフレーム外の文字と比べると、幾分大きく見えるのです。なぜ、文字の大きさが変わったのでしょうか？

同じスタイルシートで適用されているデザインなので変わらないと思うのですがよく分かりません。このフレーム内に表示されているテキストの文字の大きさを変えることはできないのかなと思って色々と調べてみました。

余り良い検索結果が出てきません。その中から、フレーム内に表示されるコンテンツがテキストページだと、文字は標準の大きさで表示されるというものでした。でも、何か方法はあるはず！？。

スタイルシートで指定すれば文字の大きさは変えられるのではと思っていたのですが、その方法が見つかりませんでした。結局他の方法を探すしかないのかなと結論付けしました(笑)。

とても簡単で使い易いobject要素だったので残念ですが、諦めるしかなさそうです。画像や動画などのコンテンツを表示することは問題ないのでテキストを除いて使用すればとても便利な要素タグなので今後も使用したいと思います。

object要素を使用してフレームに他のテキストページを表示する方法については下記のリンクを参考にしてください。

iframe要素はHTML4.1の時は非推奨とされていたが、HTML5では解除されています。良いものは見直され新たに採用されるのですね。でも本当はコロコロと変更してほしくない気分ですがこのiframeについては大歓迎します。

他に適当な対策案が見つからないですね。もっと本腰を入れて探せばあるのかもしれませんが、今は、私の実力範囲で対応できるもので対応したいと思います。

HTML5では以下の要素が廃止となっている為、スタイルシートcssに記述して指定します。

width="100%" height="300" frameborder="0" marginheight="1" marginwidth="1" scrolling="AUTO"

このコードを<head>～</head>の間に記述します。CSSになります。

<style>

#ifm {

border: none;

width: 100%;

height: 300px;

}

</style>

object要素にしてもiframe要素にしてもフレームに表示されたテキストメニューの文字の大きさは標準表示となっているようでフレーム外の文字より大きく表示されています。これだとどちらを使用しても良いかなと思います。

まだ対応策があるかもしれませんので探してみてあったらまた紹介したいと思います。

追伸：下記リンクに対策が見つかりましたので記載しています。