LoginSignup
10
3

More than 1 year has passed since last update.

htmlの中にhtmlを埋め込む

Posted at

HTMLにHTMLを埋め込んでみる

簡単だしすぐにできるけど,結構埋め込みや,他のところのサイトを持ってくることも需要があると思うので,なるべく簡潔に書いて記録しておく.

index.htmlの中にindex2.htmlを埋め込みたい!

CSSとかの体裁部分は省きます.一応heightやwidthは書いたけど.

index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>html_in_html</title>
    </head>
    <body>
        <h1>htmlの中にhtmlを埋め込む</h1>

        <!--外部ファイルを読み込むiframe要素-->
        <h1>iframe要素の使用例</h1>
        <iframe src="index2.html" width="500" height="500"></iframe>
    </body>
</html>
index2.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>html_in_html2</title>
        <link rel="stylesheet" type="text/css" href="./no title_files/style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com/">
        <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="">
    </head>
    <body>
                <!-- 中身を書く -->
    </body>
</html>

これだけでできる!index.htmlの中に,<iframe src="[URL]"></iframe>を入れるだけで,簡単に読み込むこともできるし,その場での画面調整も結構簡単にできる.

活用していこう!

10
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
3