ホームページ全体にtxtファイルを表示させたい

実現したいこと

txtファイルをホームページ全体に表示させるようにしたい。

前提

VScodeを使ってホームページを作っています。
ページに移動したら、txtファイルの内容を画面全体に表示させたいです。
ですが、インラインフレームにtxtファイルの中身が表示されるだけで、画面全体に表示されません。
どのようにすれば小説ページのようにページに移動した瞬間、画面全体に文章を表示できますか

発生している問題・エラーメッセージ

テキストが画面全体に表示されない。
横の大小は数字をいじると変わるが、
縦の大小は数字をいじっても変わらない。

該当のソースコード

html,CSS
1<OBJECT DATA="ファイル名/テキスト名.txt"TYPE="text/plain" WIDTH="100%" HEIGHT="100%"></OBJECT>

試したこと

javascriptを使い出力するのはどうかと考え、調べている途中です。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

回答2件

ojectタグを使ったことがないため、よくわかりませんが、日常開発に主にjavascriptで実現します。下記の例は画面全体に表示できます。※テスト済み
ご参照ください。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>李テスト</title>
</head>

<body>
    <textarea id="text"></textarea>
    <script>
        const test = async file => {
            const response = await fetch(file)
            const text = await response.text()
            console.log(text)
            document.getElementById('text').value = text;
        }
        test('./123.txt')
    </script>
</body>
<style>
    html,
    body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }

    textarea {
        width: 100%;
        height: 100%;
        border: 0;
       resize: none;
    }
</style>

</html>

投稿2023/02/06 05:28

編集2023/02/06 05:29

user123

総合スコア11

回答へのコメント

mirai0205

2023/02/06 07:47 編集

回答ありがとうございます。表示するテストまでしていただいて、正確な情報提供をありがとうございます。まだ勉強始めたばかりで、すべて理解することができず、とても悔しいです。一つ一つ調べで、どう動いているのか、自分で理解して動かせるようになるまで、こちらのscriptをしっかり勉強させていただきます！

ベストアンサー

<object> の width height 属性にパーセント値は使えません。

代わりにCSSで幅高さを指定しましょう。
本当にビューポートいっぱいにしたいなら、<body>のマージンを0にするなども必要かもしれません。

html
1<style>
2object {
3  width: 100vw;
4  height: 100vh;
5}
6body {
7  margin: 0;
8}
9</style>
10<objct data="ファイル名/テキスト名.txt" type="text/plain"></object>

投稿2023/02/06 03:56

編集2023/02/06 04:11

int32_t

総合スコア17794

回答へのコメント

mirai0205

2023/02/06 07:38

回答ありがとうございます! 回答いただいたように書き込んでみたところ、無事に解決できました。 <object>で値を入れていたのがうまくいかなかった原因なのですね。 marginを0にすると画面の上下左右に余白なく表示ができるということも知らなかったため、とても勉強になりました！ありがとうございます！！

15分調べてもわからないことは
teratailで質問しよう！