[HTML]iframeタグを使用して画面分割を行い、分割比率を自由に変更可能な画面を実装したい

前提・実現したいこと

HTML5に対応した画面分割を行いたいと考えています。
以前はFRAMESETタグを使用して画面分割を行うと分割後の区切り線がユーザの好きな比率で分割を行うことが出来ていましたが、
(区切り線をドラッグすることで分割比率を変更することが出来ていた)
iframeタグを使用してみたところ、分割後の分割比率を変更することが出来ませんでした。

HTML5ではFRAMESETタグが廃止されたとのことですので、iframeタグで同様の動作を行う方法をご教示いただけないでしょうか。

FRAMESETタグでの実装

HTML
1<FRAMESET ROWS="20,*">
2<FRAME >
3<FRAME >
4</FRAMESET>

iframeタグでの実装

HTML
1<div>
2    <iframe width="100%" height="40%"></iframe>
3    <iframe width="100%" height="60%"></iframe>
4</div>

K_3578

2021/04/23 05:32

>[HTML]iframeタグを使用して~実装したいで、質問者さんはこれを達成するために何をされたのでしょうか。

WBD212

2021/04/23 05:52

質問文を編集中に誤って質問を投稿してしまったため、質問内容を編集し終えているものを再掲しましたので、ご確認頂けると幸いです。また、「区切り線をドラッグすることで分割比率を変更する」動作の名称がわからないため、何と検索すればいいのかわからない状態です。調査に必要なキーワードを教えていただけるだけでも幸いです。

K_3578

2021/04/23 06:08

>編集中に誤って~ 成程、把握致しました。 >「区切り線をドラッグすることで分割比率を変更する」 https://www.conifer.jp/html5-frameset.html 上記サイトみたいな動作ですよね？ちょっと私もパッと出てこないので調べてみます。

WBD212

2021/04/23 07:02

> 上記サイトみたいな動作ですよね？まさにこのことです。

K_3578

2021/04/23 07:04

一応、回答してみましたがそこまで詳しくないので参考記事の提示に留めます。意図したものでなかったらすいません。

K_3578

2021/04/28 01:48

同じような質問があったのでURL載せておきます。 https://teratail.com/questions/335419 こちらの質問についているLhankor_Mhyさんの回答が参考になるかもしれません。

行動規範の内容に同意します

回答1件

ベストアンサー

軽く調べただけですが、普通のやり方では難しそうです。(無理かもしれない)
HTML5への対応フレーム
HTML5で同じような事をしている記事を見つけました。参考になるかもしれません。

投稿2021/04/23 06:19

K_3578

総合スコア1282

WBD212

2021/04/23 07:05

提示して頂いたページからダウンロードできるサンプルコードを試してみたところ、期待する動作が行われていることが確認できましたが何を行っているのかすぐには理解出来ないため解析しようと思います。

K_3578

2021/04/23 07:09

私もよく調べては居ないので、使うにしてもよく検討された上でお使いになってください。 (責任取れないので･･･)

WBD212

2021/04/23 07:35

期待する動作を実装している個所を抜粋して使用させて頂こうと考えていましたが、ほぼ全てのコードが必要なもののようですね。(JavaScript含め) FRAMESETタグのようにHTMLのみで期待する動作を実装する方法があるものと予想していましたが、調べている中では見つけることが出来ませんでした。もう少し調べてみて見つけることが出来ないようでしたら提示していただいたサンプルコードを採用して当質問を閉じさせて頂こうと思います。ありがとうございます。

K_3578

2021/04/23 07:40

若干期待されている物と違うかもしれませんがcssでiframeをresizeプロパティを方法もあるかもしれません。

WBD212

2021/04/23 07:53

確かに似たような動作にはなりますね。１度右下の斜線部分(?)をドラッグしてサイズ変更しないと区切り線をドラッグしても比率を変更することが出来ない点をどうにかすればFRAMESETタグと同様の動作にできるとは思いますが、方法が思いついていないです。

K_3578

2021/04/23 08:01

調べた感じだと見た目を変えることは出来そうですが、右下に位置するのを変えることは出来なそうです。

WBD212

2021/04/23 08:30

最終目標がSlackのように画面部品の表示比率をユーザが自由に変更することが出来る事を目指しているのですが、右下固定の場合、変更可能であることに気づいて頂けない可能性がありますので、区切り線にマウスオーバーするとカーソルが変わりユーザに変更可能であることがわかるようであれば理想的なのですが... 色々アドバイス頂きありがとうございます。

K_3578

2021/04/23 08:34

一応、このteratailのコメント欄もresize使われてますし、出来れば気付いて欲しいですが･･･そこは予め注意書きしておくとかですかね。質問者さんのお好みの方法でどうぞ。いえいえ、具体的な解決策提示できず申し訳ないです。色々とこちらでも勉強になりました。個人的に気になるので私は引き続き調べてみようと思います。何か分かったら回答に追記しますね。

WBD212

2021/04/26 09:08

その後、引き続き調べてみましたが他の解決方法が見つからなかったため、提示いただいたサイトのコードを参考にさせていただく事にしました。ありがとうございました。

K_3578

2021/04/26 09:10

そうでしたか。一応いつまでも放置してもアレですしクローズ感謝します。ちょっと色々調べてみます。私も気になるので質問者さんで方法見つけられたら共有して頂けると有難いです。

WBD212

2021/04/26 09:23

畏まりました。引き続き調査は続けるつもりですので、良い方法を見つけたら追記させて頂きます。

行動規範の内容に同意します