iframeをフルスクリーンにする方法 - コード例と共に

方法1: HTMLとCSSを使用する方法この方法では、HTMLとCSSを使用してiframeをフルスクリーンに表示します。

HTMLコード:

<!DOCTYPE html>
<html>
<head>
    <style>
        iframe {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <iframe src="your_iframe_url"></iframe>
</body>
</html>

上記のコードでは、position: fixed;を使用してiframeを画面の左上に固定し、top: 0;とleft: 0;を使用して画面の上端と左端に配置します。さらに、width: 100%;とheight: 100%;を指定してiframeを画面全体に広げます。

方法2: JavaScriptを使用する方法この方法では、JavaScriptを使用してiframeの高さを画面の高さに合わせます。

HTMLコード:

<!DOCTYPE html>
<html>
<head>
    <style>
        #fullscreen-iframe {
            width: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <iframe id="fullscreen-iframe" src="your_iframe_url"></iframe>
    <script>
        function setIframeHeight() {
            var iframe = document.getElementById('fullscreen-iframe');
            iframe.style.height = window.innerHeight + 'px';
        }
        window.addEventListener('resize', setIframeHeight);
        setIframeHeight();
    </script>
</body>
</html>

上記のコードでは、まずCSSでiframeの幅を100%に設定し、JavaScriptでiframeの高さを画面の高さに合わせる関数setIframeHeight()を定義します。また、resizeイベントリスナーを使用してウィンドウのリサイズ時にiframeの高さを更新します。

これらの方法を使用すると、iframeをフルスクリーンに表示することができます。適宜、your_iframe_urlの部分を実際のiframeのURLに置き換えてください。

このブログ投稿では、"iframe"、"フルスクリーン"、"HTML"、"CSS"、"JavaScript"などのキーワードを使用することができます。